websoft-cms/pages/item/index.vue

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

  <div class="page-main md:w-screen-xl m-auto p-3">
    <el-row :gutter="24">
      <el-col :span="18" :xs="24">
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>应用截图</span>
            </div>
          </template>
          <div class="flex gap-xl">
            <template v-for="(item,index) in form.files" :key="index" class="text item">
              <el-image
                  :src="item.url"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="srcList"
                  :initial-index="4"
                  fit="contain"
              />
            </template>
          </div>

        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>说明</span>
            </div>
          </template>
          <p v-html="form.content"></p>
        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>评分和评价</span>
            </div>
          </template>
        </el-card>
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>其他信息</span>
            </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="6" :xs="24">
        <el-card shadow="hover" class="hover:border-green-50 hover:border-2 mb-5">
          <template #header>
            <div class="card-header font-bold text-xl">
              <span>其他信息</span>
            </div>
          </template>
        </el-card>
      </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 {getIdBySpm} from "~/utils/common";
import useFormData from "~/utils/use-form-data";
import type {CmsProduct} from "~/api/cms/cmsProduct/model";
import PageBanner from './components/PageBanner.vue';

// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
const activeName = ref();
const url =
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = ref<any[]>([]);

// 配置信息
const { form, assignFields } = useFormData<CmsProduct>({
  productId: undefined,
  type: undefined,
  code: undefined,
  title: undefined,
  image: undefined,
  content: undefined,
  parentId: undefined,
  categoryId: undefined,
  specs: undefined,
  position: undefined,
  unitName: undefined,
  price: undefined,
  salePrice: undefined,
  deductStockType: undefined,
  files: undefined,
  sales: undefined,
  stock: undefined,
  gainIntegral: undefined,
  recommend: undefined,
  merchantId: undefined,
  isShow: undefined,
  status: undefined,
  userId: undefined,
  deleted: undefined,
  tenantId: undefined,
  createTime: undefined,
  updateTime: undefined,
  comments: '',
  sortNumber: 100,
  parentName: undefined,
  parentPath: undefined,
  categoryName: undefined,
  rate: 0,
});

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

  // 存在spm(优先级高)
  const { data: item } = await useServerRequest<ApiResult<CmsProduct>>('/cms/cms-product/' + getIdBySpm(5))
  if (item.value?.data) {
    assignFields(item.value.data)
    form.title = item.value?.data?.title;
    form.parentName = '产品';
    form.parentPath = '/product';
    form.categoryName = '产品详情';
    form.rate = item.value.data.tenantId;
    if(item.value.data.files){
      form.files = JSON.parse(item.value?.data?.files)
      srcList.value = form.files?.map(d => d.url)
    }

    form.comments = item.value?.data?.comments;
  }

  // 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>