更新商品购买多规格选择

components/shortPopup.vue

@@ -32,10 +32,16 @@
                 </view>
               </view>
               <u-line></u-line>
-              <view class="m_title">规格选中</view>
+              <block name="规格选中" v-for="(att, indexw) in attr" :key="indexw">
-              <view class="flex">
+                <view class="m_title">{{att.attr_name}}</view>
-                <view class="attr" :class="{'attr_active': item==sku_key}" v-for="item in sku_key_list" :key="item" @click="sku_key = item">{{item||'默认'}}</view>
+                <view class="flex" style="flex-wrap: wrap;">
-              </view>
+                  <view class="attr" :class="{'attr_active': item.check}" 
+                    v-for="(item, indexn) in att.attr_value" :key="indexn"
+                    @click="changeAttr(indexw, indexn)">
+                    {{item.attr}}
+                  </view>
+                </view>
+              </block>
               <view class="m_title num">
                 <view>购买数量</view>
                 <view class="input">
@@ -45,7 +51,7 @@
                 </view>
               </view>
               <view>
-                商品库存 <text style="margin-left: 20rpx;">{{(sku[sku_key] && sku[sku_key].stock)||change.stock}}</text>
+                商品库存 <text style="margin-left: 20rpx;">{{(sku[changeSkuKey] && sku[changeSkuKey].stock)||change.stock}}</text>
               </view>
             </view>
         </scroll-view>
@@ -65,9 +71,16 @@
 <script>
   import {
     postCartAdd,
+    getProductDetail
   } from '@/api/store.js';
   export default {
     name: "shortPopup",
+    props: {
+      source:{
+        type: Number,
+        default: null
+      }
+    },
     data() {
       return {
         isShow: false, //当前是否打开弹窗
@@ -82,9 +95,11 @@
         },
         product: {},
         attrValue: [],
+        attr: [], //多级规格
+        changeSkuKey: '', //多级规格选中的key
         sku: {}, //规格
         sku_key_list: [], //规格名称列表
-        sku_key: '', //选中的规格名称
+        changeSkuKey: '', //选中的规格名称
         change: {
           stock: ''
         },
@@ -96,15 +111,21 @@
     mounted() {},
     computed:{
       leftPrice(){
-        return this.sku[this.sku_key]?.price?.split('.')[0]||'0';
+        return this.sku[this.changeSkuKey]?.price?.split('.')[0]||'0';
       },
       rightPrice(){
-        return this.sku[this.sku_key]?.price?.split('.')[1]||'00';
+        return this.sku[this.changeSkuKey]?.price?.split('.')[1]||'00';
       }
     },
     methods: {
       // 注入参数,
       setDatas(datas, goodsNum) {
+        getProductDetail(datas.product_id).then((res)=>{
+          this.attr = res.data.attr;
+          this.attr.forEach((item, index)=>{
+            this.changeAttr(index, 0);
+          })
+        })
         this.goodsNum = goodsNum;
         this.datas = datas;
         this.product = datas.product;
@@ -113,18 +134,17 @@
         this.cart_num = 1;
         this.sku = datas.sku||{};
         this.sku_key_list = Object.keys(this.sku);
-        this.sku_key = this.sku_key_list[0];
       },
       // 输入购买数量
       inputCartNum(e) {
         if(this.sku){
-          if (+e.detail.value > this.sku[this.sku_key].stock) {
+          if (+e.detail.value > this.sku[this.changeSkuKey].stock) {
             uni.showToast({
               icon: 'none',
               title: '不能超出库存哦'
             })
             this.$nextTick(() => {
-              this.cart_num = this.sku[this.sku_key].stock;
+              this.cart_num = this.sku[this.changeSkuKey].stock;
             })
           }
         }else if (this.change.stock <= this.cart_num) {
@@ -150,7 +170,7 @@
       // 增加购买数量
       plusCartNum() {
         if(this.sku){
-          if (this.sku[this.sku_key].stock <= this.cart_num) {
+          if (this.sku[this.changeSkuKey].stock <= this.cart_num) {
             return uni.showToast({
               icon: 'none',
               title: '不能超出库存哦'
@@ -164,20 +184,43 @@
           }
         this.cart_num++;
       },
+      changeAttr: function(indexw, indexn) {
+      	let that = this;
+      	this.$set(this.attr[indexw], 'index', this.attr[indexw].attr_values[indexn]);
+        this.attr[indexw].attr_value.forEach((item, index)=>{
+          if(index==indexn)item.check = true;
+          else item.check = false;
+        })
+      	let value = that.getCheckedValue().join(",");
+        this.changeSkuKey = value;
+      },
+      //获取被选中属性；
+      getCheckedValue: function() {
+      	let productAttr = this.attr;
+      	let value = [];
+      	for (let i = 0; i < productAttr.length; i++) {
+      		for (let j = 0; j < productAttr[i].attr_values.length; j++) {
+      			if (productAttr[i].index === productAttr[i].attr_values[j]) {
+      				value.push(productAttr[i].attr_values[j]);
+      			}
+      		}
+      	}
+      	return value;
+      },
       // 加入购物车
       addcart() {
-        if (this.sku[this.sku_key]) {
+        if (this.sku[this.changeSkuKey]) {
-          if (this.cart_num > this.sku[this.sku_key].stock) return uni.showToast({
+          if (this.cart_num > this.sku[this.changeSkuKey].stock) return uni.showToast({
             icon: 'none',
             title: '不能超出库存哦'
           })
           let data = {
             cart_num: this.cart_num,
             is_new: 0,
-            product_attr_unique: this.sku[this.sku_key].unique,
+            product_attr_unique: this.sku[this.changeSkuKey].unique,
             product_id: this.datas.product_id,
             product_type: this.datas.product_type,
-            // source: 103, 
+            source: this.source, 
             spread_id: "",
           }
           let that = this

pages/goods_details/index.vue

@@ -994,7 +994,7 @@
 			ChangeAttr: function(res) {
 				let productSelect = this.productValue[res];
 				if (productSelect) this.$set(this, "uniqueValue", productSelect.unique);
-          console.log(productSelect, this.storeInfo);
+          // console.log(productSelect, this.storeInfo);
 				if (productSelect && productSelect.stock > 0) {
 					this.$set(this.attr.productSelect, "image", productSelect.image ? productSelect.image : this
 						.storeInfo

pages/nongKe/cloud_entrepot/indexb.vue

@@ -721,7 +721,7 @@
         }
         townCloud({
           street_code: this.street_id,
-          category_id: this.storeParam.category_id,
+          // category_id: this.storeParam.category_id,
           order: this.storeParam.order,
           keyword: this.storeParam.keyword,
           page: this.storeParam.page,

pages/nongKe/cloud_entrepot/indexh.vue

@@ -171,7 +171,7 @@
       </view>
     </uni-popup>
     
-    <shortPopup ref="shortPopupRef" @addCart="loadCart"></shortPopup>
+    <shortPopup ref="shortPopupRef" @addCart="loadCart" :source="103"></shortPopup>
 
   </view>
 </template>