移动端商品详情轮播图处理为存在规格图片时，替换为规格图片业务

pages_category_page1/goodsModule/components/GoodActivityDetail.vue

@@ -9,6 +9,7 @@
   <view class="prod-box">
     <!-- 商品详情 -->
     <swiper
+      ref="skuSwiper"
         class="goodsImgswiper-box "
         :indicator-dots="true"
         :autoplay="true"
@@ -206,10 +207,12 @@ import { TimeFormatting } from "../../../utils/timeUtil";
 import NET from "../../../utils/request";
 import API from "../../../config/api";
 import shareSpell from '../../../component/share.vue'
+import {Swiper, SwiperSlide} from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
 
 export default {
   name: "GoodActivityDetail",
-  components: {shareSpell},
+  components: {shareSpell, Swiper, SwiperSlide},
   data() {
     return {
       // 活动倒计时
@@ -232,6 +235,7 @@ export default {
         ],
         actionShow: false
       },
+      skuImgSwiper: null
     }
   },
   props: {
@@ -258,6 +262,7 @@ export default {
       default: () => ([])
     }
   },
+
   methods: {
     /**
      * 初始化活动倒计时
@@ -302,7 +307,6 @@ export default {
       this.$emit('couponClick')
     },
 
-
     /**
      * 收藏
      */
@@ -385,6 +389,13 @@ export default {
         this.$refs.shareSpell.shareShow = true
       }
     },
+
+    switchSkuImage(index) {
+      if (this.$refs.skuSwiper){
+        this.$refs.skuSwiper.$swiper.slideTo(index, 1000, false);
+      }
+      console.log('switchSkuImage-->', this.$refs.skuSwiper)
+    }
   }
 }
 </script>

pages_category_page1/goodsModule/goodsDetails.vue

@@ -94,7 +94,7 @@
       <view class="sku-image-box">
         <!--规格图片遍历处理最大只显示4个-->
         <block v-for="(skuImgItem,skuImgIndex) in productData.names[0].values" :key="skuImgIndex">
-          <image class="sku-image" :class="{'sku-image-select' : skuImgItem.valueCode === selectedAttr[productData.names[0].nameCode]}" @click="handleClickSku(productData.names[0].nameCode, skuImgItem.valueCode)"
+          <image class="sku-image" :class="{'sku-image-select' : skuImgItem.valueCode === selectedAttr[productData.names[0].nameCode]}" @click="handleClickSku(productData.names[0].nameCode, skuImgItem.valueCode, skuImgIndex)"
                  :src="skuImgItem.image ? skuImgItem.image: defaultImageUrl" @error="onImageError"/>
         </block>
 
@@ -729,6 +729,7 @@ export default {
         this.isFirstComeIn = false
         this.loading = false
         this.productData = res.data
+        console.log('productData-->', this.productData)
         this.markTools = res.data.markTools //平台优惠券
         this.shopMarkTools = res.data.shopMarkTools //店铺优惠券
         this.currentActive = this.markTools.length === 0 && this.shopMarkTools.length > 0 ? 1 : 0
@@ -749,6 +750,17 @@ export default {
           }
         }
 
+        const skuImages = []
+        for (const valueCode of this.productData.names[0].values){
+          if (valueCode.image) {
+            skuImages.push(valueCode.image)
+          }
+        }
+        if (skuImages.length > 0) {
+          //若规格有图片，则商品轮播图改为规格图片
+          this.productData.images = skuImages
+        }
+
         // 评价
         this.commentList = res.data.comments
         // 宝贝详情
@@ -832,9 +844,10 @@ export default {
       (await Services(this.shopId)).flyToService()
     },
 
-    handleClickSku(nameCode, valueCode) {
+    handleClickSku(nameCode, valueCode, index) {
       this.$refs.skuSelect.handleClickSkuItem(nameCode,valueCode)
       this.selectedAttr = this.$refs.skuSelect.selectedAttr
+      this.$refs.goodActivityDetail.switchSkuImage(index)
     },
 
     onImageError(e) {