feat: 相关商品交互调整

2025-11-08 12:45:45 +08:00
parent 213c58e5c5
commit 21e64ba6a6
2 changed files with 309 additions and 348 deletions
--- a/src/components/SwipeCards/index.vue
+++ b/src/components/SwipeCards/index.vue
@@ -1,221 +1,348 @@
 <template>
-  <view class="swipe-cards border-box" @touchmove.stop>
+  <view class="card border-box pb-12 relative">
    <view
-      v-for="(card, index) in visibleCards"
-      :key="`${card.commodityId}-${index}`"
-      class="card"
-      :style="getCardStyle(index, card)"
-      @touchstart.stop.capture="handleTouchStart($event, index)"
-      @touchmove.stop.capture="handleTouchMove($event, index)"
-      @touchend.stop.capture="handleTouchEnd($event, index)"
+      class="card-item"
+      v-for="(card, index) in list"
+      :key="card.__uid"
+      :style="[itemStyle(index, card), transformStyle(index, card)]"
+      @touchstart.stop="touchStart($event, index)"
+      @touchmove.stop.prevent="touchMove($event, index)"
+      @touchend.stop="touchEnd(index)"
+      @touchcancel.stop="touchCancel(index)"
+      @transitionend="onTransitionEnd(index)"
    >
-      <slot :card="card" />
+      <view
+        class="inner-card overflow-hidden"
+        @click.stop.prevent.capture="placeOrderHandle(card)"
+      >
+        <!-- 商品大图部分：自适应剩余空间 -->
+        <view class="goods-image-wrapper">
+          <image
+            class="goods-image"
+            :src="card.commodityPhoto"
+            mode="aspectFill"
+          />
+          <view class="goods-title">
+            <text class="goods-text">{{ card.commodityName }}</text>
+            <view class="card-price-row">
+              <text class="card-price-fu">￥</text>
+              <text class="card-price">{{ card.specificationPrice }}</text>
+              <text class="card-unit" v-if="card.stockUnitLabel"
+                >/{{ card.stockUnitLabel }}</text
+              >
+            </view>
+          </view>
+        </view>
+
+        <!-- 底部相册部分：固定比例或高度 -->
+        <view class="album-row">
+          <view
+            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.photoUrl"
+                mode="aspectFill"
+              />
+              <view class="album-title">{{ item.photoName }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
    </view>
  </view>
 </template>

 <script setup>
-import { ref, computed, nextTick, defineProps } from "vue";
+import { ref, watch } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";

 const props = defineProps({
  cardsData: { type: Array, default: () => [] },
-  threshold: { type: Number, default: 100 },
 });

-const cards = ref([...props.cardsData]);
-const startX = ref(0);
-const startY = ref(0);
-const moveX = ref(0);
-const moveY = ref(0);
-const currentIndex = ref(null);
-const isHorizontal = ref(false);
+const DURATION = 300;
+const swipering = ref(false);
+const animatingOut = ref(false);
+let reorderTimer = null;

-// 使用对象存储卡片状态，减少响应式数据
-const cardStates = ref({});
+const { windowWidth } = uni.getWindowInfo();

-// 节流控制
-let lastMoveTime = 0;
-const THROTTLE_DELAY = 8; // 8ms 节流，比16ms更流畅
+let uidCounter = 0;
+// 始终生成全局唯一的 __uid，避免因重复 key 导致后续卡片无法正确重渲染与绑定事件
+const genUid = (item) => `swipe_${item?.commodityId ?? 'unknown'}_${uidCounter++}_${Date.now()}`;
+const normalize = (item) => ({
+  ...item,
+  __uid: genUid(item),
+  x: 0,
+  y: 0,
+  opacity: 1,
+});

-const visibleCards = computed(() => cards.value.slice(0, 3));
+// 循环队列（全量），堆栈（仅前3张）
+const queue = ref((props.cardsData || []).map(normalize));
+const list = ref(queue.value.slice(0, 3));
+const updateStack = () => {
+  list.value = queue.value.slice(0, 3);
+};

-// 预计算样式常量
-const BASE_SCALE = 1;
-const SCALE_STEP = 0.05;
-const TRANSLATE_Y_STEP = 28;
-const ROTATE_RATIO = 24;
+watch(
+  () => props.cardsData,
+  (val) => {
+    queue.value = (val || []).map(normalize);
+    updateStack();
+  },
+  { deep: true }
+);

-function handleTouchStart(e, index) {
-  const touch = e.touches[0];
-  startX.value = touch.clientX;
-  startY.value = touch.clientY;
-  currentIndex.value = index;
-  isHorizontal.value = false;
+// 触摸状态
+const touchState = ref({ startX: 0, startY: 0, moving: false });

-  // 初始化卡片状态
-  if (!cardStates.value[index]) {
-    cardStates.value[index] = {
-      swiped: false,
-      direction: 0,
-      transform: "",
-      opacity: 1,
-      transition: "none",
-    };
+const touchStart = (e, index) => {
+  if (index !== 0 || animatingOut.value) return;
+  const t = e.changedTouches?.[0];
+  if (!t) return;
+  touchState.value.startX = t.clientX;
+  touchState.value.startY = t.clientY;
+  touchState.value.moving = true;
+  swipering.value = true;
+};
+
+const touchMove = (e, index) => {
+  if (index !== 0 || !touchState.value.moving || animatingOut.value) return;
+  const t = e.changedTouches?.[0];
+  if (!t) return;
+  const dx = t.clientX - touchState.value.startX;
+  const dy = t.clientY - touchState.value.startY;
+  const top = list.value[0];
+  if (!top) return;
+  top.x = dx;
+  top.y = dy;
+};
+
+const finalizeReorder = () => {
+  const top = queue.value[0];
+  if (!top) return;
+  const moved = { ...top, x: 0, y: 0, opacity: 1 };
+  queue.value = [...queue.value.slice(1), moved];
+  updateStack();
+  animatingOut.value = false;
+  if (reorderTimer) {
+    clearTimeout(reorderTimer);
+    reorderTimer = null;
  }
-}
+};

-function handleTouchMove(e, index) {
-  if (currentIndex.value !== index) return;
-
-  const now = Date.now();
-  if (now - lastMoveTime < THROTTLE_DELAY) return;
-  lastMoveTime = now;
-
-  const touch = e.touches[0];
-  const deltaX = touch.clientX - startX.value;
-  const deltaY = touch.clientY - startY.value;
-
-  // 首次移动判断方向
-  if (!isHorizontal.value) {
-    const absX = Math.abs(deltaX);
-    const absY = Math.abs(deltaY);
-    if (absX > 10 || absY > 10) {
-      isHorizontal.value = absX > absY;
+const touchEnd = (index) => {
+  if (index !== 0 || !touchState.value.moving) return;
+  touchState.value.moving = false;
+  swipering.value = false;
+  const top = list.value[0];
+  if (!top) return;
+  const threshold = windowWidth / 4;
+  if (Math.abs(top.x) > threshold) {
+    const direction = top.x > 0 ? 1 : -1;
+    animatingOut.value = true;
+    top.x = direction * (windowWidth + 100);
+    top.opacity = 0;
+    if (reorderTimer) {
+      clearTimeout(reorderTimer);
+      reorderTimer = null;
    }
-  }
-
-  if (isHorizontal.value) {
-    e.preventDefault?.();
-    moveX.value = deltaX;
-    moveY.value = deltaY;
-
-    // 更新当前卡片的transform，避免重复计算
-    updateCardTransform(index, deltaX, deltaY);
-  }
-}
-
-function handleTouchEnd(e, index) {
-  if (!isHorizontal.value) return;
-
-  const absX = Math.abs(moveX.value);
-  const absY = Math.abs(moveY.value);
-
-  if (absX > props.threshold && absX >= absY) {
-    const direction = moveX.value > 0 ? 1 : -1;
-    animateSwipe(index, direction);
+    reorderTimer = setTimeout(() => {
+      if (animatingOut.value) finalizeReorder();
+    }, DURATION + 40);
  } else {
-    resetCard(index);
+    // 回弹复位
+    top.x = 0;
+    top.y = 0;
+    top.opacity = 1;
  }
+};

-  // 重置状态
-  moveX.value = 0;
-  moveY.value = 0;
-  currentIndex.value = null;
-  isHorizontal.value = false;
-}
+const touchCancel = (index) => {
+  if (index !== 0) return;
+  const top = list.value[0];
+  if (!top) return;
+  touchState.value.moving = false;
+  swipering.value = false;
+  top.x = 0;
+  top.y = 0;
+  top.opacity = 1;
+};

-function updateCardTransform(index, deltaX, deltaY) {
-  const state = cardStates.value[index];
-  if (!state) return;
-
-  const rotate = deltaX / ROTATE_RATIO;
-  state.transform = `translate(${deltaX}px, ${deltaY}px) rotate(${rotate}deg)`;
-  state.transition = "none";
-}
-
-function animateSwipe(index, direction) {
-  const state = cardStates.value[index];
-  if (!state) return;
-
-  state.swiped = true;
-  state.direction = direction;
-  state.transform = `translate(${direction * 500}px, ${moveY.value}px) rotate(${
-    direction * 45
-  }deg)`;
-  state.opacity = 0;
-  state.transition = "all 0.3s ease-out";
-
-  setTimeout(async () => {
-    const removed = cards.value.splice(index, 1)[0];
-    removed.swiped = false;
-    removed.direction = 0;
-    cards.value.push(removed);
-
-    // 清理状态
-    delete cardStates.value[index];
-    await nextTick();
-  }, 300);
-}
-
-function resetCard(index) {
-  const state = cardStates.value[index];
-  if (!state) return;
-
-  state.swiped = false;
-  state.direction = 0;
-  state.transform = "";
-  state.transition = "transform 0.2s ease-out";
-}
-
-function getCardStyle(index, card) {
-  // 如果有触摸状态，使用预计算的样式
-  if (cardStates.value[index] && currentIndex.value === index) {
-    const state = cardStates.value[index];
-    return {
-      zIndex: 3 - index,
-      transform: state.transform || "translate(0, 0)",
-      opacity: state.opacity,
-      transition: state.transition,
-      willChange: "transform, opacity",
-      backfaceVisibility: "hidden",
-      transformStyle: "preserve-3d",
-    };
-  }
-
-  // 静态卡片使用简化计算
-  const zIndex = 3 - index;
-  const scale = BASE_SCALE - index * SCALE_STEP;
-  const translateY = index * TRANSLATE_Y_STEP;
-  const opacity = card.swiped ? 0 : 1;
-
-  let transform = `translate(0, ${translateY}rpx) scale(${scale})`;
-
-  if (card.swiped) {
-    transform = `translate(${card.direction * 500}px, 0) rotate(${
-      card.direction * 45
-    }deg)`;
-  }
+const onTransitionEnd = (index) => {
+  if (index !== 0) return;
+  if (!animatingOut.value) return;
+  finalizeReorder();
+};

+// 栈样式：层级、基础位移缩放、过渡时长
+const itemStyle = (index, card) => {
+  const zIndex = list.value.length - index;
+  const duration = swipering.value ? "0ms" : `${DURATION}ms`;
+  const opacity = card.opacity;
  return {
    zIndex,
-    transform,
    opacity,
-    transition: card.swiped ? "all 0.3s ease-out" : "transform 0.2s ease-out",
-    willChange: "transform, opacity",
-    backfaceVisibility: "hidden",
-    transformStyle: "preserve-3d",
+    transition: `transform ${duration} ease, opacity ${duration} ease`,
  };
-}
+};
+
+// 变换样式：顶部卡动态位移/旋转，后续卡预览层级
+const transformStyle = (index, card) => {
+  if (index === 0) {
+    const deg = card.x / 20;
+    return {
+      transform: `translate3d(${card.x}px, ${card.y}px, 0) rotate(${deg}deg)`,
+    };
+  }
+  // 预览层：轻微位移与缩放，确保连贯顶上
+  const previewScales = [1, 0.98, 0.96];
+  const previewOffsets = [0, 8, 16];
+  const scale = previewScales[index] ?? 0.94;
+  const y = previewOffsets[index] ?? 24;
+  return {
+    transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
+  };
+};
+
+// 去下单
+const placeOrderHandle = (item) => {
+  checkToken().then(() => {
+    uni.navigateTo({
+      url: `/pages/goods/index?commodityId=${item.commodityId}`,
+    });
+  });
+};
 </script>

-<style scoped lang="scss">
-.swipe-cards {
+<style scoped>
+.card {
  position: relative;
  height: 320px;
-  display: flex;
-  justify-content: center;
-  padding: 6px 0 12px;
-  will-change: transform; // 启用硬件加速
 }

-.card {
+.card-item {
  position: absolute;
-  width: 100%;
+  inset: 0;
+  will-change: transform, opacity;
  height: calc(100% - 30px);
-  border-radius: 20px;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.08);
+}
+
+.inner-card {
+  width: 100%;
+  height: 100%;
  background: #fff;
-  will-change: transform, opacity; // 启用硬件加速
-  backface-visibility: hidden; // 减少重绘
+  border-radius: 20px;
+  flex-direction: column;
+}
+
+/* 商品大图部分：撑满除相册外的空间 */
+.goods-image-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 335 / 200;
+  overflow: hidden;
+}
+
+.goods-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.goods-title {
+  position: absolute;
+  inset: 0;
+  padding: 12px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.goods-text {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-price-fu {
+  color: #fff;
+  font-size: 11px;
+  font-weight: normal;
+}
+
+.card-price {
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.card-unit {
+  font-size: 11px;
+  color: #fff;
+  font-weight: normal;
+  margin-left: 2px;
+}
+
+.album-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  aspect-ratio: 335 / 84;
+}
+
+.album-item {
+  width: calc((100% - 24px) / 3);
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.album-image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.album-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.album-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>
--- a/src/pages/index/components/module/DetailCardGoodsContentList/index.vue
+++ b/src/pages/index/components/module/DetailCardGoodsContentList/index.vue
@@ -2,57 +2,12 @@
  <view class="container">
    <ModuleTitle title="相关商品" />

-    <SwipeCards :cardsData="commodityList">
-      <template #default="{ card }">
-        <view
-          class="inner-card overflow-hidden"
-          @click.stop.prevent.capture="placeOrderHandle(card)"
-        >
-          <!-- 商品大图部分：自适应剩余空间 -->
-          <view class="goods-image-wrapper">
-            <image
-              class="goods-image"
-              :src="card.commodityPhoto"
-              mode="aspectFill"
-            />
-            <view class="goods-title">
-              <text class="goods-text">{{ card.commodityName }}</text>
-              <view class="card-price-row">
-                <text class="card-price-fu">￥</text>
-                <text class="card-price">{{ card.specificationPrice }}</text>
-                <text class="card-unit" v-if="card.stockUnitLabel"
-                  >/{{ card.stockUnitLabel }}</text
-                >
-              </view>
-            </view>
-          </view>
-
-          <!-- 底部相册部分：固定比例或高度 -->
-          <view class="album-row">
-            <view
-              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.photoUrl"
-                  mode="aspectFill"
-                />
-                <view class="album-title">{{ item.photoName }}</view>
-              </view>
-            </view>
-          </view>
-        </view>
-      </template>
-    </SwipeCards>
+    <SwipeCards :cardsData="commodityList" />
  </view>
 </template>

 <script setup>
-import { defineProps, computed } from "vue";
-import { checkToken } from "@/hooks/useGoLogin";
+import { defineProps } from "vue";
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
 import SwipeCards from "@/components/SwipeCards/index.vue";

@@ -62,129 +17,8 @@ const props = defineProps({
    default: [],
  },
 });
-
-// 去下单
-const placeOrderHandle = (item) => {
-  checkToken().then(() => {
-    uni.navigateTo({
-      url: `/pages/goods/index?commodityId=${item.commodityId}`,
-    });
-  });
-};
 </script>

 <style lang="scss" scoped>
@import "./styles/index.scss";
-
-.inner-card {
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  border-radius: 20px;
-  flex-direction: column;
-  // overflow: hidden;
-}
-
-/* 商品大图部分：撑满除相册外的空间 */
-.goods-image-wrapper {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 335 / 200;
-  overflow: hidden;
-}
-
-.goods-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.goods-title {
-  position: absolute;
-  inset: 0;
-  padding: 12px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.goods-text {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.card-price-fu {
-  color: #fff;
-  font-size: 11px;
-  font-weight: normal;
-}
-
-.card-price {
-  color: #fff;
-  font-size: $uni-font-size-lg;
-  font-weight: bold;
-}
-.card-unit {
-  font-size: 11px;
-  color: #fff;
-  font-weight: normal;
-  margin-left: 2px;
-}
-
-.album-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 12px;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  aspect-ratio: 335 / 84;
-}
-
-.album-item {
-  width: calc((100% - 24px) / 3);
-  height: 100%;
-  border-radius: 10px;
-  overflow: hidden;
-  background: #f5f5f5;
-}
-
-.album-image-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.album-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.album-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
-  color: #fff;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 </style>