商城H5端多组规格切换显示问题解决

config/api.js

@@ -1,8 +1,8 @@
 //默认打开商家
 const default_project = 0
 
-//const DOMAIN_PREFIX = 'http://127.0.0.1:9007'
-const DOMAIN_PREFIX = 'http://36.138.125.206:8081/ceres-app-api'
+const DOMAIN_PREFIX = 'http://127.0.0.1:9007'
+//const DOMAIN_PREFIX = 'http://36.138.125.206:8081/ceres-app-api'
 // const DOMAIN_PREFIX = 'https://http://36.138.125.206:8081/ceres-local-filehnthee.com/ceres-app-api'
 
 // const DOMAIN_PREFIX = 'https://ceres.zkthink.com/api'

pages_category_page1/goodsModule/components/GoodSkuSelect.vue

@@ -329,7 +329,12 @@ export default {
       // 遍历后端数据
       for (const allSkuValueGroupMapKey in allSkuValueGroupMap) {
         // 当和当前选中的sku一致
-        if (nowSelectSkuValueGroupKey === allSkuValueGroupMapKey) {
+       /* if (nowSelectSkuValueGroupKey === allSkuValueGroupMapKey) {
+          this.selectedSku = allSkuValueGroupMap[allSkuValueGroupMapKey]
+          this.echoFatherRowText(this.productData, this.selectedSku, this.buyNum)
+        }*/
+
+        if (this.isEqual(nowSelectSkuValueGroupKey, allSkuValueGroupMapKey)) {
           this.selectedSku = allSkuValueGroupMap[allSkuValueGroupMapKey]
           this.echoFatherRowText(this.productData, this.selectedSku, this.buyNum)
         }
@@ -337,6 +342,26 @@ export default {
 
     },
 
+    //有逗号分隔的字符串，不分先后顺序判断
+    isEqual(a, b) {
+      let c = a.split(','), d = b.split(',');
+      if (c.length != d.length) {
+        return false;
+      }
+      for (let i = 0; i < c.length; i++) {
+        let isMatch = false;
+        for (let j = 0; j < d.length; j++) {
+          if (c[i] == d[j]) {
+            isMatch = true;
+            break;
+          }
+        }
+        if (!isMatch) {
+          return false;
+        }
+      }
+      return true;
+    },
     /**
      * 回显父组件（通讯）
      * @param productData 当前商品对象

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 === selectedSku.valueCodes}" @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)"
                  :src="skuImgItem.image ? skuImgItem.image: defaultImageUrl" @error="onImageError"/>
         </block>
 
@@ -472,7 +472,8 @@ export default {
           productIds: '',
         }
       },
-      defaultImageUrl: 'http://36.138.125.206:8081/ceres-local-file/image/sku_default.png'
+      defaultImageUrl: 'http://36.138.125.206:8081/ceres-local-file/image/sku_default.png',
+      selectedAttr: {},
     }
   },
   created() {
@@ -763,11 +764,13 @@ export default {
         this.$nextTick(async () => {
           if (this.paramSkuId) {
             this.$refs.skuSelect.handleSelectBySkuId(this.paramSkuId)
+            this.selectedAttr = this.$refs.skuSelect.selectedAttr
           } else {
             // 默认选中第0个
             for (const skuRowItem of this.productData.names) {
               this.$refs.skuSelect.handleClickSkuItem(skuRowItem.nameCode, skuRowItem.values[0].valueCode)
             }
+            this.selectedAttr = this.$refs.skuSelect.selectedAttr
           }
           //如果是拼团，设置拼团id
           if (this.productData.activityType === 1) {
@@ -831,6 +834,7 @@ export default {
 
     handleClickSku(nameCode, valueCode) {
       this.$refs.skuSelect.handleClickSkuItem(nameCode,valueCode)
+      this.selectedAttr = this.$refs.skuSelect.selectedAttr
     },
 
     onImageError(e) {