修改颜色轮播图改变

pages/product-detail/components/DetailSwiper.vue

@@ -5,6 +5,7 @@
       class="swiper"
       :circular="true"
       :indicator-dots="false"
+      :current="current"
       @change="onChange"
     >
       <swiper-item v-for="(item, index) in images" :key="index">
@@ -40,6 +41,12 @@ export default {
       current: 0
     }
   },
+  watch: {
+    images() {
+      // 切换图片数组时重置指示点到第一张
+      this.current = 0
+    }
+  },
   methods: {
     onChange(e) {
       this.current = e.detail.current

pages/product-detail/product-detail.vue

@@ -90,6 +90,10 @@ export default {
       sizeChart: {},
       // 变体列表（来自接口 variants），用于校验尺码+颜色组合、获取价格、包装规格
       variants: [],
+      // 按颜色分组的图片映射：{ [colorId]: [url, ...] }（来自 detail.mediaByColor）
+      mediaByColor: {},
+      // 默认轮播图（无颜色或 mediaByColor 缺失时使用，来自 detail.media.images）
+      defaultImages: [],
       packaging: null
     }
   },
@@ -135,20 +139,24 @@ export default {
         ]
       }
 
-      // 2. 图片画廊：按 sortOrder 升序，首图置顶
+      // 2. 图片画廊：
+      //  - defaultImages：来自 detail.media.images（按 sortOrder 升序，首图置顶）
+      //  - mediaByColor：来自 detail.mediaByColor，结构 [{ colorId, colorName, colorHex, images:[url,...] }]
+      //  顶部轮播优先显示选中颜色对应的图片；mediaByColor 缺失或当前颜色无图时回退到 defaultImages
       const media = detail.media || {}
-      let images = (media.images || [])
+      let defaultImages = (media.images || [])
         .slice()
         .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
         .map((img) => img.url)
         .filter((url) => url)
-      if (media.primaryImageUrl && images.indexOf(media.primaryImageUrl) === -1) {
+      if (media.primaryImageUrl && defaultImages.indexOf(media.primaryImageUrl) === -1) {
-        images.unshift(media.primaryImageUrl)
+        defaultImages.unshift(media.primaryImageUrl)
       }
-      if (!images.length && detail.image) {
+      if (!defaultImages.length && detail.image) {
-        images.push(detail.image)
+        defaultImages.push(detail.image)
       }
-      this.productImages = images
+      this.defaultImages = defaultImages
+      this.mediaByColor = this.buildMediaByColor(detail.mediaByColor)
 
       // 3. 颜色：仅取启用项，按 sortOrder 升序
       const colors = ((detail.options && detail.options.colors) || [])
@@ -182,6 +190,38 @@ export default {
 
       // 9. 初始价格（按默认选中的 尺码+颜色 匹配变体价格）
       this.syncPriceByVariant()
+
+      // 10. 初始轮播图（按默认选中颜色取 mediaByColor，无则回退 defaultImages）
+      this.syncImagesByColor()
+    },
+
+    /**
+     * 将接口 mediaByColor 数组转为 colorId -> [url] 映射
+     * 入参：[{ colorId, colorName, colorHex, images:[url,...] }]
+     * 出参：{ '1126198': [url, ...], ... }
+     */
+    buildMediaByColor(list) {
+      const map = {}
+      if (Array.isArray(list)) {
+        list.forEach((item) => {
+          if (!item || item.colorId == null) return
+          const imgs = Array.isArray(item.images) ? item.images.filter((u) => u) : []
+          if (imgs.length) map[String(item.colorId)] = imgs
+        })
+      }
+      return map
+    },
+
+    /**
+     * 按当前 selectedColorId 同步顶部轮播图：
+     * - 若 mediaByColor 命中且该颜色有图，则使用该颜色的图片数组
+     * - 否则回退到 defaultImages
+     */
+    syncImagesByColor() {
+      const colorId = this.selectedColorId
+      const byColor = this.mediaByColor || {}
+      const imgs = colorId && byColor[String(colorId)] ? byColor[String(colorId)] : this.defaultImages
+      this.productImages = (imgs || []).slice()
     },
 
     /**
@@ -338,6 +378,7 @@ export default {
      */
     selectColor(id) {
       this.selectedColorId = id
+      this.syncImagesByColor()
       this.syncPriceByVariant()
     },
     /**