site-10584/pages/item/[id].vue

<template>
  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-20">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> 产品详情 </span>
      </template>
      <template #extra>
        <div class="h-[32px]"></div>
      </template>
      <PageBanner :form="page" @done="reload"/>
      <el-divider />
      <AppInfo :form="form" />

      <div class="screen-item my-6">
        <el-descriptions title="截屏" />
        <el-scrollbar>
          <div class="flex" v-if="form.files">
              <el-image
                  v-for="(item,index) in JSON.parse(form.files)"
                  :key="index"
                  class="scrollbar-item w-[240px] max-h-[625px] mr-4 mb-3"
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="srcList"
                  :initial-index="4"
                  fit="contain"
              />
          </div>
        </el-scrollbar>
        <p v-html="form?.content || '介绍'" class="content"></p>
      </div>

      <el-divider />
      <!-- 评分及评价 -->
      <Comments :productId="form.companyId" :comments="comments" :count="commentsTotal" @done="doComments" />
      <div class="h-[100px]"></div>
    </el-page-header>
  </div>


</template>
<script setup lang="ts">
import { ArrowLeft,View, Monitor, Search,Cpu, Platform, Avatar } from '@element-plus/icons-vue'
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {usePage} from "~/composables/configState";
import {getIdBySpm, getNavIdByParamsId, openUrl} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import PageBanner from './components/PageBanner.vue';
import AppInfo from './components/AppInfo.vue';
import Comments from './components/Comments.vue';
import type {CompanyComment} from "~/api/system/companyComment/model";
import {getCmsWebsiteAll} from "~/api/cms/cmsWebsite";
import type {CmsWebsite} from "~/api/cms/cmsWebsite/model";

// 引入状态管理
const route = useRoute();
const router = useRouter();
const page = usePage();
const comments = ref<CompanyComment[]>([]);
const commentsTotal = ref(0);
const commentsPage = ref(1);
const navId = ref();
const srcList = ref<any[]>([]);

// 配置信息
const {form, assignFields} = useFormData<CmsWebsite>({
  // 站点ID
  websiteId: undefined,
  // 网站名称
  websiteName: undefined,
  // 网站标识
  websiteCode: undefined,
  // 网站LOGO
  websiteIcon: undefined,
  // 网站LOGO
  websiteLogo: undefined,
  // 网站LOGO(深色模式)
  websiteDarkLogo: undefined,
  // 网站类型
  websiteType: undefined,
  // 评分
  rate: undefined,
  // 点赞数
  likes: undefined,
  // 访问量
  clicks: undefined,
  // 下载量
  downloads: undefined,
  // 网站截图
  files: undefined,
  // 网站关键词
  keywords: undefined,
  // 域名前缀
  prefix: undefined,
  // 绑定域名
  domain: undefined,
  // 全局样式
  style: undefined,
  // 后台管理地址
  adminUrl: undefined,
  // 应用版本 10免费版 20专业版 30永久授权
  version: undefined,
  // 服务到期时间
  expirationTime: undefined,
  // 模版ID
  templateId: undefined,
  // 行业类型(父级)
  industryParent: undefined,
  // 行业类型(子级)
  industryChild: undefined,
  // 企业ID
  companyId: undefined,
  // 所在国家
  country: undefined,
  // 所在省份
  province: undefined,
  // 所在城市
  city: undefined,
  // 所在辖区
  region: undefined,
  // 经度
  longitude: undefined,
  // 纬度
  latitude: undefined,
  // 街道地址
  address: undefined,
  // 联系电话
  phone: undefined,
  // 电子邮箱
  email: undefined,
  // ICP备案号
  icpNo: undefined,
  // 公安备案
  policeNo: undefined,
  // 备注
  comments: undefined,
  // 是否推荐
  recommend: undefined,
  // 运行状态
  running: undefined,
  // 状态 0未开通 1运行中 2维护中 3已关闭 4已欠费停机 5违规关停
  status: undefined,
  // 维护说明
  statusText: undefined,
  // 关闭说明
  statusClose: undefined,
  // 状态图标
  statusIcon: undefined,
  // 全局样式
  styles: undefined,
  content: undefined,
  // 排序号
  sortNumber: undefined,
  // 用户ID
  userId: undefined,
  // 是否删除, 0否, 1是
  deleted: undefined,
  // 租户id
  tenantId: undefined,
  // 创建时间
  createTime: undefined,
  // 修改时间
  updateTime: undefined,
  // 网站配置
  config: undefined,
  topNavs: undefined,
  bottomNavs: undefined,
  loginUser: undefined
});

const doComments = async (page: any) => {
  commentsPage.value = page;
  await reloadComments();
}


// 加载评论
const reloadComments = async () => {
  const {data: commentsResponse} = await useServerRequest<ApiResult<PageResult<CompanyComment>>>('/system/company-comment/page', {
    params: {
      companyId: getIdBySpm(5),
      page: commentsPage.value,
      // status: 1
    }
  })
  if(commentsResponse.value && commentsResponse.value?.data){
    comments.value = commentsResponse.value?.data?.list
    commentsTotal.value = commentsResponse.value?.data?.count;
  }
}

const goBack = () => {
  router.back();
}

// 读取导航详情
const reload = async () => {
  getCmsWebsiteAll(navId.value).then(data => {
    // 获取栏目信息
    assignFields(data)
    page.value = {
      image: data.websiteLogo,
      title: data.websiteName,
      categoryName: '插件市场',
      ...data,
    }

    // 应用截图
    if(data.files){
      const imgArr = JSON.parse(data.files);
      imgArr.map((item: any) => {
        srcList.value.push(item.url)
      })
    }

    // 设置页面标题
    useSeoMeta({
      description: data.comments || data.websiteName,
      keywords: data.websiteName,
      titleTemplate: `${data?.websiteName}` + ' - %s',
    })

  }).catch(err => {
    console.log(err,'加载失败...')
  })
}

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

<style lang="less">
.content {
  img {
    max-width: 100%;
    height: auto !important;
  }
}
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>