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

api/store.js

@@ -28,8 +28,8 @@ export function getProductDetail(id, data) {
 /*
  * 商品规格选中
  * */
-export function getProductSkuBySelected(id, data) {
+export function getProductSkuBySelected(data) {
-    return request.get("api/product/getSkuBySelected/" + id, data, {
+    return request.post("/product/getSkuBySelected", data, {
         login: true
     });
 }

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)">
+        <view class="pictrue" @click="previewImg(attrObj.productSelect.image)">
-          <image :src="attr.productSelect.image" class="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 attrObj.productAttr"
-          v-for="(item, index) in attr.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
       }
-      // 修改商品规格不生效的原因：
+      this.attrObj.productAttr[index].attrValue.map((subItem, subIdx) => {
-      // H5端下面写法，attr更新，但是除H5外其他端不支持，
+        subItem.check= false
-      // 尽量避免下面的骚写法，不要在子组件内更新props
+        if (subIndex === subIdx) {
-      // 这里修改是为了能获取到被选中的属性
+          subItem.check = true
-      this.attr.productAttr[index].index = subIndex
+        }
+      })
       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++) {
+      productAttr.map(item => {
-        for (let j = 0; j < productAttr[i].attrValueArr.length; j++) {
+        item.attrValue.map(subItem => {
-          if (productAttr[i].index === j) {
+          if (subItem.check) {
-            value.push(productAttr[i].attrValueArr[j])
+            value.push(subItem.attr)
           }
-        }
+        })
-      }
+      })
       return value
     }
   }

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++) {
+      const productAttrLength = productAttr.length
-        this.$set(productAttr[i], "index", this.attr.defaultSkuIndex[i])
+      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)
         }
       })
     },