修复商品选择sku时会已选择项会打乱的问题

mall4uni/pages/prod/prod.vue

@@ -1,6 +1,6 @@
 <template>
-<!-- 商品详情 -->
+  <!-- 商品详情 -->
-<view class="container">
+  <view class="container">
     <!-- 轮播图 -->
     <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration" :indicator-active-color="indicatorActiveColor">
       <block v-for="(item, index) in imgs" :key="index">
@@ -151,14 +151,23 @@
         </view>
         <view class="pup-sku-body">
           <view class="pup-sku-area">
-          <block v-for="(value, key) in skuGroup" :key="key">
+            <view class="sku-box" v-if="skuList.length">
-            <view class="sku-kind">{{key}}</view>
+        <block v-for="(skuGroupItem, skuGroupItemIndex) in skuGroupList" :key="skuGroupItemIndex">
-            <view class="sku-choose">
+          <view class="items sku-text" v-for="(skuLine, key) in skuGroupItem" :key="key">
-              <block v-for="(item, index) in value" :key="index">
+            <text class="sku-kind">{{key}}</text>
-                <text :class="'sku-choose-item ' + (wxs.array_contain(selectedProp,item)?'active':'') + ' ' + (wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)?'':'gray')" :data-ok="wxs.props_contain(allProperties,selectedPropObj,key,item,propKeys)" @tap="toChooseItem" :data-key="key" :data-val="item">{{item}}</text>
+            <view class="con">
-              </block>
+              <text
+                v-for="skuLineItem in skuLine"
+                :key="skuLineItem"
+                class="sku-choose-item"
+                :class="[selectedPropList.indexOf(key + ':' + skuLineItem) !== -1?'active':'',
+                  isSkuLineItemNotOptional(allProperties,selectedPropObj,key,skuLineItem,propKeys)? 'dashed' : '']"
+                @click="toChooseItem(skuGroupItemIndex, skuLineItem, key)"
+              >{{skuLineItem}}</text>
+            </view>
           </view>
             </block>
+        </view>
           </view>
           <view class="pup-sku-count">
             <view class="num-wrap">
@@ -226,21 +235,21 @@
         </view>
       </view>
     </view>
-</view>
+  </view>
-</template>
+  </template>
   
-<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
+  <script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>
   
-<script>
+  <script>
-// pages/prod/prod.js
+  // pages/prod/prod.js
-const app = getApp();
+  const app = getApp();
-var http = require("../../utils/http.js");
+  var http = require("../../utils/http.js");
-var config = require("../../utils/config.js");
+  var config = require("../../utils/config.js");
-var util = require("../../utils/util.js");
+  var util = require("../../utils/util.js");
-import coupon from "../../components/coupon/coupon";
+  import coupon from "../../components/coupon/coupon";
-// import vanRate from "../../vant/rate/index";
+  // import vanRate from "../../vant/rate/index";
   
-export default {
+  export default {
     data() {
       return {
         shopId: 1,
@@ -282,7 +291,9 @@ export default {
         },
         littleCommPage: [],
         evaluate: -1,
-      isCollection: false
+        isCollection: false,
+      findSku: true,
+      skuGroupList: []
       };
     },
   
@@ -415,7 +426,6 @@ export default {
               }, 1000);
               return
             }
-          //console.log(res);
             var imgStrs = res.imgs;
             var imgs = imgStrs.split(",");
             var content = util.formatHtml(res.content);
@@ -429,11 +439,11 @@ export default {
               // skuId: res.skuId
               skuList: res.skuList,
               pic: res.pic
-          }); // 获取优惠券
+            }); 
+        // 获取优惠券
             //this.getCouponList();
             // 组装sku
-
+        this.groupSkuProp(res.skuList, res.price);
-          this.groupSkuProp();
             uni.hideLoading();
           }
         };
@@ -451,7 +461,6 @@ export default {
             this.setData({
               prodCommData: res
             });
-          console.log('评论prodCommData:', this.prodCommData)
           }
         });
       },
@@ -536,120 +545,142 @@ export default {
         });
       },
   
-    //根据sku的属性 分组
+      /**
-    groupSkuProp: function () {
+     * 组装SKU
-      var skuList = this.skuList;
+     */
-
+    groupSkuProp(skuList, defaultPrice) {
-      if (skuList.length == 1 && skuList[0].properties == "") {
+      if (skuList.length == 1 && !skuList[0].properties) {
-        this.setData({
+        this.defaultSku = skuList[0]
-          defaultSku: skuList[0]
+        this.findSku = true
-        });
         return;
       }
+      let skuGroupList = []
+      let skuGroup = {}
+      let allProperties = []
+      let propKeys = []
+      let selectedPropObj = {}
+      let selectedPropObjList = []
   
-      var skuGroup = {};
+      var defaultSku = null;
-      var allProperties = [];
-      var propKeys = [];
-
       for (var i = 0; i < skuList.length; i++) {
-        var defaultSku = this.defaultSku;
         var isDefault = false;
-
+        if (!defaultSku && skuList[i].price == defaultPrice) {
-        if (!defaultSku && skuList[i].price == this.price) {
-          //找到和商品价格一样的那个SKU，作为默认选中的SKU
           defaultSku = skuList[i];
           isDefault = true;
-          this.setData({
-            defaultSku: defaultSku
-          });
         }
-
         var properties = skuList[i].properties; //版本:公开版;颜色:金色;内存:64GB
-
         allProperties.push(properties);
         var propList = properties.split(";"); // ["版本:公开版","颜色:金色","内存:64GB"]
-
-        var selectedPropObj = this.selectedPropObj;
-
         for (var j = 0; j < propList.length; j++) {
           var propval = propList[j].split(":"); //["版本","公开版"]
-
           var props = skuGroup[propval[0]]; //先取出 版本对应的值数组
           //如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
-
           if (isDefault) {
             propKeys.push(propval[0]);
             selectedPropObj[propval[0]] = propval[1];
+            const selectedPropObjItem = {}
+            selectedPropObjItem[propval[0]] = propval[1]
+            selectedPropObjList.push(selectedPropObjItem)
           }
-
           if (props == undefined) {
             props = []; //假设还没有版本，新建个新的空数组
-
             props.push(propval[1]); //把 "公开版" 放进空数组
           } else {
-            if (!this.array_contain(props, propval[1])) {
+            if (props.indexOf(propval[1]) === -1) { //如果数组里面没有"公开版"
-              //如果数组里面没有"公开版"
               props.push(propval[1]); //把 "公开版" 放进数组
             }
           }
-
           skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值
+          const propListItem = {}
+          propListItem[propval[0]] = props
+          skuGroupList.push(propListItem)
         }
-
-        this.setData({
-          selectedPropObj: selectedPropObj,
-          propKeys: propKeys
-        });
       }
-
+      this.defaultSku = defaultSku
-      this.parseSelectedObjToVals();
+      this.propKeys = propKeys
-      this.setData({
+      this.selectedPropObj = selectedPropObj
-        skuGroup: skuGroup,
+      this.skuGroup = skuGroup
-        allProperties: allProperties
+      this.selectedPropObjList = selectedPropObjList
-      });
+      this.skuGroupList = this.unique(skuGroupList)
+      this.allProperties = allProperties
+      this.parseSelectedObjToVals(skuList);
+      this.$forceUpdate()
     },
-    //将已选的 {key:val,key2:val2}转换成 [val,val2]
+       /**
-    parseSelectedObjToVals: function () {
+     * 将已选的 {key:val,key2:val2}转换成 [val,val2]
-      var selectedPropObj = this.selectedPropObj;
+     */
-      var selectedProperties = "";
+    parseSelectedObjToVals: function(skuList) {
-      var selectedProp = [];
+      let selectedPropObjList = this.selectedPropObjList
-
+      let selectedProperties = ""
-      for (var key in selectedPropObj) {
+      let selectedPropList = []
-        selectedProp.push(selectedPropObj[key]);
+      let selectedPropShowList = []
-        selectedProperties += key + ":" + selectedPropObj[key] + ";";
+      for (let i = 0; i < selectedPropObjList.length; i++) {
-      }
+        const selectedPropObjItem = selectedPropObjList[i];
-
+        for (const key in selectedPropObjItem) {
-      selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1); // console.log(selectedProperties);
+          if (Object.hasOwnProperty.call(selectedPropObjItem, key)) {
-
+            selectedPropList.push(key + ':' + selectedPropObjItem[key])
-      this.setData({
+            selectedPropShowList.push(selectedPropObjItem[key])
-        selectedProp: selectedProp
+            selectedProperties += key + ":" + selectedPropObjItem[key] + ";"
-      });
+          }
-
+        }
-      for (var i = 0; i < this.skuList.length; i++) {
+      }
-        if (this.skuList[i].properties == selectedProperties) {
+      selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1)
-          this.setData({
+      this.selectedPropList = selectedPropList
-            defaultSku: this.skuList[i]
+      this.selectedPropShowList = selectedPropShowList
-          });
+      this.selectedProperties = selectedProperties
-          break;
+      this.selectedPropObjList = selectedPropObjList
+      var findSku = false
+      for (var i = 0; i < skuList.length; i++) {
+        if (skuList[i].properties == selectedProperties) {
+          findSku = true
+          this.defaultSku = skuList[i]
+          break
         }
       }
+      this.findSku = findSku
     },
-    //点击选择规格
+    /**
-    toChooseItem: function (e) {
+     * 判断当前的规格值 是否可以选
-      var ok = e.currentTarget.dataset.ok;
+     */
-
+    isSkuLineItemNotOptional(allProperties, selectedPropObj, key, item, propKeys) {
-      if (!ok) {
+      var selectedPropObj = Object.assign({}, selectedPropObj)
-        return;
+      var properties = "";
+      selectedPropObj[key] = item;
+      for (var j = 0; j < propKeys.length; j++) {
+        properties += propKeys[j] + ":" + selectedPropObj[propKeys[j]] + ";";
+      }
+      properties = properties.substring(0, properties.length - 1);
+      for (var i = 0; i < allProperties.length; i++) {
+        if (properties == allProperties[i]) {
+          return false;
         }
-
+      }
-      var val = e.currentTarget.dataset.val;
+      for (var i = 0; i < allProperties.length; i++) {
-      var key = e.currentTarget.dataset.key;
+        if (allProperties[i].indexOf(item) >= 0) {
-      var selectedPropObj = this.selectedPropObj;
+          return true;
-      selectedPropObj[key] = val;
+        }
-      this.setData({
+      }
-        selectedPropObj: selectedPropObj
+      return false;
-      });
+    },
-      this.parseSelectedObjToVals();
+      /**
+     * 规格点击事件
+     */
+    toChooseItem(skuGroupItemIndex ,skuLineItem, key) {
+      this.selectedPropObjList[skuGroupItemIndex][key] = skuLineItem
+      this.selectedPropObj[key] = skuLineItem;
+      this.parseSelectedObjToVals(this.skuList);
+    },
+    /**
+     * 去重
+     */
+    unique(arr) {
+      const map = {}
+      arr.forEach(item => {
+        const obj = {};
+        Object.keys(item).sort().map(key => obj[key] = item[key])
+        map[JSON.stringify(obj)] = item;
+      })
+      return Object.keys(map).map(key => JSON.parse(key))
     },
       //判断数组是否包含某对象
       array_contain: function (array, obj) {
@@ -698,7 +729,6 @@ export default {
             skuId: this.defaultSku.skuId
           },
           callBack: res => {
-          //console.log(res);
             this.setData({
               totalCartNum: this.totalCartNum + this.prodNum
             });
@@ -766,7 +796,6 @@ export default {
           data: {},
           callBack: couponIds => {
             var couponList = this.couponList;
-          console.log(couponList);
             couponList.forEach(coupon => {
               if (couponIds && couponIds.length) {
                 // 领取该优惠券数量
@@ -812,8 +841,8 @@ export default {
         });
       }
     }
-};
+  };
-</script>
+  </script>
-<style>
+  <style>
-@import "./prod.css";
+  @import "./prod.css";
-</style>
+  </style>