site-10584/pages/video/detail/[id].vue

<!-- 文章详情 -->
<template>
  <Banner :layout="layout"/>

  <!-- 主体部分 -->
  <div id="container" class="clearfix xl:w-screen-xl m-auto">

    <div class="left">
      <!-- 内页左侧组件 -->
      <Left :category="category" :title="$t('video.title')" />
    </div>

    <div class="right">
      <div class="sitemp h-[32px] flex justify-between">
        <h2>
          {{ form.categoryName || '分类名称' }}
        </h2>
        <Breadcrumb :data="form" :categoryName="form.categoryName"  :detail="$t('detail')" />
      </div>
      <div class="detail-container">

          <!-- 产品详细 -->
          <div class="product_detail" id="pd1">
            <div class="allcontent clearfix">
              <div class="text-center text-xl text-gray-800 py-5">{{ form.title }}</div>
              <el-carousel v-if="form.files" :interval="4000" height="400px">
                <el-carousel-item v-for="item in form.files" :key="item"  style="display: flex; align-items: center; justify-content: center">
                  <el-image :src="item" />
                </el-carousel-item>
              </el-carousel>
            </div>

            <div class="clearboth"></div>
            <div class="p_detail">
              <ul id="product-tab" class="product-tab clearfix">
                <li class="cur">{{ $t('show.detail') }}</li>

              </ul>
              <!-- 内容组件 -->
              <Content class="text-sm" :data="form.content" />
            </div>
            <h3 class="tag">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
            <Tags :data="form.tags" />
            <NextArticle />
          </div>


        <!-- 相关产品和相关新闻 -->
<!--        <div class="relate_list">-->
<!--          <CmsProductRelated :data="form" />-->
<!--          <CmsArticleRelated :data="form" />-->
<!--        </div>-->


      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {getPath, locationUrl, paramsId} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import useFormData from "~/utils/use-form-data";
import Banner from "@/components/Banner.vue";
import type {Layout} from "~/api/layout/model";
import Left from "~/components/Left.vue";
import {getCmsArticle} from "~/api/cms/cmsArticle";
import {listCmsNavigation} from "~/api/cms/cmsNavigation";
import Tags from "~/components/Tags.vue";
import Content from "~/components/Content.vue";

// 引入状态管理
const route = useRoute();
const i18n = useI18n();
const layout = ref<Layout>({});
const category = ref<CmsNavigation[]>([]);
const parentName = ref('项目展示');

// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
  // 文章id
  articleId: undefined,
  // 文章模型
  model: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  tags: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: undefined,
  // 文章内容
  content: undefined,
  // 虚拟阅读量
  virtualViews: undefined,
  // 实际阅读量
  actualViews: undefined,
  // 访问权限
  permission: undefined,
  // 访问密码
  password: undefined,
  password2: undefined,
  // 用户ID
  userId: undefined,
  // 用户昵称
  nickname: undefined,
  // 账号
  username: undefined,
  // 用户头像
  // userAvatar: undefined,
  author: undefined,
  // 所属门店ID
  shopId: undefined,
  //
  likes: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: undefined,
  // 状态
  status: undefined,
  // 创建时间
  createTime: undefined,
  // 更新时间
  updateTime: undefined,
  tenantId: undefined,
  // 租户名称
  tenantName: undefined,
  // 租户logo
  logo: undefined,
  // 详情页路径
  detail: undefined
});

// 请求数据
const reload = async () => {
  await getCmsArticle(paramsId()).then(data => {

    assignFields(data);

    layout.value.banner = data?.banner;
    if (data.files) {
      form.files = JSON.parse(data.files);
    }

    // 二级栏目分类
    listCmsNavigation({
      parentId: data.parentId,
      lang: i18n.locale.value
    }).then(list => {
      category.value = list
      // 宣传视频
      if(data.categoryName == '宣传视频'){
        parentName.value = '宣传视频'
        category.value = [];
      }
    })

    // seo
    useSeoMeta({
      description: form.comments || form.title,
      keywords: form.title,
      titleTemplate: `${form?.title}` + ' - %s',
    })

  }).catch(err => {
    console.log(err,'err')
  })
}

watch(
    () => route.path,
    () => {
      reload();
    },
    {immediate: true}
);
</script>

<style lang="scss">
</style>