fix: 商品推荐联调

boyang
1 parent 06c01b1e
Showing 2 changed files with 235 additions and 11 deletions
components/ProductDetail.vue
pages/products/index.vue
@@ -46,30 +46,30 @@
         <!-- <v-row class="bg-white mb-sm-10 text-h4 font-weight-medium">
           <v-col>{{ info.name }}</v-col>
         </v-row> -->
-        <h1>{{ info.name }}</h1>
+        <h1 class="tw-m-[12px] tw-mb-[36px]">{{ info.name }}</h1>
         <div class="tw-flex tw-flex-wrap">
-          <div class="tw-w-1/2">
-            <span class="tw-leading-[10px] tw-m-[16px]">
+          <div class="tw-w-1/2 tw-mb-[12px]">
+            <span class="tw-leading-[10px] tw-m-[12px]">
               Brand：{{ info.brandName }}
             </span>
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >Product Model：{{ info.model }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename1">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename1 }}：{{ info.basecore1 }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename2">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename2 }}：{{ info.basecore2 }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename3">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename3 }}：{{ info.basecore3 }}</span
             >
           </div>
@@ -85,7 +85,8 @@
             :key="index"
             class="tw-w-1/2 tw-mb-[12px]"
           >
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span
+              class="tw-leading-normal tw-m-0 tw-block tw-max-w-full tw-break-words tw-ml-[12px]"
               >{{ attribute.name }}：{{ attribute.value }}</span
             >
           </div>
@@ -150,6 +151,123 @@
         </v-dialog> -->
       </v-col>
     </v-row>
+
+    <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"
+    >
+      <v-tab :value="1">Product Recommendations</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div id="image-container" v-if="recommendImages[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="toggleRow"
+        />
+      </div>
+      <div v-if="currentIndex === 0" 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.slice(0, 5)"
+          :key="'row1-' + index"
+          style="
+            display: inline-block;
+            margin: 0 5px;
+            text-align: center;
+            width: 200px;
+          "
+        >
+          <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"
+            />
+            <span
+              style="
+                display: block;
+                margin-top: 5px;
+                font-size: 16px;
+                width: 180px;
+                color: #555;
+                text-align: left;
+                margin-left: 10px;
+              "
+            >
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div v-else style="width: 200px; height: 200px"></div>
+        </div>
+      </div>
+      <div v-else class="image-row" id="row2">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
+          :key="'row2-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 6)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <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;
+          "
+        >
+          <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"
+            />
+            <span
+              style="
+                display: block;
+                margin-top: 5px;
+                font-size: 16px;
+                color: #555;
+                text-align: left;
+                width: 180px;
+                margin-left: 10px;
+              "
+            >
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div
+            v-else
+            style="width: 200px; height: 200px; margin-right: 10px"
+          ></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="toggleRow"
+        />
+      </div>
+    </div>
+
     <div class="tw-pb-[64px]">
       <v-tabs
         class="tabs"
@@ -218,6 +336,12 @@ import { useDialogStore } from &quot;~/stores/dialog&quot;;
 import { useRouter, useRoute } from "vue-router";
 import { useRouteQuery } from "@/stores/route_query";
  
+const recommendList = ref();
+const recommendImages = ref();
+const selectedItem = ref();
+const tabRecom = ref(0);
+const tabRecommend = ref(0);
+const tabPeriodical = ref(0);
 const route = useRoute();
 const router = useRouter();
 const routeQuery = useRouteQuery();
@@ -265,9 +389,23 @@ const props = defineProps&lt;{
   info: Product;
 }>();
 const info = props.info;
+let { data: resData } = await useAsyncData(
+  "detail",
+  () =>
+    $fetch("/shop/product/list", {
+      method: "GET",
+      params: {
+        pageNo: 1,
+        pageSize: 20,
+        ids: info.relatedProductIds,
+      },
+    }),
+  {
+    server: true, // 仅在服务器端获取数据
+  }
+);
 watchEffect(() => {
   if (info?.productCrumbsVO?.category1 && productStore.keyword) {
-    console.log(productStore.keyword, "5656keywordy");
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
       href1.value + "?categories=" + info.productCrumbsVO.category1;
@@ -320,7 +458,6 @@ watchEffect(() =&gt; {
       // routeQuery.updateFunction(null);
     }
   } else if (info?.productCrumbsVO?.category1) {
-    console.log(productStore.keyword, "5656keywordy");
     items.value[1].title = info.productCrumbsVO.category1;
     items.value[1].href =
       href1.value + "?categories=" + info.productCrumbsVO.category1;
@@ -341,10 +478,49 @@ 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;
+  });
 });
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
+const currentIndex = ref(0);
+const navigateToUrl = (url) => {
+  // window.open(url); // 在新标签页中打开链接
+};
+const toggleRow = () => {
+  currentIndex.value = currentIndex.value === 0 ? 1 : 0;
+};
+// onMounted(() => {
+//   recommendImages.value.forEach((imageArray, index) => {
+//     console.log(`5656Image Object ${index + 1}:`, imageArray[0]);
+//   });
+// });
  
 const tab = ref(0);
 const slide = ref(0);
@@ -418,4 +594,53 @@ th {
 .breadcrumb-active {
   color: gray;
 }
+
+#image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.image-row {
+  display: flex;
+  height: 245px;
+}
+
+.image-row img {
+  width: 120px;
+  height: 120px;
+}
+
+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>
@@ -96,7 +96,6 @@ watchEffect(() =&gt; {
   if (router.currentRoute.value.query.function) {
     title.value += `,${router.currentRoute.value.query.function}`;
   }
-  // document.title = title.value;
 });
  
 useHead({