Refactor(商品详情):规格是否无库存通过接口查询

components/ProductWindow.vue

@@ -2,27 +2,27 @@
   <view>
     <view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
       <view class="textpic acea-row row-between-wrapper">
-        <view class="pictrue" @click="previewImg(attr.productSelect.image)">
-          <image :src="attr.productSelect.image" class="image" />
+        <view class="pictrue" @click="previewImg(attrObj.productSelect.image)">
+          <image :src="attrObj.productSelect.image" class="image" />
         </view>
         <view class="text">
           <view class="money font-color-lightred v12-font-">
             ￥
-            <text class="num v12-font-40">{{ attr.productSelect.price }}</text>
+            <text class="num v12-font-40">{{ attrObj.productSelect.price }}</text>
             <text class="v12-ml-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">￥</text>
-            <text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attr.productSelect.otPrice }}</text>
+            <text class="v12-mr-2 v12-font-weight-300 v12-font-22" style="color: #BBBBBB; text-decoration: line-through;">{{ attrObj.productSelect.otPrice }}</text>
             <text class="v12-white-text v12-red v12-font-22 v12-radius-40 v12-px-1 v12-font-weight-400">会员价</text>
-            <!-- <text class="stock">库存: {{ attr.productSelect.stock }}</text> -->
+            <!-- <text class="stock">库存: {{ attrObj.productSelect.stock }}</text> -->
           </view>
-          <view class="more-t">{{ attr.productSelect.store_name }}</view>
+          <view class="more-t">{{ attrObj.productSelect.store_name }}</view>
         </view>
         <view class="iconfont icon-guanbi" @click="closeAttr"></view>
       </view>
       <view class="productWinList">
         <view
-          class="item"
-          v-for="(item, index) in attr.productAttr"
+          v-for="(item, index) in attrObj.productAttr"
           :key="index"
+          class="item"
         >
           <view class="title">{{ item.attrName }}</view>
           <view class="listn acea-row v12-justify-start">
@@ -30,7 +30,7 @@
               v-for="(subItem, subIndex) in item.attrValue"
               :key="subIndex"
               :class="{
-                'actived': item.index == subIndex,
+                'actived': subItem.check,
                 'disabled': !subItem.canUsed
               }"
               class="itemn v12-radius-40"
@@ -51,7 +51,7 @@
             style="border-radius:0 40rpx 40rpx 0"
             class="item plus v12-font-bold v12-white-text v12-primary v12-primary-border  v12-font-36 cart-btn"
             :class="
-              cartNum >= attr.productSelect.stock
+              cartNum >= attrObj.productSelect.stock
                 ? 'on'
                 : ''
             "
@@ -75,23 +75,29 @@ export default {
         }
       }
     },
-    // 使用字符串再转成对象的原因是，当key='2.5g'时，会变成key='2'，导致数据丢失
-    productValueStr: {
-      type: String,
-      default: '{}'
-    },
-    productValueArr: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
     cartNum: {
       type: Number,
       default: () => 1
     }
   },
+  data() {
+    return {
+      attrObj: {
+        productSelect: {},
+        productAttr: []
+      }
+    }
+  },
+  created() {
+    this.$set(this, 'attrObj', JSON.parse(JSON.stringify(this.attr)))
+    console.log(this.attrObj)
+  },
   methods: {
+    reRender(data) {
+      this.$set(this, 'attrObj', JSON.parse(JSON.stringify(data)))
+      // console.log(this.attrObj.productAttr)
+      this.$forceUpdate()
+    },
 	  previewImg(imgUrl) {
 		  uni.previewImage({
 		  	urls:[imgUrl]
@@ -108,14 +114,15 @@ export default {
     },
     tapAttr(index, subIndex, subItem) {
       // 缺货的点击了没效果
-      if (!subItem.canUsed) {
+      if (!subItem.canUsed || subItem.check) {
         return
       }
-      // 修改商品规格不生效的原因：
-      // H5端下面写法，attr更新，但是除H5外其他端不支持，
-      // 尽量避免下面的骚写法，不要在子组件内更新props
-      // 这里修改是为了能获取到被选中的属性
-      this.attr.productAttr[index].index = subIndex
+      this.attrObj.productAttr[index].attrValue.map((subItem, subIdx) => {
+        subItem.check= false
+        if (subIndex === subIdx) {
+          subItem.check = true
+        }
+      })
       const value = this.getCheckedValue().sort().join(",")
       this.$emit("changeFun", {
         action: "ChangeAttr",
@@ -128,15 +135,15 @@ export default {
     },
     // 获取被选中属性
     getCheckedValue() {
-      const productAttr = this.attr.productAttr
+      const productAttr = this.attrObj.productAttr
       const value = []
-      for (let i = 0; i < productAttr.length; i++) {
-        for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
-          if (productAttr[i].index === j) {
-            value.push(productAttr[i].attrValueArr[j])
+      productAttr.map(item => {
+        item.attrValue.map(subItem => {
+          if (subItem.check) {
+            value.push(subItem.attr)
           }
-        }
-      }
+        })
+      })
       return value
     }
   }