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

<script setup lang="ts">
  // 引入状态管理
  import { getCmsArticle } from '~/api/cms/cmsArticle';

  const route = useRoute();
  const router = useRouter();
  import { getNavIdByParamsId } from '~/utils/common';
  import { listCmsNavigation } from '~/api/cms/cmsNavigation';
  import useFormData from '~/utils/use-form-data';
  import type { CmsArticle } from '~/api/cms/cmsArticle/model';
  import Content from '~/components/Content.vue';

  definePageMeta({
    layout: false
  });

  const articleId = ref();

  // 配置信息
  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,
    // 标签
    tags: undefined,
    // 文章内容
    content: undefined,
    // 文章编辑器
    editor: 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(articleId.value)
      .then(data => {
        assignFields(data);
      })
      .catch(() => {
        navigateTo('/404');
      });

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

  watch(
    () => route.params.id,
    id => {
      articleId.value = getNavIdByParamsId(id);
      reload();
    },
    { immediate: true }
  );
</script>

<template>
  <div class="page">
    <h1 class="title">{{ form?.title }}</h1>
    <div class="head"></div>
    <!-- 内容组件 -->
    <Content class="content text-lg py-5" :editor="form?.editor" :data="form.content" />
  </div>
</template>
<style>
  body {
    font-size: 16px;
    color: #000;
    background-color: #999;
    padding: 0;
    margin: 0;
  }
</style>
<style scoped lang="scss">
  * {
    box-sizing: border-box;
    font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    margin: 0;
    padding: 0;
  }

  a {
    color: #27ae60;
    text-decoration: none;
  }

  img {
    border: 0;
    max-width: 100%;
  }

  table {
    border: 1px solid #aaa;
    border-collapse: collapse;
    margin-top: 10px;
    width: 100%;
  }

  table th {
    background-color: #d5d5d5;
    border: 1px solid #aaa;
    padding: 5px 15px 5px 6px;
    text-align: left;
    vertical-align: baseline;
    font-size: 14px;
  }

  table td {
    background-color: #efefef;
    border: 1px solid #aaa;
    padding: 6px 15px 6px 6px;
    vertical-align: text-top;
    font-size: 12px;
  }

  .page {
    background-color: #fff;
    padding: 20px 40px;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
  }

  p {
    margin: 0 0 20px 0;
    line-height: 28px;
  }

  .title {
    line-height: 50px;
    font-size: 24px;
    font-weight: 100;
    font-family:
      PingFang SC,
      Verdana,
      Helvetica Neue,
      Microsoft Yahei,
      Hiragino Sans GB,
      Microsoft Sans Serif,
      WenQuanYi Micro Hei,
      sans-serif;
    text-align: center;
  }

  .head {
    line-height: 50px;
    margin: 0 0 40px 0;
    border-bottom: 1px dashed #ccc;
    font-size: 14px;
    text-align: center;
    color: #666;
  }

  .foot {
    padding: 20px 0;
    line-height: 24px;
    border-top: 1px dashed #ccc;
    font-size: 14px;
    color: #666;
  }
</style>