feat: 相关商品问题修复

src/components/SwipeCards/index.vue

@@ -27,8 +27,13 @@ const startX = ref(0);
 const startY = ref(0);
 const moveX = ref(0);
 const moveY = ref(0);
+// 原始位移用于判定手势，不参与频繁样式更新以减少卡顿
+const rawMoveX = ref(0);
+const rawMoveY = ref(0);
 const currentIndex = ref(null);
 const isHorizontal = ref(false); // 是否为水平滑动
+// 简易节流：避免每次 touchmove 都触发样式更新
+let dragTicking = false;
 
 const visibleCards = computed(() => cards.value.slice(0, 3));
 
@@ -43,15 +48,15 @@ function touchStart(e, index) {
 function touchMove(e, index) {
   if (currentIndex.value !== index) return;
   const touch = e.touches[0];
-  moveX.value = touch.clientX - startX.value;
+  rawMoveX.value = touch.clientX - startX.value;
-  moveY.value = touch.clientY - startY.value;
+  rawMoveY.value = touch.clientY - startY.value;
 
   // 第一次移动时判断方向
   if (
     !isHorizontal.value &&
-    (Math.abs(moveX.value) > 10 || Math.abs(moveY.value) > 10)
+    (Math.abs(rawMoveX.value) > 10 || Math.abs(rawMoveY.value) > 10)
   ) {
-    if (Math.abs(moveX.value) > Math.abs(moveY.value)) {
+    if (Math.abs(rawMoveX.value) > Math.abs(rawMoveY.value)) {
       isHorizontal.value = true;
     }
   }
@@ -59,19 +64,32 @@ function touchMove(e, index) {
   // 如果是水平滑动，阻止页面滚动
   if (isHorizontal.value) {
     e.preventDefault?.();
+    // 将样式更新按 16ms 节流，降低渲染压力
+    if (!dragTicking) {
+      dragTicking = true;
+      setTimeout(() => {
+        moveX.value = rawMoveX.value;
+        moveY.value = rawMoveY.value;
+        dragTicking = false;
+      }, 16);
+    }
   }
 }
 
 function touchEnd(e, index) {
   if (!isHorizontal.value) return; // 如果不是水平滑动，不处理
-  if (Math.abs(moveX.value) > props.threshold) {
+  const deltaX = Math.abs(rawMoveX.value);
-    const direction = moveX.value > 0 ? 1 : -1;
+  const deltaY = Math.abs(rawMoveY.value);
+  if (deltaX > props.threshold && deltaX >= deltaY) {
+    const direction = rawMoveX.value > 0 ? 1 : -1;
     animateSwipe(index, direction);
   } else {
     resetCard(index);
   }
   moveX.value = 0;
   moveY.value = 0;
+  rawMoveX.value = 0;
+  rawMoveY.value = 0;
   currentIndex.value = null;
 }
 
@@ -108,7 +126,7 @@ function cardStyle(index, card) {
       : `translate(0, ${translateY}rpx)`;
   const rotate =
     currentIndex.value === index
-      ? `rotate(${moveX.value / 15}deg)`
+      ? `rotate(${moveX.value / 24}deg)`
       : "rotate(0)";
 
   let opacity = 1;
@@ -129,7 +147,11 @@ function cardStyle(index, card) {
     transform: ${transform};
     opacity: ${opacity};
     transition: ${
-      card.swiped ? "all 0.3s ease-out" : "transform 0.2s ease-out"
+      card.swiped
+        ? "all 0.3s ease-out"
+        : currentIndex.value === index && isHorizontal.value
+        ? "none"
+        : "transform 0.2s ease-out"
     };
   `;
 }

src/pages/index/components/module/DetailCardGoodsContentList/index.vue

@@ -4,14 +4,17 @@
 
     <SwipeCards :cardsData="commodityList">
       <template #default="{ card }">
-        <view class="inner-card" @click="placeOrderHandle(card)">
+        <view
+          class="inner-card overflow-hidden"
+          @click="placeOrderHandle(card)"
+        >
           <!-- 商品大图部分：自适应剩余空间 -->
           <view class="goods-image-wrapper">
             <image
               class="goods-image"
               :src="card.commodityPhoto"
               mode="aspectFill"
-            ></image>
+            />
             <view class="goods-title">
               <text class="goods-text">{{ card.commodityName }}</text>
               <view class="card-price-row">
@@ -27,17 +30,17 @@
           <!-- 底部相册部分：固定比例或高度 -->
           <view class="album-row">
             <view
-              v-for="(item, index) in normalizedAlbums(commodityList)"
+              v-for="(item, index) in card.commodityPhotoList"
               :key="index"
               class="album-item"
             >
               <view v-if="item" class="album-image-wrapper">
                 <image
                   class="album-image"
-                  :src="item.commodityPhoto"
+                  :src="item.photoUrl"
                   mode="aspectFill"
                 />
-                <view class="album-title">{{ item.commodityName }}</view>
+                <view class="album-title">{{ item.photoName }}</view>
               </view>
             </view>
           </view>
@@ -48,7 +51,7 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
+import { defineProps, computed } from "vue";
 import { checkToken } from "@/hooks/useGoLogin";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import SwipeCards from "@/components/SwipeCards/index.vue";
@@ -60,13 +63,6 @@ const props = defineProps({
   },
 });
 
-// 补齐3个的
-const normalizedAlbums = (list = []) => {
-  const arr = list.slice(0, 3);
-  while (arr.length < 3) arr.push(null);
-  return arr;
-};
-
 // 去下单
 const placeOrderHandle = (item) => {
   checkToken().then(() => {