feat: title对应产品名，meta动态获取

boyang
1 parent 9b642ad1
Showing 5 changed files with 315 additions and 208 deletions
components/ProductDetail.vue
nuxt.config.ts
pages/products/detail/[id]/index.vue
pages/products/index.vue
stores/product_list.ts
@@ -2,9 +2,19 @@
   <v-container>
     <v-row class="mb-16 ma-0">
       <v-col cols="12" sm="5">
-        <v-carousel class="tw-float-left" height="450" v-model="slide" hide-delimiter-background>
-          <v-carousel-item cover v-for="(slide, i) in info.productimageliststore" :src="slide.url" :key="i"
-            :alt="info.name">
+        <v-carousel
+          class="tw-float-left"
+          height="450"
+          v-model="slide"
+          hide-delimiter-background
+        >
+          <v-carousel-item
+            cover
+            v-for="(slide, i) in info.productimageliststore"
+            :src="slide.url"
+            :key="i"
+            :alt="info.name"
+          >
           </v-carousel-item>
         </v-carousel>
       </v-col>
@@ -14,42 +24,90 @@
         </v-row>
         <div class="tw-flex tw-flex-wrap">
           <div class="tw-w-1/2">
-            <span class="tw-leading-[10px] tw-m-[16px]"> Brand：{{ info.brandName }} </span>
+            <span class="tw-leading-[10px] tw-m-[16px]">
+              Brand：{{ info.brandName }}
+            </span>
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]">
-            <span class="tw-leading-[10px] tw-m-[16px]">Product Model：{{ info.model }}</span>
+            <span class="tw-leading-[10px] tw-m-[16px]"
+              >Product Model：{{ info.model }}</span
+            >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename1">
-            <span class="tw-leading-[10px] tw-m-[16px]">{{ info.basename1 }}：{{ info.basecore1 }}</span>
+            <span class="tw-leading-[10px] tw-m-[16px]"
+              >{{ info.basename1 }}：{{ info.basecore1 }}</span
+            >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename2">
-            <span class="tw-leading-[10px] tw-m-[16px]">{{ info.basename2 }}：{{ info.basecore2 }}</span>
+            <span class="tw-leading-[10px] tw-m-[16px]"
+              >{{ info.basename2 }}：{{ info.basecore2 }}</span
+            >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename3">
-            <span class="tw-leading-[10px] tw-m-[16px]">{{ info.basename3 }}：{{ info.basecore3 }}</span>
+            <span class="tw-leading-[10px] tw-m-[16px]"
+              >{{ info.basename3 }}：{{ info.basecore3 }}</span
+            >
           </div>
         </div>
-        <div class="tw-flex tw-flex-wrap" v-if="info.productAttributeList && info.productAttributeList.length > 0">
-          <div v-for="(attribute, index) in info.productAttributeList" :key="index" class="tw-w-1/2 tw-mb-[12px]">
-            <span class="tw-leading-[10px] tw-m-[16px]">{{ attribute.name }}：{{ attribute.value }}</span>
+        <div
+          class="tw-flex tw-flex-wrap"
+          v-if="
+            info.productAttributeList && info.productAttributeList.length > 0
+          "
+        >
+          <div
+            v-for="(attribute, index) in info.productAttributeList"
+            :key="index"
+            class="tw-w-1/2 tw-mb-[12px]"
+          >
+            <span class="tw-leading-[10px] tw-m-[16px]"
+              >{{ attribute.name }}：{{ attribute.value }}</span
+            >
           </div>
         </div>
-        <v-table density="comfortable" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">
+        <v-table
+          density="comfortable"
+          class="table1 tw-mt-[32px]"
+          v-if="info.ticketTypes?.length"
+        >
           <thead>
             <tr class="bg-grey-lighten-3">
-              <th class="text-left headerBorder text-grey-darken-1">Product Name / Code</th>
-              <th class="text-left headerBorder text-grey-darken-1">Specification and model</th>
-              <th v-if="info.priceShow!==undefined && info.priceShow" class="text-left headerBorder text-grey-darken-1">Price</th>
+              <th class="text-left headerBorder text-grey-darken-1">
+                Product Name / Code
+              </th>
+              <th class="text-left headerBorder text-grey-darken-1">
+                Specification and model
+              </th>
+              <th
+                v-if="info.priceShow !== undefined && info.priceShow"
+                class="text-left headerBorder text-grey-darken-1"
+              >
+                Price
+              </th>
               <th class="text-left headerBorder text-grey-darken-1">Actions</th>
             </tr>
           </thead>
           <tbody>
-            <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
-              <td class="td text-grey-darken-4 font-weight-medium">{{ item.rank }}</td>
-              <td class="td text-grey-darken-4 font-weight-medium">{{ item.typeName }}</td>
-              <td v-if="item.priceShow" class="td">{{ item.price+" "+item.priceUnit }}</td>
+            <tr
+              class="tr"
+              v-for="item in info.ticketTypes || []"
+              :key="item.rank"
+            >
+              <td class="td text-grey-darken-4 font-weight-medium">
+                {{ item.rank }}
+              </td>
+              <td class="td text-grey-darken-4 font-weight-medium">
+                {{ item.typeName }}
+              </td>
+              <td v-if="item.priceShow" class="td">
+                {{ item.price + " " + item.priceUnit }}
+              </td>
               <td class="td">
-                <v-btn  size="small" color="blue-darken-1" @click="router.push('/contact')">
+                <v-btn
+                  size="small"
+                  color="blue-darken-1"
+                  @click="router.push('/contact')"
+                >
                   <!-- Quotation Inquiry -->
                   Quote
                 </v-btn>
@@ -63,8 +121,14 @@
       </v-col>
     </v-row>
     <div class="tw-pb-[64px]">
-      <v-tabs class="tabs" v-model="tab" color="white" bg-color="#eeeeee" slider-color="blue-lighten-1"
-        selected-class="active">
+      <v-tabs
+        class="tabs"
+        v-model="tab"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+      >
         <v-tab :value="1">Product Details</v-tab>
         <v-tab :value="2">Specification</v-tab>
         <!-- <v-tab :value="3">商品百科</v-tab> -->
@@ -100,7 +164,11 @@
         <v-window-item key="2" :value="2">
           <v-table density="compact" class="table2">
             <tbody>
-              <tr class="tr" v-for="item in info.productAttributeList || []" :key="item.name">
+              <tr
+                class="tr"
+                v-for="item in info.productAttributeList || []"
+                :key="item.name"
+              >
                 <td class="td tw-w-[400px]">{{ item.name }}</td>
                 <td class="td">{{ item.value }}</td>
               </tr>
@@ -114,23 +182,23 @@
 </template>
  
 <script setup lang="ts">
-import type { Product, ProductImage } from '~/type'
-import { onMounted, ref } from 'vue'
-import { useDialogStore } from '~/stores/dialog'
-const dialogStore = useDialogStore()
+import type { Product, ProductImage } from "~/type";
+import { onMounted, ref } from "vue";
+import { useDialogStore } from "~/stores/dialog";
+const dialogStore = useDialogStore();
  
 const props = defineProps<{
-  info: Product
-}>()
-const info = props.info
+  info: Product;
+}>();
+const info = props.info;
  
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
  
-const tab = ref(0)
-const slide = ref(0)
-const router = useRouter()
+const tab = ref(0);
+const slide = ref(0);
+const router = useRouter();
 </script>
  
 <style lang="scss" scoped>
 // https://nuxt.com/docs/api/configuration/nuxt-config
 // Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
+import { defineNuxtConfig } from "nuxt/config";
  
 export default defineNuxtConfig({
   app: {
     head: {
-      link: [
-        { rel: 'icon', type: 'image/x-icon', href: '/fav.ico' }
-      ]
-    }
+      link: [{ rel: "icon", type: "image/x-icon", href: "/fav.ico" }],
+    },
   },
-  css: ['~/assets/css/main.css'],
+  css: ["~/assets/css/main.css"],
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -22,45 +20,40 @@ export default defineNuxtConfig({
   //      baseURL:  'http://47.89.254.121:8002/shop' || 'http://39.108.227.113:8002' // Exposed to the frontend as well.
   //   }
   // },
-  modules: [
-    'vuetify-nuxt-module',
-    '@pinia/nuxt',
-    '@nuxtjs/i18n',
-  ],
+  modules: ["vuetify-nuxt-module", "@pinia/nuxt", "@nuxtjs/i18n"],
   vuetify: {
     moduleOptions: {
       /* module specific options */
     },
     vuetifyOptions: {
       /* vuetify options */
-    }
+    },
   },
-  nitro:{
+  nitro: {
     devProxy: {
-      '/shop': {
-        target: 'http://47.89.254.121:8002/shop', // 线上代理地址
-        // target: 'http://127.0.0.1:8002/shop/**',
+      "/shop": {
+        // target: "http://47.89.254.121:8002/shop", // 线上代理地址
+        target: "http://127.0.0.1:8002/shop/**",
         // target: process.env.BASE_URL || 'http://39.108.227.113:8002/shop', // 目标接口域名
         changeOrigin: true, // 表示是否跨域
-      }
+      },
     },
-     // 该配置用于服务端请求转发
-     routeRules: {
-      '/shop/**': {
-        proxy: 'http://47.89.254.121:8002/shop/**'
-        // proxy: 'http://127.0.0.1:8002/shop/**'
+    // 该配置用于服务端请求转发
+    routeRules: {
+      "/shop/**": {
+        // proxy: "http://47.89.254.121:8002/shop/**",
+        proxy: "http://127.0.0.1:8002/shop/**",
         // proxy: process.env.BASE_URL || 'http://39.108.227.113:8002/shop/**'
-      }
-    }
+      },
+    },
   },
   i18n: {
     locales: [
-      { code: 'en', iso: 'en-US', file: 'en.json' },
-      { code: 'zh', iso: 'zh-CN', file: 'zh.json' }
+      { code: "en", iso: "en-US", file: "en.json" },
+      { code: "zh", iso: "zh-CN", file: "zh.json" },
     ],
     lazy: true,
-    langDir: 'locales/',
-    defaultLocale: 'zh',
+    langDir: "locales/",
+    defaultLocale: "zh",
   },
-})
-
+});
@@ -4,59 +4,73 @@
 </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 } from 'vue-router'
+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 route = useRoute()
+const route = useRoute();
  
 const info = ref<Partial<Product>>({
   productimageliststore: [],
   productAttributeList: [],
-  name: '',
-  ticketTypes: []
-})
+  name: "",
+  ticketTypes: [],
+});
  
-let { data: resData } = await useAsyncData('detail', () => $fetch('/shop/product/detail', {
-  method: 'GET',
-  params: {
-    id: route.params.id
+let { data: resData } = await useAsyncData(
+  "detail",
+  () =>
+    $fetch("/shop/product/detail", {
+      method: "GET",
+      params: {
+        id: route.params.id,
+      },
+    }),
+  {
+    server: true, // 仅在服务器端获取数据
   }
-}), {
-  server: true  // 仅在服务器端获取数据
-})
+);
+watchEffect(() => {
+  console.log(info.value, "5656infovalue2/resData.value.", resData.value);
+  useHead({
+    title: info.value.name || "canrud",
+    meta: [
+      {
+        name: "title",
+        content:
+          info.value.name ||
+          "科路得,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 ||
+          "科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines",
+      },
+      {
+        name: "description",
+        content:
+          info.value.metadescription ||
+          "科路得,助您科研之路势在必得。Equipment Business: With our self-built high-precision machining center, we possess robust design and manufacturing capabilities. We offer comprehensive equipment supply, production line planning, and construction services, including battery assembly lines, pouch cell testing lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of our clients. Expect top-quality equipment and professional services that will help you stand out in a fiercely competitive market!",
+      },
+    ],
+  });
+});
  
-useHead({
-  title: info.name || 'canrud',
-  meta: [
-    {
-      name: 'title',
-      content:
-        '科路得,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:
-        '科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines',
-    }, {
-      name: 'description',
-      content:
-        '科路得,助您科研之路势在必得。Equipment Business: With our self-built high-precision machining center, we possess robust design and manufacturing capabilities. We offer comprehensive equipment supply, production line planning, and construction services, including battery assembly lines, pouch cell testing lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of our clients. Expect top-quality equipment and professional services that will help you stand out in a fiercely competitive market!'
-    },
-  ],
-})
-
-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}`
-}))
-info.value = { ...newData }
+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=p256`,
+  })
+);
+info.value = { ...newData };
 </script>
@@ -4,14 +4,31 @@
     <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
     <v-container class="">
       <div class="tw-text-center" v-if="loading">
-        <v-progress-circular color="blue-lighten-2" indeterminate size="64" class="tw-m-auto"></v-progress-circular>
+        <v-progress-circular
+          color="blue-lighten-2"
+          indeterminate
+          size="64"
+          class="tw-m-auto"
+        ></v-progress-circular>
       </div>
       <v-item-group multiple>
         <v-row v-if="!loading">
-          <v-col v-for="(item, i) in productStore.list" :key="i" cols="6" lg="3" md="4" sm="6">
+          <v-col
+            v-for="(item, i) in productStore.list"
+            :key="i"
+            cols="6"
+            lg="3"
+            md="4"
+            sm="6"
+          >
             <v-hover v-slot="{ isHovering, props }" open-delay="200">
-              <v-card :elevation="isHovering ? 16 : 2" :class="{ 'on-hover': isHovering }" class="mx-auto"
-                v-bind="props" :to="`/products/detail/${item.id}`">
+              <v-card
+                :elevation="isHovering ? 16 : 2"
+                :class="{ 'on-hover': isHovering }"
+                class="mx-auto"
+                v-bind="props"
+                :to="`/products/detail/${item.id}`"
+              >
                 <v-img :src="item.imgList[0].url" :alt="item.name">
                   <!-- <v-expand-transition>
                     <div
@@ -24,100 +41,113 @@
                   </v-expand-transition> -->
                 </v-img>
                 <v-card-text class="tw-text-left font-weight-medium title">
-                  <h4>{{
-                    item.name
-                    }}</h4>
+                  <h4>{{ item.name }}</h4>
                 </v-card-text>
               </v-card>
             </v-hover>
           </v-col>
         </v-row>
-        <div v-if="!productStore.total && !loading" class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]">
+        <div
+          v-if="!productStore.total && !loading"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
           no data
         </div>
       </v-item-group>
       <v-row>
         <v-col>
-          <v-pagination :size="isMobile() ? 'small' : 'default'" v-if="productStore.total" v-model="productStore.pageNo"
-            @update:modelValue="productStore.updatePageNo" :length="length" rounded="0"
-            class="tw-float-right tw-mt-[32px]" total-visible="5"></v-pagination></v-col></v-row>
+          <v-pagination
+            :size="isMobile() ? 'small' : 'default'"
+            v-if="productStore.total"
+            v-model="productStore.pageNo"
+            @update:modelValue="productStore.updatePageNo"
+            :length="length"
+            rounded="0"
+            class="tw-float-right tw-mt-[32px]"
+            total-visible="5"
+          ></v-pagination></v-col
+      ></v-row>
     </v-container>
   </div>
 </template>
  
 <script setup lang="ts">
-import { isMobile, isEqual } from '~/utils'
-import { useProductListStore } from '~/stores/product_list'
-import { useCategoryStore } from '~/stores/category'
-import CategoryList from '~/components/CategoryList.vue'
-import MobileCategoryList from '~/components/MobileCategoryList.vue'
-import { watchEffect, computed, ref } from 'vue'
+import { isMobile, isEqual } from "~/utils";
+import { useProductListStore } from "~/stores/product_list";
+import { useCategoryStore } from "~/stores/category";
+import CategoryList from "~/components/CategoryList.vue";
+import MobileCategoryList from "~/components/MobileCategoryList.vue";
+import { watchEffect, computed, ref } from "vue";
  
-const productStore = useProductListStore()
-const categoryStore = useCategoryStore()
-const loading = ref(false)
-const route = useRoute()  // 获取路由信息
-useHead({
-  title: 'canrud',
-  meta: [{
-    name: 'title',
-    content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
-  }, {
-    name: 'keywords',
-    content:
-      '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
-  },
-  {
-    name: 'description',
-    content:
-      '科路得,助您科研之路势在必得。We offer a wide range of research materials and related equipment, technical services, and battery material performance evaluation in areas such as pouch cells, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries, and sodium-ion batteries.'
-  }
-  ]
-})
+const productStore = useProductListStore();
+const categoryStore = useCategoryStore();
+const loading = ref(false);
+const route = useRoute(); // 获取路由信息
  
+useHead({
+  title: "canrud",
+  meta: [
+    {
+      name: "title",
+      content:
+        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
+    },
+    {
+      name: "keywords",
+      content:
+        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
+    },
+    {
+      name: "description",
+      content:
+        "科路得,助您科研之路势在必得。We offer a wide range of research materials and related equipment, technical services, and battery material performance evaluation in areas such as pouch cells, lithium-ion batteries, supercapacitors, lithium-sulfur batteries, fuel cells, lithium-air batteries, and sodium-ion batteries.",
+    },
+  ],
+});
  
 const loadProducts = async () => {
   let params: any = {
     pageNo: productStore.pageNo,
-    pageSize: 20
-  }
+    pageSize: 20,
+  };
  
-  loading.value = true
+  loading.value = true;
   if (productStore.keyword && !isEqual(productStore.params, params)) {
-    params.keyword = productStore.keyword
-    productStore.updateParams(params)
-    await productStore.getList(params)
-    loading.value = false
-    return
+    params.keyword = productStore.keyword;
+    productStore.updateParams(params);
+    await productStore.getList(params);
+    loading.value = false;
+    return;
   }
  
-  params.productCategoryId = categoryStore.selectedSubCategory
+  params.productCategoryId = categoryStore.selectedSubCategory;
   // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
  
   if (categoryStore.selectedFuncCategory) {
-    params.productFunctionId = categoryStore.selectedFuncCategory
+    params.productFunctionId = categoryStore.selectedFuncCategory;
   }
  
-  if (categoryStore.selectedSubCategory && !isEqual(productStore.params, params)) {
-    productStore.updateParams(params)
+  if (
+    categoryStore.selectedSubCategory &&
+    !isEqual(productStore.params, params)
+  ) {
+    productStore.updateParams(params);
  
-    await productStore.getList(params)
+    await productStore.getList(params);
   }
-  loading.value = false
-}
-
-
+  loading.value = false;
+};
  
 watchEffect(async () => {
-  if(route.query.keyword !== undefined){
-    productStore.keyword = route.query.keyword
+  if (route.query.keyword !== undefined) {
+    productStore.keyword = route.query.keyword;
   }
   loadProducts();
-})
+});
  
 const length = computed(() =>
   productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
-)
+);
 </script>
  
 <style scoped>
-import { getProductList } from './../service'
-import { ref, watchEffect } from 'vue'
-import { defineStore } from 'pinia'
-import type { Product, ProductImage, ProductListQuery } from '@/type'
+import { getProductList } from "./../service";
+import { ref, watchEffect } from "vue";
+import { defineStore } from "pinia";
+import type { Product, ProductImage, ProductListQuery } from "@/type";
  
-export const useProductListStore = defineStore('productList', () => {
-  const list = ref<Product[]>([])
-  const productCategoryId = ref('') // 选中的类别
-  const keyword = ref()
-  const pageNo = ref(1)
-  const pageSize = ref(20)
-  const total = ref(0)
-  const params = ref()
+export const useProductListStore = defineStore("productList", () => {
+  const list = ref<Product[]>([]);
+  const productCategoryId = ref(""); // 选中的类别
+  const keyword = ref();
+  const pageNo = ref(1);
+  const pageSize = ref(20);
+  const total = ref(0);
+  const params = ref();
  
   const getList = async (params: ProductListQuery) => {
     if (params.productCategoryId || params.keyword) {
-      const { data } = await useAsyncData('product', () => $fetch('/shop/product/list', {
-        method: 'GET',
-        params: {
-          ...params,
-          pageNo: pageNo.value,
-          pageSize: pageSize.value
-        }
-      }));
-      
+      const { data } = await useAsyncData("product", () =>
+        $fetch("/shop/product/list", {
+          method: "GET",
+          params: {
+            ...params,
+            pageNo: pageNo.value,
+            pageSize: pageSize.value,
+          },
+        })
+      );
+
       list.value =
         (data.value?.data?.records || []).map((record: Product) => ({
           ...record,
           // http://112.74.45.244:8100/api/show/image?fileKey=ac82abea34243b7f7a56e5c3ca03f3a9
-          imgList: JSON.parse(record.productimageliststore as unknown as string).map(
-            (item: ProductImage) => ({
-              url: `/api/show/image?fileKey=${item.fileKey}&psize=p256`
-            })
-          )
-        })) || []
-      total.value = data.value?.data?.total || 0
+          imgList: JSON.parse(
+            record.productimageliststore as unknown as string
+          ).map((item: ProductImage) => ({
+            url: `/api/show/image?fileKey=${item.fileKey}&psize=p256`,
+          })),
+        })) || [];
+      total.value = data.value?.data?.total || 0;
     }
-  }
+  };
  
   const updatePageNo = (value: number) => {
-    pageNo.value = value
-  }
+    pageNo.value = value;
+  };
  
   const updateCategory = (value: string) => {
-    productCategoryId.value = value
-  }
+    productCategoryId.value = value;
+  };
  
   const updateParams = (value: any) => {
-    params.value = value
-  }
+    params.value = value;
+  };
  
   const updateKeyword = (value: string) => {
-    keyword.value = value
-  }
+    keyword.value = value;
+  };
  
   return {
     pageNo,
@@ -64,6 +66,6 @@ export const useProductListStore = defineStore(&#39;productList&#39;, () =&gt; {
     updateCategory,
     updatePageNo,
     updateParams,
-    updateKeyword
-  }
-})
+    updateKeyword,
+  };
+});