gjjd-pc/pages/detail/index.vue

<!-- 文章详情 -->
<template>
  <PageBanner :form="form"/>
  <div class="page-main md:w-screen-xl m-auto md:px-3" ref="container">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="12" :md="12" :lg="18" class="min-w-xs">
        <template v-if="form.permission === 0 || showContent">
          <div class="p-6 leading-7 bg-white md:rounded-lg text-lg line-height-loose text-gray-600 content">
            <p v-html="form?.content"></p>
            <div class="files mt-5">
              <template v-if="form.files" v-for="(item,index) in JSON.parse(form.files)" :key="index" class="text item">
                <el-image
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="JSON.parse(form.files)"
                    :initial-index="4"
                    fit="contain"
                />
              </template>
            </div>
          </div>
        </template>
        <template v-if="form.permission === 1">
          <el-result
              v-if="!showContent && form.permission === 1"
              icon="warning"
              title="无访问权限"
          >
          </el-result>
        </template>
        <template v-if="form.permission === 2">
          <el-result
              v-if="!showContent && form.permission === 2"
              icon="warning"
              title="请输入访问密码"
          >
            <template #extra>
              <el-space>
                <el-input type="password" v-model="form.password2" show-password placeholder="请输入查看密码">请输入查看密码</el-input>
                <el-button type="primary" @click="checkPassword">确定</el-button>
              </el-space>
            </template>
          </el-result>
        </template>
        <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 :xs="24" :sm="6" :md="4" :lg="3" :xl="6">-->
      <el-col :xs="24" :sm="6" :md="6" :lg="6">
        <!-- 你可能感兴趣 -->
        <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 {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import {getIdBySpm, openSpmUrl} from "~/utils/common";
import type {CmsArticle} from "~/api/cms/cmsArticle/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<CmsArticle>();
const nextArticle = ref<CmsArticle>();
const showContent = ref<boolean>();
const showPassword = ref<boolean>();

// 配置信息
const {form, assignFields} = useFormData<CmsArticle>({
  // 文章id
  articleId: undefined,
  // 文章标题
  title: undefined,
  // 分类类型
  type: undefined,
  // 展现方式
  showType: undefined,
  // 文章类型
  categoryId: undefined,
  // 文章分类
  categoryName: undefined,
  parentId: undefined,
  parentName: undefined,
  parentPath: 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,
  // 租户名称
  tenantName: undefined,
  // 租户logo
  logo: undefined
});

// 验证密码
const checkPassword = async () => {
  const {data: response} = await useServerRequest<ApiResult<unknown>>('/cms/cms-article/checkArticlePassword', {
    query: {
      password: form?.password,
      password2: form.password2
    }
  })
  if(response.value?.code === 0){
    showPassword.value = false;
    showContent.value = true;
  }else {
    ElMessage.error(response.value?.message);
  }
}

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

  // 存在spm(优先级高)
  const {data: nav} = await useServerRequest<ApiResult<CmsNavigation>>('/cms/cms-article/' + getIdBySpm(5))
  if (nav.value?.data) {
    assignFields(nav.value.data)
    if(form.permission === 1){
      console.log('登录可见')
      return;
    }
    if(form.permission === 2){
      console.log('需要密码')
      showPassword.value = true;
      return;
    }
    // form.parentPath = getSpmUrl(`/category`,form,form.articleId);
  }

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

  // 下一篇
  const {data: next} = await useServerRequest<ApiResult<CmsNavigation>>('/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>