feat: 开发热销商品

boyang
1 parent a4b10b4c
Showing 6 changed files with 912 additions and 280 deletions
components/Footer.vue
components/MobileCategoryList.vue
components/ProductDetail.vue
nuxt.config.ts
pages/index.vue
pages/products/index.vue
@@ -5,7 +5,9 @@
         <v-col cols="12" lg="3" sm="12" md="6">
           <b>Solution</b>
           <p><router-link to="/equipment">Lab Device</router-link></p>
-          <p><router-link to="/customize">Customized BatterTesting</router-link></p>
+          <p>
+            <router-link to="/customize">Customized BatterTesting</router-link>
+          </p>
           <p><router-link to="/pack">Pack</router-link></p>
         </v-col>
         <v-col cols="12" lg="3" sm="12" md="6">
@@ -16,6 +18,18 @@
         <v-col cols="12" lg="3" sm="12" md="6">
           <b>About</b>
           <p><router-link to="/about">About us</router-link></p>
+          <p>
+            <a
+              href="https://www.linkedin.com/company/canrd/"
+              rel="noopener noreferrer"
+              >LinkedIn</a
+            >
+          </p>
+          <p>
+            <a href="https://x.com/canrdenerge?s=11" rel="noopener noreferrer"
+              >Twitter</a
+            >
+          </p>
         </v-col>
         <v-col cols="12" lg="3" sm="12" md="6">
           <div class="tw-w-[250px] tw-float-left tw-mr-[8px]">
@@ -24,7 +38,12 @@
             <p>Phone： +86 19867737979</p>
             <p>Wechat： contactcanrd</p>
           </div>
-          <img class="tw-float-left" src="/wechat.jpg" alt="canrud-wechat" width="80" />
+          <img
+            class="tw-float-left"
+            src="/wechat.jpg"
+            alt="canrud-wechat"
+            width="80"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -200,7 +200,7 @@ watchEffect(async () =&gt; {
         const foundFuncCategory = funcCategoryList.value.find(
           (func) => func.name === functionName
         );
-        console.log(foundFuncCategory, "5656functionName");
+        console.log(foundFuncCategory, "functionName");
  
         if (foundFuncCategory) {
           const funcCategoryId = foundFuncCategory.id;
@@ -208,30 +208,15 @@
         <div
           v-for="(imageObj, index) in recommendImages.slice(0, 5)"
           :key="'row1-' + index"
-          style="
-            display: inline-block;
-            margin: 0 5px;
-            text-align: center;
-            width: 200px;
-          "
+          class="imageTotal"
         >
           <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
             <img
               :src="imageObj[0]?.url"
               :alt="'Image ' + (index + 1)"
-              style="width: 200px; height: 200px; margin-right: 10px"
+              class="item-imgHot"
             />
-            <span
-              style="
-                display: block;
-                margin-top: 5px;
-                font-size: 16px;
-                width: 180px;
-                color: #555;
-                text-align: left;
-                margin-left: 10px;
-              "
-            >
+            <span class="image-name">
               {{ imageObj[0]?.name }}
             </span>
           </a>
@@ -249,30 +234,15 @@
         <div
           v-for="(imageObj, index) in recommendImages.slice(5, 10)"
           :key="'row2-' + index"
-          style="
-            display: inline-block;
-            margin: 0 5px;
-            text-align: center;
-            width: 200px;
-          "
+          class="imageTotal"
         >
           <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
             <img
               :src="imageObj[0]?.url"
               :alt="'Image ' + (index + 6)"
-              style="width: 200px; height: 200px; margin-right: 10px"
+              class="item-imgHot"
             />
-            <span
-              style="
-                display: block;
-                margin-top: 5px;
-                font-size: 16px;
-                color: #555;
-                text-align: left;
-                width: 180px;
-                margin-left: 10px;
-              "
-            >
+            <span class="image-name">
               {{ imageObj[0]?.name }}
             </span>
           </a>
@@ -291,63 +261,6 @@
         />
       </div>
     </div>
-
-    <!-- <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-tab :value="1">Product Details</v-tab>
-        <v-tab :value="2">Specification</v-tab>
-      </v-tabs>
-      <v-window v-model="tab" class="tw-p-[24px]">
-        <v-window-item key="1" :value="1">
-          <div v-if="info.advantage" class="tw-mb-[24px]">
-            <div class="text-h6">Advantage</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.advantage"></div>
-          </div>
-          <div v-if="info.physicalproperty" class="tw-mb-[24px]">
-            <div class="text-h6">Physical Property</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.physicalproperty"></div>
-          </div>
-          <div v-if="info.storage" class="tw-mb-[24px]">
-            <div class="text-h6">Storage</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.storage"></div>
-          </div>
-          <div v-if="info.introduction" class="tw-mb-[24px]">
-            <div class="text-h6">Introduction</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.introduction"></div>
-          </div>
-          <div v-if="info.description" class="tw-mb-[24px]">
-            <div class="text-h6">Description</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.description"></div>
-          </div>
-        </v-window-item>
-        <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"
-              >
-                <td class="td tw-w-[400px]">{{ item.name }}</td>
-                <td class="td">{{ item.value }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-window-item>
-      </v-window>
-    </div> -->
     <div style="display: flex">
       <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px">
         <v-tabs
@@ -416,81 +329,82 @@
           selected-class="active"
           grow
         >
-          <v-tab value="one">Blog recommendation</v-tab>
+          <v-tab value="one">Journal Recommendation</v-tab>
         </v-tabs>
-<!--        <v-list lines="three">-->
-<!--          <v-list-item-->
-<!--              v-for="item in info.journals"-->
-<!--              :key="item.id"-->
-<!--              :subtitle="item.title"-->
-<!--              @click="navigateToUrl(item.link)"-->
-<!--              lines="three"-->
-<!--              style="font-size: 24px"-->
-<!--          ></v-list-item>-->
-<!--        </v-list>-->
         <v-list>
           <v-list-item
-              v-for="item in info.journals"
-              :key="item.id"
-              @click="navigateToUrl(item.link)"
-              @mouseenter="hoveredItem = item.id"
-              @mouseleave="hoveredItem = null"
+            v-for="item in info.journals"
+            :key="item.id"
+            @click="navigateToUrl(item.link)"
+            @mouseenter="hoveredItem = item.id"
+            @mouseleave="hoveredItem = null"
           >
             <v-list-item-title>
-        <span
-            :class="['title', { 'full-title': hoveredItem === item.id }]"
-        >
-          {{ item.title }}
-        </span>
+              <span
+                :class="['title', { 'full-title': hoveredItem === item.id }]"
+              >
+                {{ item.title }}
+              </span>
             </v-list-item-title>
           </v-list-item>
         </v-list>
-        <!-- <v-list rounded>
-          <v-list-item-group v-model="selectedItem" color="primary">
-            <v-list-item
-              v-for="item in info.journals"
-              :key="item.id"
-              @click="navigateToUrl(item.link)"
-            >
-              <v-list-item-content>
-                <v-list-item-title v-text="item.title"></v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-item-group>
-        </v-list> -->
-<!--        <v-list rounded>-->
-<!--          <v-list-item-group v-model="selectedItem" color="primary">-->
-<!--            <v-list-item-->
-<!--              v-for="item in info.journals"-->
-<!--              :key="item.id"-->
-<!--              @click="navigateToUrl(item.link)"-->
-<!--            >-->
-<!--              <v-list-item-content>-->
-<!--                <v-hover v-slot:default="{ isHovering, props }">-->
-<!--                  <div v-bind="props">-->
-<!--                    <v-list-item-title-->
-<!--                      v-text="item.title"-->
-<!--                      style="-->
-<!--                        overflow: hidden;-->
-<!--                        text-overflow: ellipsis;-->
-<!--                        white-space: nowrap;-->
-<!--                      "-->
-<!--                    ></v-list-item-title>-->
-<!--                    <span v-if="isHovering" bottom style="color: #1e88e5">{{-->
-<!--                      item.title-->
-<!--                    }}</span>-->
-<!--                     <v-tooltip v-if="isHovering" bottom>-->
-<!--                      <template v-slot:activator="{ props: tooltipProps }">-->
-<!--                        <span v-bind="tooltipProps">{{ item.title }}</span>-->
-<!--                      </template>-->
-<!--                      <span>{{ item.title }}</span>-->
-<!--                    </v-tooltip>-->
-<!--                  </div>-->
-<!--                </v-hover>-->
-<!--              </v-list-item-content>-->
-<!--            </v-list-item>-->
-<!--          </v-list-item-group>-->
-<!--        </v-list>-->
+      </div>
+    </div>
+    <v-tabs
+      class="tabs"
+      v-model="tabRecomHot"
+      style="margin-top: 25px"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="recommendImagesHot[0] !== null"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div id="image-container" v-if="recommendImagesHot[0] !== null">
+      <div class="recommend-left-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+          alt="往左移"
+          class="recommend-img-left"
+          @click="toggleRowLeft"
+        />
+      </div>
+      <div class="image-row" id="row1">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImagesHot"
+          :key="'row1-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 1)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div v-else style="width: 200px; height: 200px"></div>
+        </div>
+      </div>
+      <div class="recommend-right-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+          alt="往右移"
+          class="recommend-img-right"
+          @click="toggleRowRight"
+        />
       </div>
     </div>
     <div class="social-share-container">
@@ -545,21 +459,12 @@ const href1 = ref(&quot;/products&quot;);
 const href2 = ref("/products");
 const idHref = ref("/products");
 const hoveredItem = ref(null);
-const itemsss = [
-  {
-    name: "Item #1",
-    id: 1,
-  },
-  {
-    name: "Item #2",
-    id: 2,
-  },
-  {
-    name: "Item #3",
-    id: 3,
-  },
-];
 const productStore = useProductListStore();
+const maxPage = ref(1);
+const tabRecomHot = ref();
+const recommendListHot = ref();
+const recommendImagesHot = ref();
+const currentIndexHot = ref(1);
 const currentUrl = ref("https://www.canrud.com/products");
 // 定义单个 item 的接口
 interface BreadcrumbItem {
@@ -610,6 +515,70 @@ let { data: resData } = await useAsyncData(
     server: true, // 仅在服务器端获取数据
   }
 );
+const loadHotProducts = async () => {
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndexHot.value,
+          pageSize: 5,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  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: 5 }).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;
+  });
+};
+const toggleRowLeft = () => {
+  if (currentIndex.value !== 1) {
+    currentIndex.value--;
+  } else if (currentIndex.value == 1) {
+    currentIndex.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+};
+watch(currentIndexHot, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
 watchEffect(() => {
   currentUrl.value = "https://www.canrud.com/products/detail/" + info.id;
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
@@ -712,9 +681,9 @@ watchEffect(() =&gt; {
       (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`,
+        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
         name: item.name,
-        productUrl: `http://www.canrud.com/products/detail/${item.id}`,
+        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
       })
     ));
     return ree;
@@ -804,23 +773,80 @@ th {
   color: #1e88e5;
 }
  
-#image-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 320px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 100px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
 }
-
 .image-row {
   display: flex;
   height: 245px;
 }
-
-.image-row img {
-  width: 120px;
-  height: 120px;
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 315px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 240px;
+    height: 240px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 60px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 10px;
+  }
 }
  
 button .recommendButton {
@@ -857,6 +883,7 @@ button .recommendButton {
   display: flex;
   flex-direction: row; /* 父容器横向排列 */
   gap: 1rem; /* 设置每个分享项之间的间距 */
+  margin-top: 40px;
 }
  
 .social-share-item {
@@ -873,11 +900,11 @@ button .recommendButton {
  
 .title {
   font-size: 15px; /* 设置字体大小为24px */
-  color: black;    /* 设置字体颜色为黑色 */
+  color: black; /* 设置字体颜色为黑色 */
   display: -webkit-box; /* 使用盒模型显示多行文本 */
   -webkit-line-clamp: 2; /* 限制为两行 */
   -webkit-box-orient: vertical; /* 盒子方向为垂直 */
-  overflow: hidden;   /* 超过部分隐藏 */
+  overflow: hidden; /* 超过部分隐藏 */
   transition: max-height 0.3s ease; /* 过渡效果 */
 }
  
@@ -885,6 +912,6 @@ button .recommendButton {
   display: block; /* 当悬浮时显示为块级元素 */
   color: #1e88e5;
   white-space: normal; /* 允许换行 */
-  overflow: visible;   /* 显示全部内容 */
+  overflow: visible; /* 显示全部内容 */
 }
 </style>
@@ -41,8 +41,8 @@ export default defineNuxtConfig({
   nitro: {
     devProxy: {
       "/shop": {
-        target: "http://47.89.254.121:8002/shop", // 线上代理地址
-        // target: "http://127.0.0.1:8002/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, // 表示是否跨域
       },
@@ -50,8 +50,8 @@ export default defineNuxtConfig({
     // 该配置用于服务端请求转发
     routeRules: {
       "/shop/**": {
-        proxy: "http://47.89.254.121:8002/shop/**",
-        // proxy: "http://127.0.0.1:8002/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/**'
       },
     },
 <template>
   <v-rows class="tw-w-full">
-    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="!isMobile()">
-      <v-carousel-item v-for="banner in banners" :src="banner" cover alt="canrud" :key="banner">
+    <v-carousel
+      hide-delimiter-background
+      show-arrows="hover"
+      height="auto"
+      v-if="!isMobile()"
+    >
+      <v-carousel-item
+        v-for="banner in banners"
+        :src="banner"
+        cover
+        alt="canrud"
+        :key="banner"
+      >
       </v-carousel-item>
     </v-carousel>
-    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="isMobile()">
-      <v-carousel-item v-for="banner in mobileBanners" :src="banner" cover alt="canrud" :key="banner">
+    <v-carousel
+      hide-delimiter-background
+      show-arrows="hover"
+      height="auto"
+      v-if="isMobile()"
+    >
+      <v-carousel-item
+        v-for="banner in mobileBanners"
+        :src="banner"
+        cover
+        alt="canrud"
+        :key="banner"
+      >
       </v-carousel-item>
     </v-carousel>
   </v-rows>
   <!-- 能源材料 -->
   <div class="tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleListOdd title="Material Reagents" :list="materials"
-        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. " />
+      <MainTitleListOdd
+        title="Material Reagents"
+        :list="materials"
+        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
+      />
     </v-container>
   </div>
  
   <!-- 设备 -->
   <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList title="Lab Device" listType="equipment"
+      <MainTitleList
+        title="Lab Device"
+        listType="equipment"
         :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
         desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
-        href="/equipment" />
+        href="/equipment"
+      />
     </v-container>
   </div>
  
   <!-- Customized Battery -->
   <div class="tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList :title="('Customized Battery')" :list="batteries" href="/customize"
-        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. " />
+      <MainTitleList
+        :title="'Customized Battery'"
+        :list="batteries"
+        href="/customize"
+        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
+      />
     </v-container>
   </div>
   <!-- Testing -->
   <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList title="Testing" :list="tests" href="/test"
-        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. " />
+      <MainTitleList
+        title="Testing"
+        :list="tests"
+        href="/test"
+        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
+      />
     </v-container>
   </div>
   <!-- Pack -->
   <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
     <v-container>
-      <MainTitleList title="Pack" href="/pack" :list="packs"
-        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. " />
+      <MainTitleList
+        title="Pack"
+        href="/pack"
+        :list="packs"
+        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
+      />
     </v-container>
   </div>
+  <v-tabs
+    class="tabs"
+    v-model="tabRecom"
+    color="white"
+    bg-color="#eeeeee"
+    slider-color="blue-lighten-1"
+    selected-class="active"
+    v-if="recommendImages[0] !== null && !isMobile()"
+  >
+    <v-tab :value="1">Best Sellers</v-tab>
+    <!-- <v-tab :value="3">商品百科</v-tab> -->
+  </v-tabs>
+  <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
+    <div class="recommend-left-box">
+      <v-img
+        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+        alt="往左移"
+        class="recommend-img-left"
+        @click="toggleRowLeft"
+      />
+    </div>
+    <div class="image-row" id="row1">
+      <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+      <div
+        v-for="(imageObj, index) in recommendImages"
+        :key="'row1-' + index"
+        class="imageTotal"
+      >
+        <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+          <img
+            :src="imageObj[0]?.url"
+            :alt="'Image ' + (index + 1)"
+            class="item-imgHot"
+          />
+          <span class="image-name">
+            {{ imageObj[0]?.name }}
+          </span>
+        </a>
+        <div v-else style="width: 200px; height: 200px"></div>
+      </div>
+    </div>
+    <div class="recommend-right-box">
+      <v-img
+        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+        alt="往右移"
+        class="recommend-img-right"
+        @click="toggleRowRight"
+      />
+    </div>
+  </div>
 </template>
  
 <script setup lang="ts">
-import MainTitleList from '../components/MainTitleList.vue'
-import MainTitleListOdd from '../components/MainTitleListOdd.vue'
-import { useCategoryStore } from '../stores/category'
-import { computed } from 'vue'
-import { isMobile } from '../utils'
+import MainTitleList from "../components/MainTitleList.vue";
+import MainTitleListOdd from "../components/MainTitleListOdd.vue";
+import { useCategoryStore } from "../stores/category";
+import { computed, onMounted, reactive, ref } from "vue";
+import { isMobile } from "../utils";
+
+const maxPage = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendImages = ref();
+const currentIndex = ref(1);
+const flag = ref(false);
+const loadHotProducts = async () => {
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: 5,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  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 = []; // 解析失败时，设置为空数组
+      }
+    }
+    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 toggleRowLeft = () => {
+  if (currentIndex.value !== 1) {
+    currentIndex.value--;
+  } else if (currentIndex.value == 1) {
+    currentIndex.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+};
+watch(currentIndex, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
 onMounted(() => {
-  console.log('%c [ onMounted ]-10', 'font-size:13px; background:pink; color:#bf2c9f;', 111)
-})
+  console.log(
+    "%c [ onMounted ]-10",
+    "font-size:13px; background:pink; color:#bf2c9f;",
+    111
+  );
+});
 useHead({
-  title: 'canrud',
+  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',
+      name: "title",
       content:
-        '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
-    }, {
+        "科路得,助您科研之路势在必得。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:
-        "科路得,助您科研之路势在必得。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!"
-    }],
-  link: [
-    { rel: 'preload', href: '/banner/banner1.jpg', as: 'image' }
-  ]
-})
+        "科路得,助您科研之路势在必得。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!",
+    },
+  ],
+  link: [{ rel: "preload", href: "/banner/banner1.jpg", as: "image" }],
+});
  
 // useAsyncData(async ({ app }) => {
 //   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
@@ -85,76 +258,245 @@ useHead({
 //   app.head.meta = [
 //     {
 //       name: 'description',
-//       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    
+//       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
 //     }]
 // })
-console.log(11)
+console.log(11);
  
-const store = useCategoryStore()
+const store = useCategoryStore();
  
 const lab = computed(
   () =>
     store?.list?.[3] || {
-      categoryDisplayName: '',
-      list: []
+      categoryDisplayName: "",
+      list: [],
     }
-)
+);
  
 const banners = [
-  '/banner/banner1.jpg',
-  '/banner/banner2.jpg',
-  '/banner/banner3.jpg',
-  '/banner/banner5.jpg'
-]
+  "/banner/banner1.jpg",
+  "/banner/banner2.jpg",
+  "/banner/banner3.jpg",
+  "/banner/banner5.jpg",
+];
  
 const mobileBanners = [
-  '/mobile/banner-index1.png',
-  '/mobile/banner-index2.png',
-  '/mobile/banner-index3.png'
-]
+  "/mobile/banner-index1.png",
+  "/mobile/banner-index2.png",
+  "/mobile/banner-index3.png",
+];
  
 const materials = [
-  { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
+  { name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
   {
-    name: 'Laboratory consumables',
-    imageUrl: '/home/2-Universal-consumables.png',
-    href: '/products'
+    name: "Laboratory consumables",
+    imageUrl: "/home/2-Universal-consumables.png",
+    href: "/products",
   },
   {
-    name: 'Low-dimensional materials',
-    imageUrl: '/home/3-Low-dimensional-materials.png',
-    href: '/products'
-  }
-]
+    name: "Low-dimensional materials",
+    imageUrl: "/home/3-Low-dimensional-materials.png",
+    href: "/products",
+  },
+];
  
 const tests = [
   {
-    name: 'Electrochemical performance',
-    imageUrl: '/home/8_Electrochemical_performance.svg',
-    href: '/test'
+    name: "Electrochemical performance",
+    imageUrl: "/home/8_Electrochemical_performance.svg",
+    href: "/test",
+  },
+  {
+    name: "Reliability testing",
+    imageUrl: "/home/9 Reliability testing.svg",
+    href: "/test",
   },
-  { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg', href: '/test' },
-  { name: 'Material testing', imageUrl: '/home/10 Material testing.svg', href: '/test' },
-  { name: 'Calibration', imageUrl: '/home/11 Calibration.svg', href: '/test' }
-]
+  {
+    name: "Material testing",
+    imageUrl: "/home/10 Material testing.svg",
+    href: "/test",
+  },
+  { name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
+];
 const batteries = [
-  { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png', href: '/customize' },
-  { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png', href: '/customize' },
-  { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png', href: '/customize' },
   {
-    name: 'Semi product customization',
-    imageUrl: '/home/7-Semi-product-customization.png',
-    href: '/customize'
-  }
-]
+    name: "Material evaluation",
+    imageUrl: "/home/4-Material-evaluation.png",
+    href: "/customize",
+  },
+  {
+    name: "R&D foundry",
+    imageUrl: "/home/5-R&D-foundry.png",
+    href: "/customize",
+  },
+  {
+    name: "Chemical system",
+    imageUrl: "/home/6-Chemical-system.png",
+    href: "/customize",
+  },
+  {
+    name: "Semi product customization",
+    imageUrl: "/home/7-Semi-product-customization.png",
+    href: "/customize",
+  },
+];
 const packs = [
-  { name: 'Power bank', imageUrl: '/home/12-power-bank.png', href: '/pack' },
-  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png', href: '/pack' },
-  { name: 'power tool', imageUrl: '/home/3-powertool.png', href: '/pack' },
+  { name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
   {
-    name: 'portable energy storage',
-    imageUrl: '/home/4-portableenergystorage.png',
-    href: '/pack'
-  }
-]
+    name: "Energy storage",
+    imageUrl: "/home/13-Energy-storage.png",
+    href: "/pack",
+  },
+  { name: "power tool", imageUrl: "/home/3-powertool.png", href: "/pack" },
+  {
+    name: "portable energy storage",
+    imageUrl: "/home/4-portableenergystorage.png",
+    href: "/pack",
+  },
+];
 </script>
+<style scoped>
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 100px;
+    width: 85%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 80%;
+  }
+}
+
+.active {
+  background-color: #1086e8;
+}
+
+/* #image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  margin: 10px auto 50px;
+  width: 80%;
+} */
+
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 100px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+  }
+}
+.image-row {
+  display: flex;
+  height: 305px;
+}
+@media screen and (min-width: 1537px) {
+  .image-row {
+    display: flex;
+    height: 305px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row {
+    display: flex;
+    height: 245px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 290px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 210px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 240px;
+    height: 240px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 10px;
+  }
+}
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
+</style>
 <template>
-  <div class="tw-m-auto tw-pb-[64px]">
+  <div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
     <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
     <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
     <v-container class="">
@@ -70,11 +70,72 @@
             total-visible="5"
           ></v-pagination></v-col
       ></v-row>
+      <v-tabs
+        class="tabs"
+        v-model="tabRecom"
+        style="margin-top: 25px"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+        v-if="recommendImages[0] !== null && !isMobile()"
+      >
+        <v-tab :value="1">Best Sellers</v-tab>
+        <!-- <v-tab :value="3">商品百科</v-tab> -->
+      </v-tabs>
+      <div
+        id="image-container"
+        v-if="recommendImages[0] !== null && !isMobile()"
+      >
+        <div class="recommend-left-box">
+          <v-img
+            src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+            alt="往左移"
+            class="recommend-img-left"
+            @click="toggleRowLeft"
+          />
+        </div>
+        <div class="image-row" id="row1">
+          <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+          <div
+            v-for="(imageObj, index) in recommendImages"
+            :key="'row1-' + index"
+            class="imageTotal"
+          >
+            <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+              <img
+                :src="imageObj[0]?.url"
+                :alt="'Image ' + (index + 1)"
+                class="item-imgHot"
+              />
+              <span class="image-name">
+                {{ imageObj[0]?.name }}
+              </span>
+            </a>
+            <div v-else style="width: 200px; height: 200px"></div>
+          </div>
+        </div>
+        <div class="recommend-right-box">
+          <v-img
+            src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+            alt="往右移"
+            class="recommend-img-right"
+            @click="toggleRowRight"
+          />
+        </div>
+      </div>
     </v-container>
   </div>
 </template>
  
 <script setup lang="ts">
+import type { ProductImage } from "~/type";
 import { isMobile, isEqual } from "~/utils";
 import { useProductListStore } from "~/stores/product_list";
 import { useCategoryStore } from "~/stores/category";
@@ -89,7 +150,76 @@ const route = useRoute(); // 获取路由信息
 const router = useRouter(); // 获取路由信息
 const title = ref("");
 const keywordTitle = ref("");
+const maxPage = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendImages = ref();
+const currentIndex = ref(1);
 const isOrNotMobile = isMobile();
+const loadHotProducts = async () => {
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: 5,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  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 = []; // 解析失败时，设置为空数组
+      }
+    }
+    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 toggleRowLeft = () => {
+  if (currentIndex.value !== 1) {
+    currentIndex.value--;
+  } else if (currentIndex.value == 1) {
+    currentIndex.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+};
+watch(currentIndex, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
 watchEffect(() => {
   // 遍历数组
   if (router.currentRoute.value.query.categories) {
@@ -285,4 +415,118 @@ const length = computed(() =&gt;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+.tabs {
+  border-bottom: 2px solid #1f88e5;
+}
+
+.active {
+  background-color: #1086e8;
+}
+
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 100px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
+.image-row {
+  display: flex;
+  height: 245px;
+}
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 300px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 240px;
+    height: 240px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: block;
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: left;
+    margin-left: 10px;
+  }
+}
+
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
 </style>