canrd-main / canrud-nuxt-front · Files

<template>

  <MobileProductDetail v-if="isMobile()" :info="info" :res="resData" />

  <ProductDetail v-else :info="info" />
</template>

<script setup lang="ts">

import { onMounted } from "vue";
import ProductDetail from "~/components/ProductDetail.vue";
import MobileProductDetail from "~/components/MobileProductDetail.vue";
import type { Product, ProductImage } from "~/type";
import { useRoute, useRouter } from "vue-router";

const productStore = useProductListStore();

const route = useRoute();

const router = useRouter();

const info = ref<Partial<Product>>({
  productimageliststore: [],
  productAttributeList: [],

  name: "",
  ticketTypes: [],
});

let { data: resData } = await useAsyncData(
  "detail",
  () =>
    $fetch("/shop/product/detail", {
      method: "GET",
      params: {
        id: route.params.id,
      },
    }),
  {
    server: true, // 仅在服务器端获取数据

  }

);
watchEffect(() => {
  useHead({
    title: info.value.name || "canrud",
    meta: [
      {
        name: "title",
        content:
          info.value.name ||

          "Canrd,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines",

      },
      {
        name: "keywords",

        content: info.value.metakeywords || info.value.name,

      },
      {
        name: "description",

        content: info.value.metadescription || info.value.name,

      },
    ],
  });
});

const newData: Product = resData.value.data;
newData.productimageliststore =
  typeof newData.productimageliststore === "string"
    ? JSON.parse(newData.productimageliststore) || []
    : (newData.productimageliststore as ProductImage[]);

newData.productimageliststore = newData?.productimageliststore?.map(

  (item: ProductImage) => ({
    ...item,
    // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`

    url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,

  })
);

function removeTags(input: string): string {
  // 使用正则表达式去除 <div>, <span>, <p> 标签
  // 这个正则表达式会匹配这些标签并移除它们，但保留标签内部的文本
  return input.replace(/<\/?(div|span|p|br)[^>]*>/g, "");
}

info.value = { ...newData };

const introduction = removeTags(info.value.introduction);
info.value.introduction = introduction;

</script>