修复商品列表滚动错误

pages/index/index.vue

@@ -3,8 +3,12 @@
     <!-- Hero 首屏 -->
     <HeroBanner :stats="trustStats" />
 
-    <!-- 4步流程 -->
-    <StepsFlow :steps="stepList" />
+    <!-- 4步流程（active 由页面统一管理，跟下面 PlatformFeatures 共用同一个定时器） -->
+    <StepsFlow
+      :steps="stepList"
+      :active="currentStep"
+      @change="onStepChange"
+    />
 
     <!-- 全球POD货盘 -->
     <PodCatalog
@@ -15,8 +19,12 @@
       @productTap="onGoDetail"
     />
 
-    <!-- 平台功能 + 集成平台 -->
-    <PlatformFeatures :features="featureList" />
+    <!-- 平台功能 + 集成平台（active 由页面统一管理，跟上面 StepsFlow 共用同一个定时器） -->
+    <PlatformFeatures
+      :features="featureList"
+      :active="currentFeat"
+      @change="onFeatChange"
+    />
 
     <!-- 为什么选择 -->
     <WhyChoose :reasons="reasonList" />
@@ -45,6 +53,9 @@ import {
   companyFeatures
 } from './mock.js'
 
+// 统一轮播间隔：3 秒推进一次，同时驱动 StepsFlow + PlatformFeatures
+const AUTO_PLAY_INTERVAL = 3000
+
 export default {
   components: {
     HeroBanner,
@@ -62,13 +73,28 @@ export default {
       reasonList,
       companyFeatures,
       podCountries: [],
-      podProducts: []
+      podProducts: [],
+      // 两个区块共用一个定时器，但各自独立轮播（互不干扰）
+      currentStep: 0,
+      currentFeat: 0,
+      _autoPlayTimer: null  // 唯一一个定时器
     }
   },
   async onLoad() {
     await this.loadPodCountries()
     await this.loadPodProducts('')
   },
+  onShow() {
+    // 页面显示 → 启动轮播
+    this.startAutoPlay()
+  },
+  onHide() {
+    // 页面隐藏 → 回收定时器（切 Tab、跳详情、退后台等）
+    this.stopAutoPlay()
+  },
+  onUnload() {
+    this.stopAutoPlay()
+  },
   methods: {
     async loadPodCountries() {
       try {
@@ -117,6 +143,59 @@ export default {
       uni.navigateTo({
         url: '/pages/product-detail/product-detail?id=' + item.id
       })
+    },
+
+    /* ============================
+     * 统一轮播控制（单一入口）
+     * ============================ */
+
+    /**
+     * 启动统一轮播：单一 setInterval，3 秒一次，
+     * 同时推进 StepsFlow 的 currentStep 和 PlatformFeatures 的 currentFeat。
+     * 两个组件的 active 各自 mod 自己的 length，互不干扰。
+     */
+    startAutoPlay() {
+      this.stopAutoPlay()
+      this._autoPlayTimer = setInterval(() => {
+        const stepTotal = (this.stepList || []).length
+        const featTotal = (this.featureList || []).length
+        if (stepTotal > 1) {
+          this.currentStep = (this.currentStep + 1) % stepTotal
+        }
+        if (featTotal > 1) {
+          this.currentFeat = (this.currentFeat + 1) % featTotal
+        }
+      }, AUTO_PLAY_INTERVAL)
+    },
+
+    /**
+     * 回收定时器：onHide / onUnload 时调用，避免后台运行浪费资源
+     */
+    stopAutoPlay() {
+      if (this._autoPlayTimer) {
+        clearInterval(this._autoPlayTimer)
+        this._autoPlayTimer = null
+      }
+    },
+
+    /**
+     * 用户点击 StepsFlow 卡片：
+     * 先停定时器 → 更新 currentStep → 重启 3s 计数
+     * （同时 currentFeat 的计数被重置也无妨，体验上完全可接受）
+     */
+    onStepChange(idx) {
+      this.stopAutoPlay()
+      this.currentStep = idx
+      this.startAutoPlay()
+    },
+
+    /**
+     * 用户点击 PlatformFeatures 卡片：同上逻辑，函数复用
+     */
+    onFeatChange(idx) {
+      this.stopAutoPlay()
+      this.currentFeat = idx
+      this.startAutoPlay()
     }
   }
 }