商品详情规格图片切换轮播图显示规格图片业务功能完善

pages_category_page1/goodsModule/components/GoodActivityDetail.vue

@@ -393,12 +393,7 @@ export default {
     },
 
     switchSkuImage(index) {
-		 console.log('switchSkuImage-->', this.$refs.skuSwiper)
 		 this.swiperCurrent = index
-      // if (this.$refs.skuSwiper){
-      //   this.$refs.skuSwiper.$swiper.slideTo(index, 1000, false);
-      // }
-     
     }
   }
 }

pages_category_page1/goodsModule/components/GoodSkuSelect.vue

@@ -57,7 +57,7 @@
             <scroll-view class="scroll-view_H" scroll-x="true">
               <view class="sku-box" v-for="(skuColItem, skuColIndex) in skuRowItem.values"
                     :key="skuColIndex">
-                <view class="sku-image-item" @click="handleClickSkuItem(skuRowItem['nameCode'], skuColItem.valueCode)">
+                <view class="sku-image-item" @click="handleClickSkuItem(skuRowItem['nameCode'], skuColItem.valueCode,skuRowIndex,skuColIndex)">
                   <image class="sku-image" :class="{'sku-image-select' : selectedAttr[skuRowItem['nameCode']] === skuColItem.valueCode}"
                          :src="skuColItem.image ? skuColItem.image : defaultImageUrl" @error="onImageError"/>
                   <label class="sku-name" :class="{'sku-name-select' : selectedAttr[skuRowItem['nameCode']] === skuColItem.valueCode}"> {{ skuColItem.skuValue }}</label>
@@ -313,7 +313,7 @@ export default {
      * @param valueCode SKU列的valueCode
      * nameCodeValueCodeClick
      */
-    handleClickSkuItem(nameCode, valueCode) {
+    handleClickSkuItem(nameCode, valueCode, rowIndex, colIndex) {
       // 当前选中
       this.$set(this.selectedAttr, nameCode, valueCode)
       // 获取到所有的sku的values.valueCode
@@ -340,6 +340,7 @@ export default {
         }
       }
 
+      this.$emit('skuImageSelect', rowIndex, colIndex)
     },
 
     //有逗号分隔的字符串，不分先后顺序判断

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, skuImgIndex)"
+          <image class="sku-image" :class="{'sku-image-select' : skuImgItem.valueCode === selectedAttr[productData.names[0].nameCode]}" @click="handleClickSku(productData.names[0].nameCode, skuImgItem.valueCode, 0, skuImgIndex)"
                  :src="skuImgItem.image ? skuImgItem.image: defaultImageUrl" @error="onImageError"/>
         </block>
 
@@ -342,6 +342,7 @@
         @postSelectSku="selectSkuPostProcessor"
         @getCurrentSku="handleSelectSku"
         @changeCartNum="(num)=>allCartNum = num"
+        @skuImageSelect="switchSkuImage"
     />
     <!-- 优惠券选择器 -->
     <coupon-popup
@@ -474,6 +475,7 @@ export default {
       },
       defaultImageUrl: 'http://36.138.125.206:8081/ceres-local-file/image/sku_default.png',
       selectedAttr: {},
+      skuImages: []
     }
   },
   created() {
@@ -750,15 +752,14 @@ export default {
           }
         }
 
-        const skuImages = []
         for (const valueCode of this.productData.names[0].values){
           if (valueCode.image) {
-            skuImages.push(valueCode.image)
+            this.skuImages.push(valueCode.image)
           }
         }
-        if (skuImages.length > 0) {
+        if (this.skuImages.length > 0) {
           //若规格有图片，则商品轮播图改为规格图片
-          this.productData.images = skuImages
+          this.productData.images = this.skuImages
         }
 
         // 评价
@@ -844,10 +845,15 @@ export default {
       (await Services(this.shopId)).flyToService()
     },
 
-    handleClickSku(nameCode, valueCode, index) {
-      this.$refs.skuSelect.handleClickSkuItem(nameCode,valueCode)
+    handleClickSku(nameCode, valueCode, rowIndex, colIndex) {
+      this.$refs.skuSelect.handleClickSkuItem(nameCode, valueCode, rowIndex, colIndex)
       this.selectedAttr = this.$refs.skuSelect.selectedAttr
-      this.$refs.goodActivityDetail.switchSkuImage(index)
+    },
+
+    switchSkuImage(rowIndex, colIndex) {
+      if (this.skuImages.length > 0 && rowIndex === 0) {
+        this.$refs.goodActivityDetail.switchSkuImage(colIndex)
+      }
     },
 
     onImageError(e) {