template-10490/pages/m/detail/[id].vue

<!-- 文章详情 -->
<template>

  <Banner :layout="layout"/>

  <!-- 主体部分 -->
  <div class="p-5">

    <div class="m-page">
      <div class="sitemp h-[32px] flex justify-between">
        <h2>
          {{ form.categoryName }}
        </h2>
      </div>
      <div class="content">

        <!-- 新闻详细 -->
        <div class="news_detail">
          <h1 class="title">{{ form.title }}</h1>
          <div class="info_title clearfix">
            <h3 class="text-center text-gray-400">
              {{ $t('createTime') }}：<span>{{ dayjs(form.createTime).format('YYYY-MM-DD') }}</span>
              {{ $t('author') }}：<span>{{ form.nickname }}</span>
              {{ $t('click') }}：<span>{{ form.actualViews }}</span>
            </h3>
            <div class="share">
              <!-- Baidu Button BEGIN -->
              <div class="bdsharebuttonbox">
                <a href="#" class="bds_more" data-cmd="more"></a>
                <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                <a href="#" class="bds_renren" data-cmd="renren"></a>
                <a href="#" class="bds_weixin" data-cmd="weixin"></a>
              </div>
            </div>
          </div>
          <div class="content text-lg" v-html="form.content"></div>
          <h3 class="tag">{{ $t('articleUrl') }}：{{ locationUrl() }} </h3>
          <Tags :data="form.tags" />
          <NextArticle />
        </div>

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

// 引入状态管理
const route = useRoute();
const layout = ref<Layout>({});
const breadcrumb = ref<BreadcrumbItem>();
const showPassword = ref<boolean>();
const category = ref<CmsNavigation[]>([]);

// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
  // 文章id
  articleId: undefined,
  // 文章模型
  model: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 附件
  fileList: [],
  // 缩列图
  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,
  // 租户ID
  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.parentId) {
      listCmsNavigation({parentId: data.parentId}).then(list => {
        category.value = list;
      })
    }

    if(form.permission === 1){
      console.log('登录可见')
      return;
    }
    if(form.permission === 2){
      console.log('需要密码')
      showPassword.value = true;
      return;
    }
  })

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

  // 面包屑
  breadcrumb.value = form
}

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

<style lang="scss">
.content {
  padding-top: 15px;
  overflow: hidden;
}
.content p{
}
.content img{
  padding: 10px 0;
  max-width: 100%;
  height: auto;
}
.content video {
  width: 100%;
  height: auto;
}
</style>