feat: 开发手机端热销,prod2-35/36

boyang
1 parent 0b26f917
Showing 6 changed files with 564 additions and 100 deletions
components/MobileProductDetail.vue
components/ProductDetail.vue
deploy/prod2.sh
pages/index.vue
pages/products/detail/[id]/index.vue
pages/products/index.vue
@@ -259,6 +259,158 @@
         <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
     </div>
+    <div class="tw-pb-[64px] ma-4 rounded-lg" style="padding-bottom: 30px">
+      <v-tabs
+        class="tabs"
+        v-model="tabProduct"
+        bg-color="#fff"
+        slider-color="#1d89e4"
+        selected-class="active"
+        style="margin-bottom: 20px"
+      >
+        <v-tab :value="1">Related Products</v-tab>
+        <v-tab :value="2">Best Sellers</v-tab>
+        <!-- <v-tab :value="3">商品百科</v-tab> -->
+      </v-tabs>
+      <v-window v-model="tabProduct">
+        <v-window-item key="1" :value="1">
+          <div class="tw-text-center" v-if="loading && isMobile()">
+            <v-progress-circular
+              color="blue-lighten-2"
+              indeterminate
+              size="64"
+              class="tw-m-auto"
+            ></v-progress-circular>
+          </div>
+          <v-item-group multiple v-if="isMobile()">
+            <v-row v-if="!loading">
+              <v-col
+                v-for="(item, i) in recommendImages"
+                :key="i"
+                cols="6"
+                lg="3"
+                md="4"
+                sm="6"
+              >
+                <div v-if="item !== null">
+                  <v-card
+                    :elevation="4"
+                    class="mx-auto"
+                    :href="item[0].productUrl"
+                  >
+                    <!-- 设置 eager 属性，确保图片直接加载 -->
+                    <v-img
+                      :src="item[0].url"
+                      :alt="item[0].name"
+                      eager
+                      class="d-block"
+                    />
+                    <v-card-text class="tw-text-left font-weight-medium title">
+                      <h4>{{ item[0].name }}</h4>
+                    </v-card-text>
+                  </v-card>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+          </v-item-group>
+          <v-row v-if="isMobile()">
+            <v-col>
+              <v-pagination
+                :size="isMobile() ? 'small' : 'default'"
+                v-if="total"
+                v-model="currentIndex"
+                @update:modelValue="toggleRowMobile"
+                :length="length"
+                rounded="0"
+                class="tw-float-right tw-mt-[32px]"
+                total-visible="5"
+              ></v-pagination></v-col
+          ></v-row>
+        </v-window-item>
+        <!-- best sellers -->
+        <v-window-item key="2" :value="2">
+          <div class="tw-text-center" v-if="hotLoading && isMobile()">
+            <v-progress-circular
+              color="blue-lighten-2"
+              indeterminate
+              size="64"
+              class="tw-m-auto"
+            ></v-progress-circular>
+          </div>
+          <v-item-group multiple v-if="isMobile()">
+            <v-row v-if="!hotLoading">
+              <v-col
+                v-for="(item, i) in recommendImagesHot"
+                :key="i"
+                cols="6"
+                lg="3"
+                md="4"
+                sm="6"
+              >
+                <div v-if="item !== null">
+                  <v-card
+                    :elevation="4"
+                    class="mx-auto"
+                    :href="item[0].productUrl"
+                  >
+                    <!-- 设置 eager 属性，确保图片直接加载 -->
+                    <v-img
+                      :src="item[0].url"
+                      :alt="item[0].name"
+                      eager
+                      class="d-block"
+                    />
+                    <v-card-text class="tw-text-left font-weight-medium title">
+                      <h4>{{ item[0].name }}</h4>
+                    </v-card-text>
+                  </v-card>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+          </v-item-group>
+          <v-row v-if="isMobile()">
+            <v-col>
+              <v-pagination
+                :size="isMobile() ? 'small' : 'default'"
+                v-if="hotTotal"
+                v-model="currentIndexHot"
+                @update:modelValue="toggleRowMobileHot"
+                :length="hotLength"
+                rounded="0"
+                class="tw-float-right tw-mt-[32px]"
+                total-visible="5"
+              ></v-pagination></v-col
+          ></v-row>
+        </v-window-item>
+        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
+      </v-window>
+    </div>
+    <!-- <div class="tw-pb-[64px] ma-4 rounded-lg">
+      <v-tabs
+        class="tabs"
+        v-model="tabJournal"
+        bg-color="#fff"
+        slider-color="#1d89e4"
+        selected-class="active"
+      >
+        <v-tab :value="1">JOURNAL RECOMMENDATION</v-tab>
+      </v-tabs>
+      <v-window v-model="tab">
+        <v-window-item key="1" :value="1"> </v-window-item>
+      </v-window>
+    </div> -->
     <!-- Basic use -->
     <div class="social-share-container">
       <SocialShare
@@ -293,7 +445,8 @@
 <script setup lang="ts">
 import type { Product } from "~/type";
-import { ref } from "vue";
+import { isMobile } from "~/utils";
+import { defineProps, ref } from "vue";
 import { useDialogStore } from "~/stores/dialog";
 const dialogStore = useDialogStore();
@@ -305,6 +458,8 @@ const info = props.info;
 //   dialogStore.updateDialog(true)
 // })
 const tab = ref(0);
+const tabProduct = ref(0);
+const tabJournal = ref(0);
 const slide = ref(0);
 const router = useRouter();
 const href1 = ref("/products");
@@ -312,6 +467,143 @@ const href2 = ref(&quot;/products&quot;);
 const routeQuery = useRouteQuery();
 const productStore = useProductListStore();
 const currentUrl = ref("https://www.canrud.com/products");
+const hotLoading = ref(false);
+const loading = ref(false);
+const maxPage = ref(1);
+const maxPageRe = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendListHot = ref();
+const recommendImages = ref();
+const recommendImagesHot = ref();
+const currentIndex = ref(1);
+const currentIndexHot = ref(1);
+const total = ref(3);
+const hotTotal = ref(10);
+const isOrNotMobile = isMobile();
+
+const loadProducts = async () => {
+  const pageSize = 4;
+  loading.value = true;
+
+  let { data: resData } = await useAsyncData(
+    "list",
+    () =>
+      $fetch("/shop/product/list", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: pageSize,
+          ids: info.relatedProductIds,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  total.value = resData.value.data.total;
+  if (total.value > 30) {
+    total.value = 30;
+  }
+  recommendList.value = resData.value.data.records;
+  maxPageRe.value = resData.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImages.value = Array.from({ length: 4 }).map((_, index) => {
+    const item = recommendList.value[index];
+    if (!item) {
+      return null;
+    }
+    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+    if (typeof item.productimageliststore === "string") {
+      try {
+        item.productimageliststore = JSON.parse(item.productimageliststore);
+      } catch (error) {
+        item.productimageliststore = []; // 解析失败时，设置为空数组
+      }
+    }
+    const ree = (item.productimageliststore = item?.productimageliststore.map(
+      (productItem: ProductImage) => ({
+        ...productItem,
+        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+        name: item.name,
+        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+      })
+    ));
+    return ree;
+  });
+  loading.value = false;
+};
+const loadHotProducts = async () => {
+  const pageSizeHot = ref(5);
+  if (isOrNotMobile) {
+    pageSizeHot.value = 4;
+  }
+  hotLoading.value = true;
+
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndexHot.value,
+          pageSize: pageSizeHot.value,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  hotTotal.value = hotProducts.value.data.total;
+  recommendListHot.value = hotProducts.value.data.records;
+  maxPage.value = hotProducts.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImagesHot.value = Array.from({ length: pageSizeHot.value }).map(
+    (_, index) => {
+      const item = recommendListHot.value[index];
+      if (!item) {
+        return null;
+      }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
+    }
+  );
+  hotLoading.value = false;
+};
+
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+const toggleRowMobileHot = (value: number) => {
+  currentIndexHot.value = value;
+};
+
+watch(currentIndexHot, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+watch(currentIndex, (newIndex) => {
+  loadProducts(); // Call loadHotProducts when currentIndex changes
+});
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+await loadProducts(); // Load hot products the first time
 interface BreadcrumbItem {
   title: string; // 标题
@@ -332,12 +624,12 @@ const items = ref&lt;BreadcrumbItem[]&gt;([
     href: href1.value,
   },
   {
-    title: "DEVICE TYPE",
+    title: "Not specified",
     disabled: false,
     href: href2.value,
   },
   {
-    title: "FUNCTION",
+    title: "Not specified",
     disabled: false,
     href: "/products",
   },
@@ -424,42 +716,11 @@ watchEffect(() =&gt; {
         href2.value + "&function=" + info.productCrumbsVO.function;
     }
   }
-  // recommendList.value = resData.value.data.records;
-
-  // // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
-  // recommendImages.value = Array.from({ length: 10 }).map((_, index) => {
-  //   const item = recommendList.value[index];
-  //   if (!item) {
-  //     return null;
-  //   }
-  //   // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
-  //   if (typeof item.productimageliststore === "string") {
-  //     try {
-  //       item.productimageliststore = JSON.parse(item.productimageliststore);
-  //     } catch (error) {
-  //       item.productimageliststore = []; // 解析失败时，设置为空数组
-  //     }
-  //   }
-  //   const ree = (item.productimageliststore = item?.productimageliststore.map(
-  //     (productItem: ProductImage) => ({
-  //       ...productItem,
-  //       // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
-  //       url: `/api/show/image?fileKey=${productItem.fileKey}&psize=p512`,
-  //       name: item.name,
-  //       productUrl: `http://www.canrud.com/products/detail/${item.id}`,
-  //     })
-  //   ));
-  //   return ree;
-  // });
 });
-function getTitle(network) {
-  const titles = {
-    facebook: "Facebook",
-    twitter: "Twitter",
-    linkedin: "LinkedIn",
-  };
-  return titles[network] || "Share";
-}
+const length = computed(() => (total.value ? Math.ceil(total.value / 4) : 0));
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
 <style lang="scss" scoped>
@@ -470,6 +731,13 @@ function getTitle(network) {
 .active {
   background-color: #fff;
 }
+// .tabs {
+//   border-bottom: 2px solid #1f88e5;
+// }
+
+// .active {
+//   background-color: #1086e8;
+// }
 .tw-sticky {
   position: sticky;
@@ -512,4 +780,7 @@ function getTitle(network) {
   font-size: 1rem;
   font-weight: bold;
 }
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
 </style>
@@ -262,7 +262,7 @@
       </div>
     </div>
     <div style="display: flex">
-      <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px;">
+      <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px">
         <v-tabs
           class="tabs"
           v-model="tab"
@@ -275,7 +275,11 @@
           <v-tab :value="2">Specification</v-tab>
           <!-- <v-tab :value="3">商品百科</v-tab> -->
         </v-tabs>
-        <v-window v-model="tab" class="tw-p-[24px]" style="min-height: 500px; height: auto;" >
+        <v-window
+          v-model="tab"
+          class="tw-p-[24px]"
+          style="min-height: 500px; height: auto"
+        >
           <v-window-item key="1" :value="1">
             <div v-if="info.advantage" class="tw-mb-[24px]">
               <div class="text-h6">Advantage</div>
@@ -559,17 +563,17 @@ const loadHotProducts = async () =&gt; {
   });
 };
 const toggleRowLeft = () => {
-  if (currentIndex.value !== 1) {
-    currentIndex.value--;
-  } else if (currentIndex.value == 1) {
-    currentIndex.value = maxPage.value;
+  if (currentIndexHot.value !== 1) {
+    currentIndexHot.value--;
+  } else if (currentIndexHot.value == 1) {
+    currentIndexHot.value = maxPage.value;
   }
 };
 const toggleRowRight = () => {
-  if (currentIndex.value < maxPage.value) {
-    currentIndex.value++;
-  } else if (currentIndex.value == maxPage.value) {
-    currentIndex.value = 1;
+  if (currentIndexHot.value < maxPage.value) {
+    currentIndexHot.value++;
+  } else if (currentIndexHot.value == maxPage.value) {
+    currentIndexHot.value = 1;
   }
 };
 watch(currentIndexHot, (newIndex) => {
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.34"
-TAG="1.0.35"
+LAST_TAG="1.0.35"
+TAG="1.0.36"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -144,6 +144,76 @@
       />
     </div>
   </div>
+  <div style="padding-left: 16px; padding-right: 16px; padding-bottom: 30px">
+    <v-tabs
+      class="tabs2"
+      ref="tabs2"
+      v-model="tabRecom"
+      style="margin-top: 25px; margin-bottom: 20px; width: 100%"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="isMobile()"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div class="tw-text-center" v-if="hotLoading && isMobile()">
+      <v-progress-circular
+        color="blue-lighten-2"
+        indeterminate
+        size="64"
+        class="tw-m-auto"
+      ></v-progress-circular>
+    </div>
+    <v-item-group multiple v-if="isMobile()">
+      <v-row v-if="!hotLoading">
+        <v-col
+          v-for="(item, i) in recommendImages"
+          :key="i"
+          cols="6"
+          lg="3"
+          md="4"
+          sm="6"
+        >
+          <div v-if="item !== null">
+            <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
+              <!-- 设置 eager 属性，确保图片直接加载 -->
+              <v-img
+                :src="item[0].url"
+                :alt="item[0].name"
+                eager
+                class="d-block"
+              />
+              <v-card-text class="tw-text-left font-weight-medium title">
+                <h4>{{ item[0].name }}</h4>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+      <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+    </v-item-group>
+    <v-row v-if="isMobile()">
+      <v-col>
+        <v-pagination
+          :size="isMobile() ? 'small' : 'default'"
+          v-if="hotTotal"
+          v-model="currentIndex"
+          @update:modelValue="toggleRowMobile"
+          :length="hotLength"
+          rounded="0"
+          class="tw-float-right tw-mt-[32px]"
+          total-visible="5"
+        ></v-pagination></v-col
+    ></v-row>
+  </div>
 </template>
 <script setup lang="ts">
@@ -158,8 +228,16 @@ const tabRecom = ref();
 const recommendList = ref();
 const recommendImages = ref();
 const currentIndex = ref(1);
-const flag = ref(false);
+const hotLoading = ref(false);
+const hotTotal = ref(10);
+const isOrNotMobile = isMobile();
 const loadHotProducts = async () => {
+  const pageSize = ref(5);
+  if (isOrNotMobile) {
+    pageSize.value = 4;
+  }
+  hotLoading.value = true;
+
   let { data: hotProducts } = await useAsyncData(
     "hotProducts",
     () =>
@@ -167,41 +245,46 @@ const loadHotProducts = async () =&gt; {
         method: "GET",
         params: {
           pageNo: currentIndex.value,
-          pageSize: 5,
+          pageSize: pageSize.value,
         },
       }),
     {
       server: true, // 仅在服务器端获取数据
     }
   );
+  hotTotal.value = hotProducts.value.data.total;
   recommendList.value = hotProducts.value.data.records;
   maxPage.value = hotProducts.value.data.pages;
   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
-  recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
-    const item = recommendList.value[index];
-    if (!item) {
-      return null;
-    }
-    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
-    if (typeof item.productimageliststore === "string") {
-      try {
-        item.productimageliststore = JSON.parse(item.productimageliststore);
-      } catch (error) {
-        item.productimageliststore = []; // 解析失败时，设置为空数组
+  recommendImages.value = Array.from({ length: pageSize.value }).map(
+    (_, index) => {
+      const item = recommendList.value[index];
+      if (!item) {
+        return null;
       }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
     }
-    const ree = (item.productimageliststore = item?.productimageliststore.map(
-      (productItem: ProductImage) => ({
-        ...productItem,
-        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
-        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
-        name: item.name,
-        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
-      })
-    ));
-    return ree;
-  });
+  );
+  hotLoading.value = false;
 };
+
 const toggleRowLeft = () => {
   if (currentIndex.value !== 1) {
     currentIndex.value--;
@@ -216,10 +299,13 @@ const toggleRowRight = () =&gt; {
     currentIndex.value = 1;
   }
 };
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+
 watch(currentIndex, (newIndex) => {
   loadHotProducts(); // Call loadHotProducts when currentIndex changes
 });
-
 // Initial load of hot products
 await loadHotProducts(); // Load hot products the first time
@@ -354,6 +440,9 @@ const packs = [
     href: "/pack",
   },
 ];
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
 <style scoped>
 @media screen and (min-width: 1537px) {
@@ -499,4 +588,11 @@ button .recommendButton {
 .recommend-img-right:hover {
   cursor: pointer;
 }
+.image-grid {
+  padding: 16px;
+}
+
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
 </style>
 <template>
-  <MobileProductDetail v-if="isMobile()" :info="info" />
+  <MobileProductDetail v-if="isMobile()" :info="info" :res="resData" />
   <ProductDetail v-else :info="info" />
 </template>
@@ -10,6 +10,7 @@ import MobileProductDetail from &quot;~/components/MobileProductDetail.vue&quot;;
 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>>({
@@ -130,6 +130,74 @@
           />
         </div>
       </div>
+      <v-tabs
+        class="tabs2"
+        ref="tabs2"
+        v-model="tabRecom"
+        style="margin-top: 25px; margin-bottom: 20px"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+        v-if="isMobile()"
+      >
+        <v-tab :value="1">Best Sellers</v-tab>
+        <!-- <v-tab :value="3">商品百科</v-tab> -->
+      </v-tabs>
+      <div class="tw-text-center" v-if="hotLoading && isMobile()">
+        <v-progress-circular
+          color="blue-lighten-2"
+          indeterminate
+          size="64"
+          class="tw-m-auto"
+        ></v-progress-circular>
+      </div>
+      <v-item-group multiple v-if="isMobile()">
+        <v-row v-if="!hotLoading">
+          <v-col
+            v-for="(item, i) in recommendImages"
+            :key="i"
+            cols="6"
+            lg="3"
+            md="4"
+            sm="6"
+          >
+            <div v-if="item !== null">
+              <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
+                <!-- 设置 eager 属性，确保图片直接加载 -->
+                <v-img
+                  :src="item[0].url"
+                  :alt="item[0].name"
+                  eager
+                  class="d-block"
+                />
+                <v-card-text class="tw-text-left font-weight-medium title">
+                  <h4>{{ item[0].name }}</h4>
+                </v-card-text>
+              </v-card>
+            </div>
+          </v-col>
+        </v-row>
+        <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+      </v-item-group>
+      <v-row v-if="isMobile()">
+        <v-col>
+          <v-pagination
+            :size="isMobile() ? 'small' : 'default'"
+            v-if="hotTotal"
+            v-model="currentIndex"
+            @update:modelValue="toggleRowMobile"
+            :length="hotLength"
+            rounded="0"
+            class="tw-float-right tw-mt-[32px]"
+            total-visible="5"
+          ></v-pagination></v-col
+      ></v-row>
     </v-container>
   </div>
 </template>
@@ -146,6 +214,7 @@ import { watchEffect, computed, ref } from &quot;vue&quot;;
 const productStore = useProductListStore();
 const categoryStore = useCategoryStore();
 const loading = ref(false);
+const hotLoading = ref(false);
 const route = useRoute(); // 获取路由信息
 const router = useRouter(); // 获取路由信息
 const title = ref("");
@@ -155,8 +224,16 @@ const tabRecom = ref();
 const recommendList = ref();
 const recommendImages = ref();
 const currentIndex = ref(1);
+const hotTotal = ref(10);
 const isOrNotMobile = isMobile();
+
 const loadHotProducts = async () => {
+  const pageSize = ref(5);
+  if (isOrNotMobile) {
+    pageSize.value = 4;
+  }
+  hotLoading.value = true;
+
   let { data: hotProducts } = await useAsyncData(
     "hotProducts",
     () =>
@@ -164,41 +241,46 @@ const loadHotProducts = async () =&gt; {
         method: "GET",
         params: {
           pageNo: currentIndex.value,
-          pageSize: 5,
+          pageSize: pageSize.value,
         },
       }),
     {
       server: true, // 仅在服务器端获取数据
     }
   );
+  hotTotal.value = hotProducts.value.data.total;
   recommendList.value = hotProducts.value.data.records;
   maxPage.value = hotProducts.value.data.pages;
   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
-  recommendImages.value = Array.from({ length: 5 }).map((_, index) => {
-    const item = recommendList.value[index];
-    if (!item) {
-      return null;
-    }
-    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
-    if (typeof item.productimageliststore === "string") {
-      try {
-        item.productimageliststore = JSON.parse(item.productimageliststore);
-      } catch (error) {
-        item.productimageliststore = []; // 解析失败时，设置为空数组
+  recommendImages.value = Array.from({ length: pageSize.value }).map(
+    (_, index) => {
+      const item = recommendList.value[index];
+      if (!item) {
+        return null;
       }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
     }
-    const ree = (item.productimageliststore = item?.productimageliststore.map(
-      (productItem: ProductImage) => ({
-        ...productItem,
-        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
-        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
-        name: item.name,
-        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
-      })
-    ));
-    return ree;
-  });
+  );
+  hotLoading.value = false;
 };
+
 const toggleRowLeft = () => {
   if (currentIndex.value !== 1) {
     currentIndex.value--;
@@ -213,10 +295,13 @@ const toggleRowRight = () =&gt; {
     currentIndex.value = 1;
   }
 };
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+
 watch(currentIndex, (newIndex) => {
   loadHotProducts(); // Call loadHotProducts when currentIndex changes
 });
-
 // Initial load of hot products
 await loadHotProducts(); // Load hot products the first time
@@ -404,6 +489,9 @@ watchEffect(async () =&gt; {
 const length = computed(() =>
   productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
 );
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
 <style scoped>
@@ -529,4 +617,8 @@ button .recommendButton {
 .recommend-img-right:hover {
   cursor: pointer;
 }
+
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
 </style>