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

api/store.js

@@ -25,6 +25,15 @@ export function getProductDetail(id, data) {
     });
 }
 
+/*
+ * 商品规格选中
+ * */
+export function getProductSkuBySelected(id, data) {
+    return request.get("api/product/getSkuBySelected/" + id, data, {
+        login: true
+    });
+}
+
 /*
  * 商品分销二维码
  * */

components/ProductWindow.vue

@@ -19,21 +19,25 @@
         <view class="iconfont icon-guanbi" @click="closeAttr"></view>
       </view>
       <view class="productWinList">
-        <view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
+        <view
+          class="item"
+          v-for="(item, index) in attr.productAttr"
+          :key="index"
+        >
           <view class="title">{{ item.attrName }}</view>
           <view class="listn acea-row v12-justify-start">
             <view
-              v-for="(itemn, indexn) in item.attrValue"
+              v-for="(subItem, subIndex) in item.attrValue"
-              :key="indexn"
+              :key="subIndex"
               :class="{
-                'actived': item.index == indexn,
+                'actived': item.index == subIndex,
-                'disabled': getAttrItemData(itemn.attr).stock === 0
+                'disabled': !subItem.canUsed
               }"
               class="itemn v12-radius-40"
-              @click="tapAttr(indexw, indexn, itemn)"
+              @click="tapAttr(index, subIndex, subItem)"
             >
-              {{ itemn.attr }}
+              {{ subItem.attr }}
-                <text v-if="getAttrItemData(itemn.attr).stock === 0" class="less-tag" style="color: #fff !important;">缺货</text>
+              <text v-if="!subItem.canUsed" class="less-tag" style="color: #fff !important;">缺货</text>
             </view>
           </view>
         </view>
@@ -88,56 +92,42 @@ export default {
     }
   },
   methods: {
-	  previewImg:function(imgUrl){
+	  previewImg(imgUrl) {
 		  uni.previewImage({
 		  	urls:[imgUrl]
 		  })
 	  },
-    closeAttr: function() {
+    closeAttr() {
       this.$emit("changeFun", { action: "changeattr", value: false })
     },
-    CartNumDes: function() {
+    CartNumDes() {
       this.$emit("changeFun", { action: "ChangeCartNum", value: false })
     },
-    CartNumAdd: function() {
+    CartNumAdd() {
       this.$emit("changeFun", { action: "ChangeCartNum", value: 1 })
     },
-    getAttrItemData(attr) {
+    tapAttr(index, subIndex, subItem) {
-      let result = {
+      // 缺货的点击了没效果
-        stock: 0
+      if (!subItem.canUsed) {
-      }
-      if (this.attr.productAttr.length === 1) {
-        this.productValueArr.map(item => {
-          if (item.attrItemkey === attr) {
-            result = item
-          }
-        })
-      } else {
-        result.stock = 1
-      }
-      return result
-    },
-    tapAttr: function(indexw, indexn, itemn) {
-      if (this.getAttrItemData(itemn.attr).stock === 0) {
         return
       }
       // 修改商品规格不生效的原因：
       // H5端下面写法，attr更新，但是除H5外其他端不支持，
       // 尽量避免下面的骚写法，不要在子组件内更新props
       // 这里修改是为了能获取到被选中的属性
-      this.attr.productAttr[indexw].index = indexn
+      this.attr.productAttr[index].index = subIndex
       const value = this.getCheckedValue().sort().join(",")
       this.$emit("changeFun", {
         action: "ChangeAttr",
         value: {
           value,
-          indexw,
+          index,
-          indexn
+          subIndex
         }
       })
     },
     // 获取被选中属性
-    getCheckedValue: function() {
+    getCheckedValue() {
       const productAttr = this.attr.productAttr
       const value = []
       for (let i = 0; i < productAttr.length; i++) {