fix: 热销样式，prod2-47/48

boyang
1 parent 52612a6a
Showing 3 changed files with 533 additions and 24 deletions
components/CategoryList.vue
deploy/prod2.sh
pages/products/index.vue
@@ -70,6 +70,63 @@
         </v-col>
       </v-row>
     </div>
+    <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>
 </template>
@@ -311,4 +368,474 @@ const funcCategoryList = computed(() =&gt; {
   }
   return [];
 });
+
+import type { ProductImage } from "~/type";
+import { isMobile, isEqual } from "~/utils";
+import { watchEffect, ref } from "vue";
+
+const loading = ref(false);
+const hotLoading = ref(false);
+const title = ref("");
+const keywordTitle = ref("");
+const maxPage = ref(1);
+const tabRecom = ref();
+const recommendList = ref({});
+const recommendImages = ref({});
+const currentIndex = ref(1);
+const hotTotal = ref(10);
+const isOrNotMobile = ref(isMobile());
+const maxPageMobile = ref(1);
+const recommendListMobile = ref({});
+const recommendImagesMobile = ref({});
+const currentIndexMobile = ref(1);
+const hotLoadingMobile = ref(false);
+const hotTotalMobile = ref(10);
+
+const loadHotProducts = async () => {
+  const pageSize = 5;
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: pageSize,
+        },
+      }),
+    {
+      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 = []; // 解析失败时，设置为空数组
+      }
+    }
+    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;
+  }
+  startTimer();
+};
+let intervalId: any;
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+  startTimer();
+};
+const startTimer = () => {
+  // 清除已有计时器，防止重复
+  clearInterval(intervalId);
+  intervalId = setInterval(() => {
+    toggleRowRight();
+  }, 5000); // 每6秒调用一次
+};
+
+onMounted(() => {
+  startTimer();
+});
+
+const toggleRowMobile = (value: number) => {
+  currentIndexMobile.value = value;
+};
+const { width } = useDisplay();
+const firstHotIndex = ref(true);
+
+// // 监听屏幕宽度变化
+// watch(width, async (newWidth) => {
+//   console.log(newWidth, "5656widthvalue");
+//   if (firstHotIndex.value) {
+//     if (newWidth > 600) {
+//       await loadHotProducts();
+//     } else {
+//       await loadHotProductsMobile();
+//     }
+//   }
+// });
+
+// // 监听路由变化
+// watch(
+//   () => route.fullPath,
+//   async () => {
+//     if (firstHotIndex.value) {
+//       if (width.value > 600) {
+//         await loadHotProducts();
+//       } else {
+//         await loadHotProductsMobile();
+//       }
+//     }
+//   }
+// );
+
+watch(currentIndex, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+
+const loadHotProductsMobile = async () => {
+  hotLoadingMobile.value = true;
+  let { data: hotProductsMobile } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndexMobile.value,
+          pageSize: 4,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  hotTotalMobile.value = hotProductsMobile.value.data.total;
+  recommendListMobile.value = hotProductsMobile.value.data.records;
+  maxPageMobile.value = hotProductsMobile.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
+    const item = recommendListMobile.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;
+  });
+  hotLoadingMobile.value = false;
+};
+watch(currentIndexMobile, (newIndex) => {
+  loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
+});
+watchEffect(async () => {
+  console.log("Current route:", route.fullPath, "Width:", width.value);
+
+  if (firstHotIndex.value) {
+    if (width.value > 600) {
+      await loadHotProducts();
+    } else {
+      await loadHotProductsMobile();
+    }
+  }
+});
+
+const length = computed(() =>
+  productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
+);
+const hotLength = computed(() =>
+  hotTotalMobile.value ? Math.ceil(hotTotalMobile.value / 4) : 0
+);
 </script>
+<style scoped>
+.title {
+  height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
+}
+/* .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 50px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 0px;
+    width: 100%;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 0px;
+    width: 100%;
+    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 (max-width: 1280px) {
+  .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 (max-width: 1280px) {
+  .image-row img {
+    width: 120px;
+    height: 120px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+@media screen and (max-width: 1280px) {
+  .recommend-img-left {
+    width: 26px;
+    height: 27px;
+    margin-bottom: 60px;
+  }
+}
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+  margin-bottom: 60px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+  margin-bottom: 60px;
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .recommend-img-left {
+    width: 26px;
+    height: 27px;
+    margin-right: 30px;
+    margin-bottom: 60px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .recommend-img-right {
+    width: 26px;
+    height: 27px;
+    margin-left: 30px;
+    margin-bottom: 60px;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .recommend-img-left {
+    width: 26px;
+    height: 27px;
+    margin-right: 70px;
+    margin-bottom: 60px;
+  }
+}
+@media screen and (min-width: 1600px) {
+  .recommend-img-right {
+    width: 26px;
+    height: 27px;
+    margin-left: 70px;
+    margin-bottom: 60px;
+  }
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
+
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
+
+.v-card-text {
+  max-width: 100%; /* 确保文字宽度受限 */
+}
+.item-name {
+  display: -webkit-box !important;
+  -webkit-box-orient: vertical !important;
+  -webkit-line-clamp: 3 !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: normal !important;
+  text-align: left;
+  line-height: 1.5em;
+  min-height: calc(3 * 1.5em); /* 强制未满三行时高度一致 */
+}
+
+#product-card .v-responsive.v-img {
+  width: 274px !important; /* 设置宽度 */
+  height: 274px !important; /* 设置高度 */
+}
+
+.clamp-text {
+  display: -webkit-box; /* 使用弹性盒子 */
+  -webkit-box-orient: vertical; /* 设置为垂直方向 */
+  -webkit-line-clamp: 3; /* 限制最多显示3行 */
+  overflow: hidden; /* 隐藏多余内容 */
+  text-overflow: ellipsis; /* 添加省略号 */
+  white-space: normal; /* 允许换行 */
+  line-height: 1.5em; /* 设置每行的高度 */
+  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
+}
+</style>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.46"
-TAG="1.0.47"
+LAST_TAG="1.0.47"
+TAG="1.0.48"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -2,7 +2,7 @@
   <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-tabs
+    <!-- <v-tabs
       class="tabs"
       v-model="tabRecom"
       style="margin-top: 25px"
@@ -13,7 +13,6 @@
       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">
@@ -25,13 +24,6 @@
         />
       </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"
@@ -58,7 +50,7 @@
           @click="toggleRowRight"
         />
       </div>
-    </div>
+    </div> -->
     <v-container class="">
       <div class="tw-text-center tw-mt-[32px]" v-if="loading">
         <v-progress-circular
@@ -87,23 +79,13 @@
                 v-bind="props"
                 :to="`/products/detail/${item.id}`"
               >
-                <v-img :src="item.imgList[0].url" :alt="item.name">
-                  <!-- <v-expand-transition>
-                    <div
-                      v-if="isHovering"
-                      class="d-flex transition-fast-in-fast-out bg-orange-darken-2 v-card--reveal tw-p-[12px] tw-text-justify"
-                      style="height: 100%"
-                    >
-                      产品描述描述描述描述描述描述描述描述
-                    </div>
-                  </v-expand-transition> -->
-                </v-img>
+                <v-img :src="item.imgList[0].url" :alt="item.name"> </v-img>
                 <v-card-text
                   class="tw-text-left font-weight-medium title"
                   style="height: auto"
                 >
                   <h3 style="color: red" v-if="item.price">
-                    ${{ item.price }}   -   ${{ item.maxPrice }}
+                    ${{ item.price }} - ${{ item.maxPrice }}
                   </h3>
                   <h4 class="item-name">{{ item.name }}</h4>
                 </v-card-text>