websoft-cms/pages/detail/index.vue

<!-- 文章详情 -->
<template>
  <PageBanner :form="form"/>

  <div class="page-main md:w-screen-xl m-auto" ref="container">
    <el-row :gutter="24">
      <el-col :span="18" :xs="24" class="min-w-xs">
        <div class="p-6 leading-7 bg-white md:rounded-lg text-lg line-height-loose text-gray-600 content"
             v-html="form?.content">
        </div>
        <div class="page md:gap-xl gap-xs md:mt-4 m-auto md:p-0 p-4 flex justify-between">
          <div v-if="previousArticle" class="bg-white text-gray-600 hover:shadow hover:text-gray-800 hover:font-bold rounded-lg p-4 cursor-pointer w-[50%]"
               @click="openSpmUrl(`/detail`,previousArticle,previousArticle?.articleId)">
            <span>上一篇：{{ previousArticle?.title }}</span>
          </div>
          <div v-if="nextArticle" class="bg-white text-gray-600 hover:shadow hover:text-gray-800 hover:font-bold rounded-lg p-4 cursor-pointer w-[50%]"
               @click="openSpmUrl(`/detail`,nextArticle,nextArticle?.articleId)">
            <span>下一篇：{{ nextArticle?.title }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :xs="24">
        <!-- 你可能感兴趣 -->
        <LikeArticle v-if="form" :form="form" />
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm, openSpmUrl} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import LikeArticle from "./components/LikeArticle.vue";

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const previousArticle = ref<Article>();
const nextArticle = ref<Article>();


// 配置信息
const {form, assignFields} = useFormData<Article>({
  // 文章id
  articleId: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  parentName: undefined,
  parentPath: undefined,
  // 封面图
  image: undefined,
  // 附件
  files: undefined,
  // 缩列图
  thumbnail: undefined,
  // 视频地址
  video: undefined,
  // 上传的文件类型
  accept: undefined,
  // 来源
  source: undefined,
  // 文章内容
  content: undefined,
  // 虚拟阅读量
  virtualViews: undefined,
  // 实际阅读量
  actualViews: undefined,
  // 用户ID
  userId: undefined,
  // 用户昵称
  nickname: undefined,
  // 账号
  username: undefined,
  // 用户头像
  userAvatar: undefined,
  // 所属门店ID
  shopId: undefined,
  //
  likes: undefined,
  // 排序
  sortNumber: undefined,
  // 备注
  comments: undefined,
  // 状态
  status: undefined,
  // 创建时间
  createTime: undefined,
  // 更新时间
  updateTime: undefined
});

// 请求数据
const reload = async () => {

  // 存在spm(优先级高)
  const {data: nav} = await useServerRequest<ApiResult<Navigation>>('/cms/cms-article/' + getIdBySpm(5))
  if (nav.value?.data) {
    assignFields(nav.value.data)
    form.parentPath = getSpmUrl(`/category`,form,form.articleId);
    console.log(form.parentPath)
  }

  // 上一篇
  const {data: previous} = await useServerRequest<ApiResult<Navigation>>('/cms/cms-article/getPrevious/' + getIdBySpm(5))
  if (previous.value?.data) {
    previousArticle.value = previous.value.data
  }

  // 下一篇
  const {data: next} = await useServerRequest<ApiResult<Navigation>>('/cms/cms-article/getNext/' + getIdBySpm(5))
  if (next.value?.data) {
    nextArticle.value = next.value.data
  }

  // seo
  useHead({
    title: `${form.title} - ${website.value.websiteName}`,
    bodyAttrs: {
      class: "page-container",
    }
  });
  // 面包屑
  breadcrumb.value = form
}

watch(
    () => route.path,
    (path) => {
      console.log(path, '=>Path')

      reload();
    },
    {immediate: true}
);
</script>

<style lang="less">
.content {
  img {
    max-width: 100%;
  }
}
</style>