feat: 相关商品交互调试

src/components/SwipeCards/index.vue

@@ -11,10 +11,7 @@
       @touchcancel.stop="touchCancel(index)"
       @transitionend="onTransitionEnd(index)"
     >
-      <view
-        class="inner-card bg-white"
-        @click.stop.prevent.capture="placeOrderHandle(card)"
-      >
+      <view class="inner-card bg-white">
         <!-- 商品大图部分：自适应剩余空间 -->
         <view class="goods-image-wrapper relative">
           <image class="w-full h-full" :src="card.commodityPhoto" />
@@ -65,6 +62,7 @@ const props = defineProps({
 });
 
 const DURATION = 300;
+const CLICK_THRESHOLD = 8; // 点击判定的最大偏移阈值（像素）
 const swipering = ref(false);
 const animatingOut = ref(false);
 let reorderTimer = null;
@@ -100,7 +98,7 @@ watch(
 );
 
 // 触摸状态
-const touchState = ref({ startX: 0, startY: 0, moving: false });
+const touchState = ref({ startX: 0, startY: 0, moving: false, isClickCandidate: false });
 
 const touchStart = (e, index) => {
   if (index !== 0 || animatingOut.value) return;
@@ -109,6 +107,8 @@ const touchStart = (e, index) => {
   touchState.value.startX = t.clientX;
   touchState.value.startY = t.clientY;
   touchState.value.moving = true;
+  // 初始认为可能是点击，移动过程中如果超过阈值则取消点击
+  touchState.value.isClickCandidate = true;
   swipering.value = true;
 };
 
@@ -118,6 +118,10 @@ const touchMove = (e, index) => {
   if (!t) return;
   const dx = t.clientX - touchState.value.startX;
   const dy = t.clientY - touchState.value.startY;
+  // 超过点击阈值则标记为不是点击
+  if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
+    touchState.value.isClickCandidate = false;
+  }
   const top = list.value[0];
   if (!top) return;
   top.x = dx;
@@ -143,6 +147,16 @@ const touchEnd = (index) => {
   swipering.value = false;
   const top = list.value[0];
   if (!top) return;
+  // 若在有效点击范围内，则触发跳转，不进行滑动逻辑
+  if (touchState.value.isClickCandidate) {
+    top.x = 0;
+    top.y = 0;
+    top.opacity = 1;
+    uni.navigateTo({
+      url: `/pages/goods/index?commodityId=${top.commodityId}`,
+    });
+    return;
+  }
   const threshold = windowWidth / 4;
   if (Math.abs(top.x) > threshold) {
     const direction = top.x > 0 ? 1 : -1;
@@ -203,7 +217,7 @@ const transformStyle = (index, card) => {
   }
   // 预览层：轻微位移与缩放，确保连贯顶上
   const previewScales = [1, 0.98, 0.96];
-  const previewOffsets = [0, 8, 16];
+  const previewOffsets = [0, 16, 16];
   const scale = previewScales[index] ?? 0.94;
   const y = previewOffsets[index] ?? 24;
   return {
@@ -213,11 +227,11 @@ const transformStyle = (index, card) => {
 
 // 去下单
 const placeOrderHandle = (item) => {
-  checkToken().then(() => {
+  console.log("去下单", item);
+
   uni.navigateTo({
     url: `/pages/goods/index?commodityId=${item.commodityId}`,
   });
-  });
 };
 </script>
 

src/components/SwipeCards/styles/index.scss

@@ -1,5 +1,5 @@
 .card {
-  height: 320px;
+  height: 300px;
 }
 
 .card-item {