修复商品列表滚动错误

pages/index/components/StepsFlow.vue

@@ -3,12 +3,19 @@
   <view class="steps-section">
     <text class="section-title">4步开始你的按需定制生意</text>
 
-    <!-- 步骤卡片横向滚动 -->
-    <scroll-view scroll-x class="steps-scroll" show-scrollbar="false">
+    <!-- 步骤卡片横向滚动
+         受控模式：active 由父组件管理；scroll-left 跟随 active 把选中卡片尽量滚到左边 -->
+    <scroll-view
+      scroll-x
+      class="steps-scroll"
+      show-scrollbar="false"
+      :scroll-left="stepsScrollLeft"
+      :scroll-with-animation="true"
+    >
       <view class="steps-list">
         <view
           class="step-card"
-          :class="{ active: activeStep === index }"
+          :class="{ active: active === index }"
           v-for="(item, index) in steps"
           :key="index"
           @tap="onStepTap(index)"
@@ -22,11 +29,12 @@
       </view>
     </scroll-view>
 
-    <!-- 预览大图 - image 25 370x370 6px圆角 -->
+    <!-- 预览大图 - image 25 370x370 6px圆角
+         跟随 active 联动切换，4 步分别对应一张图（占位时同图，设计师供图后改 mock.js） -->
     <view class="preview-wrap">
       <image
         class="preview-img"
-        src="/static/images/home/image_25_1484_1689.png"
+        :src="previewImg"
         mode="widthFix"
       ></image>
     </view>
@@ -34,23 +42,63 @@
 </template>
 
 <script>
+// 卡片尺寸常量，用于计算 scroll-left（与 CSS 保持一致）
+// CSS: .step-card { width:332rpx }, .steps-list gap:16rpx
+// 1rpx = 0.5px → 单卡步长 = (332 + 16) * 0.5 = 174px
+const CARD_STEP_PX = (332 + 16) * 0.5  // 174
+
 export default {
   name: 'StepsFlow',
   props: {
     steps: {
       type: Array,
       default: () => []
+    },
+    // 受控 active：由父组件（index.vue 的统一轮播定时器）传入
+    active: {
+      type: Number,
+      default: 0
     }
   },
   data() {
     return {
-      activeStep: 0
+      stepsScrollLeft: 0
+    }
+  },
+  computed: {
+    previewImg() {
+      const s = this.steps[this.active]
+      return (s && s.img) || ''
+    }
+  },
+  watch: {
+    active(idx) {
+      // active 变化（无论是自动轮播还是手动点击）都把选中卡片尽量滚到左边
+      this.scrollToCard(idx)
     }
   },
   methods: {
     onStepTap(index) {
-      this.activeStep = index
+      // 子组件不再自管 state，只 emit 给父组件
       this.$emit('change', index)
+    },
+
+    /**
+     * 把第 idx 张卡片「尽量」滚到左边贴边。
+     * scroll-view 的 scroll-left 超出最大可滚值时会自动截断，
+     * 因此最后几张卡片虽然无法真正贴左，但已经是「最接近左侧」的位置。
+     */
+    scrollToCard(idx) {
+      const target = Math.max(0, idx) * CARD_STEP_PX
+      // 处理 0→0 无变化不触发滚动的情况
+      if (this.stepsScrollLeft === target) {
+        this.stepsScrollLeft = target + 0.001
+        this.$nextTick(() => {
+          this.stepsScrollLeft = target
+        })
+      } else {
+        this.stepsScrollLeft = target
+      }
     }
   }
 }
@@ -86,7 +134,7 @@ export default {
   display: inline-flex;
   gap: 16rpx;
 }
-/* 卡片 - 166x80 圆角6px */
+/* 卡片 - 166x80 圆角6px (332rpx × 160rpx) */
 .step-card {
   flex-shrink: 0;
   width: 332rpx;