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

pages/shop/GoodsCon/index.vue

@@ -455,8 +455,8 @@
         
         <ProductWindow
           v-if="productValueArr.length > 0"
+          ref="attrWindow"
           :attr="attr"
-          :product-value-arr="productValueArr"
           :cartNum="cart_num"
           @changeFun="changeFun"
         />
@@ -1119,15 +1119,22 @@ export default {
     // 默认选中属性
     DefaultSelect() {
       const productAttr = this.attr.productAttr
-      for (let i = 0; i < productAttr.length; i++) {
-        this.$set(productAttr[i], "index", this.attr.defaultSkuIndex[i])
-      }
+      const productAttrLength = productAttr.length
+      this.attr.productAttr.map((item, index) => {
+        item.attrValue.map((subItem, subIndex) => {
+          if (this.attr.defaultSkuIndex[index] === subIndex) {
+            subItem.check = true
+          } else {
+            subItem.check = false
+          }
+        })
+      })
       const skuKey = (this.attr.defaultSku || []).join(',')
       if (!skuKey) {
         return
       }
       const productSelect = this.getAttrItemData(skuKey)
-      if (productSelect && productAttr.length) {
+      if (productSelect && productAttrLength) {
         this.$set(
           this.attr.productSelect,
           'store_name',
@@ -1143,7 +1150,7 @@ export default {
         this.$set(this, 'attrValue', skuKey)
         this.$set(this, 'attrTxt', '已选择')
         this.getSkuActiveStatus(skuKey)
-      } else if (!productSelect && productAttr.length) {
+      } else if (!productSelect && productAttrLength) {
         this.$set(
           this.attr.productSelect,
           'store_name',
@@ -1157,7 +1164,7 @@ export default {
         this.$set(this.attr.productSelect, 'cart_num', 0)
         this.$set(this, 'attrValue', '')
         this.$set(this, 'attrTxt', '请选择')
-      } else if (!productSelect && !productAttr.length) {
+      } else if (!productSelect && !productAttrLength) {
         this.$set(
           this.attr.productSelect,
           'store_name',
@@ -1233,6 +1240,7 @@ export default {
       this.attr.cartAttr = true
       this.isOpen = true
     },
+    // 关闭属性
     changeattr(msg) {
       // 修改了规格
       this.attr.cartAttr = msg
@@ -1240,11 +1248,16 @@ export default {
     },
     // 选择属性
     ChangeAttr(res) {
-      const value = res.value
+      const { index, subIndex, value } = res
       // 修改了规格
-      let productSelect = this.getAttrItemData(value)
+      const productSelect = this.getAttrItemData(value)
       if (productSelect) {
-        this.attr.productAttr[res.index].index = res.subIndex
+        this.attr.productAttr[index].attrValue.map((subItem, subIdx) => {
+          subItem.check= false
+          if (subIndex === subIdx) {
+            subItem.check = true
+          }
+        })
         this.$set(this.attr.productSelect, 'image', productSelect.image)
         this.$set(this.attr.productSelect, 'price', productSelect.price)
         this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
@@ -1267,7 +1280,7 @@ export default {
     },
     // 获取规格组是否能点击(右上角是否有缺货标识)
     getSkuActiveStatus(selectedSku) {
-      getProductSkuBySelected(this.id, { selectedSku }).then(res => {
+      getProductSkuBySelected({ id: this.id, selectedSku }).then(res => {
         const { success, data } = res
         if (success) {
           for (const key in data) {
@@ -1285,6 +1298,7 @@ export default {
               })
             }
           }
+          this.$refs.attrWindow.reRender(this.attr)
         }
       })
     },