微信小程序sku相关

wxss

/* 商品属性 */
.title { 
  padding: 10rpx 20rpx; 
  margin: 10rpx 0; 
  border-left: 4rpx solid #ccc; 
 } 
   
 /*全部属性的主盒子*/
 .commodity_attr_list { 
  background: #fff; 
  padding: 0 20rpx; 
  font-size: 26rpx; 
  overflow: hidden; 
  width: 100%; 
 } 
 /*每组属性的主盒子*/
 .attr_box { 
  width: 100%; 
  overflow: hidden; 
  /* border-bottom: 1rpx solid #ececec;  */
  display: flex;
  flex-direction: column;
 } 
 /*属性名*/
 .attr_name { 
  width: 20%; 
  float: left; 
  padding: 15rpx 0; 
  text-align: left;
 } 
 /*属性值*/
 .attr_value_box { 
  width: 100%; 
  float: left; 
  padding: 15rpx 0; 
  overflow: hidden; 
 } 
 /*每个属性值*/
 .attr_value { 
  float: left; 
  padding: 0 30rpx; 
  margin: 10rpx 10rpx; 
  border: 1rpx solid #ececec; 
  border-radius:5px;
  line-height:30px;
 } 
 /*每个属性选中的当前样式*/
 .attr_value_active { 
  border-radius: 10rpx; 
  color: #0089dc; 
  padding: 0 30rpx; 
  border: 1rpx solid #0089dc; 
  /* background: #fff;  */
 } 
 /*禁用属性*/
 .attr_value_disabled { 
  color: #ccc; 
 } 
   
 /*button*/
 .weui-btn-area { 
  margin: 1.17647059em 15px 0.3em; 
 } 
 .weui-btn{
  width: 80%;
  height: 100rpx;
  border-radius: 3rpx; 
  background-color:#0089dc; 
  color: #fff; 
 }
 
 /* 图片铺满 */
 .cu-card>.cu-item {
  background-color: 0;
  border-radius: 0px;
  margin: 0px;
}

/** 选择数量  position:fixed; **/
#select{bottom:0;background:#fff;padding:0 20rpx;width:100%;bottom:90rpx;height:120rpx;line-height:120rpx;font-size:30rpx;margin-bottom: 0;z-index:50;background:#fff}
#select .reduce,#select .add{float:left;font-size:45rpx;margin-bottom:10rpx;display:inline-block;width:80rpx;height:70rpx;line-height:70rpx;text-align: center;border: 1px solid #dedede;margin-top:25rpx}
#select .number{
  border-top:1rpx solid #dedede;
  border-bottom:1rpx solid #dedede;
  float:left;height:70rpx;
  line-height:70rpx;
  text-align: center;
  /* color:#e41b46; */
  font-weight: 600;
  width:120rpx;
  margin-top:25rpx;
  height: 72rpx;
}
#select .reduce{margin-left:30rpx;border-bottom-left-radius:8rpx;border-top-left-radius:8rpx}
#select .add{border-bottom-right-radius:8rpx;border-top-right-radius:8rpx}
/*普通样式*/
#select .normal{color:#333}
/*禁用样式*/
#select .disabled{color: #ccc}

wxml

        <!-- 规格sku -->
        <view class="commodity_attr_list"> 
            <!--每组属性-->
            <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex"> 
            <!--属性名-->
            <view class="attr_name">{{attrValueObj.attrKey}}</view> 
          
            <!--属性值-->
            <view class="attr_value_box"> 
              <!--每个属性值-->
              <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"
              data-value="{{value}}" data-price="{{price}}" data-key="{{attrValueObj.attrKey}}" data-code="{{attrCode}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view> 
            </view> 
        </view> 
        </view>
        <!-- 规格sku -->

        <!--选择数量-->
        <view class="select" id="select" style="padding-bottom: 280rpx;">
          <text style="margin-left:0rpx;margin-right:228rpx;float:left">选择数量：</text>
          <text class="reduce {{minusStatus}}" bindtap="bindMinus">-</text>
          <input class="number" bindtap="bindManual" value="{{num}}"/>
          <text class="add normal" bindtap="bindPlus">+</text>
        </view>

js

  /* 获取数据 */
distachAttrValue: function (commodityAttr) {
  /** 
  将后台返回的数据组合成类似 
  { 
  attrKey:'型号', 
  attrValueList:['1','2','3'] 
  } 
  */
  // 把数据对象的数据（视图使用），写到局部内 
  var attrValueList = this.data.attrValueList;
  // 遍历获取的数据 
  for (var i = 0; i < commodityAttr.length; i++) {
   for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
    var attrIndex = this.getAttrIndex(commodityAttr[i].attrValueList[j].attrKey, attrValueList);
    // console.log('属性索引', attrIndex); 
    // 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置 
    if (attrIndex >= 0) {
     // 如果属性值数组中没有该值，push新值；否则不处理 
     if (!this.isValueExist(commodityAttr[i].attrValueList[j].attrValue, attrValueList[attrIndex].attrValues)) {
      attrValueList[attrIndex].attrValues.push(commodityAttr[i].attrValueList[j].attrValue);
     }
    } else {
     attrValueList.push({
      attrKey: commodityAttr[i].attrValueList[j].attrKey,
      attrValues: [commodityAttr[i].attrValueList[j].attrValue]
     });
    }
   }
  }
  // console.log('result', attrValueList) 
  for (var i = 0; i < attrValueList.length; i++) {
   for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
    if (attrValueList[i].attrValueStatus) {
     attrValueList[i].attrValueStatus[j] = true;
    } else {
     attrValueList[i].attrValueStatus = [];
     attrValueList[i].attrValueStatus[j] = true;
    }
   }
  }
  this.setData({
   attrValueList: attrValueList
  });
 },
 getAttrIndex: function (attrName, attrValueList) {
  // 判断数组中的attrKey是否有该属性值 
  for (var i = 0; i < attrValueList.length; i++) {
   if (attrName == attrValueList[i].attrKey) {
    break;
   }
  }
  return i < attrValueList.length ? i : -1;
 },
 isValueExist: function (value, valueArr) {
  // 判断是否已有属性值 
  for (var i = 0; i < valueArr.length; i++) {
   if (valueArr[i] == value) {
    break;
   }
  }
  return i < valueArr.length;
 },
 /* 选择属性值事件 */
 selectAttrValue: function (e) {
  /* 
  点选属性值，联动判断其他属性值是否可选 
  { 
  attrKey:'型号', 
  attrValueList:['1','2','3'], 
  selectedValue:'1', 
  attrValueStatus:[true,true,true] 
  } 
  console.log(e.currentTarget.dataset); 
  */
  var attrValueList = this.data.attrValueList;
  var index = e.currentTarget.dataset.index;//属性索引 
  var key = e.currentTarget.dataset.key;
  var value = e.currentTarget.dataset.value;
  if (e.currentTarget.dataset.status || index == this.data.firstIndex) {
   if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
    // 取消选中 
    this.disSelectValue(attrValueList, index, key, value);
    this.setData({
      price_number: 0
      ,fImg: wx.getStorageSync("imgUrl")
      , priceId: ''
    })

   } else {
    // 取消选中 
    this.disSelectValue(attrValueList, index, key, value);
    // 选中 
    this.selectValue(attrValueList, index, key, value);
   }
  
  }
 },
 /* 选中 */
 selectValue: function (attrValueList, index, key, value, unselectStatus) {
  
  console.log(this.data.includeGroup); 
  console.log(attrValueList)


  // 初始化 金额
  var prices = 0;
  var priceId = '';
  var imgPath = "";

  var includeGroup = [];
  if (index == this.data.firstIndex && !unselectStatus) { // 如果是第一个选中的属性值，则该属性所有值可选 
   var commodityAttr = this.data.commodityAttr;
   // 其他选中的属性值全都置空 
   // console.log('其他选中的属性值全都置空', index, this.data.firstIndex, !unselectStatus); 
   for (var i = 0; i < attrValueList.length; i++) {
    for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
     attrValueList[i].selectedValue = '';
    }
   }
  } else {
    console.log('第二次选择' + this.data.includeGroup)
   var commodityAttr = this.data.includeGroup;
  }
  
  console.log('选中', commodityAttr, index, key, value); 
  console.log(commodityAttr)

  // if(commodityAttr.price != null){
  //   console.log(commodityAttr.price)
  // }
  for (var i = 0; i < commodityAttr.length; i++) {
   for (var j = 0; j < commodityAttr[i].attrValueList.length; j++) {
    if (commodityAttr[i].attrValueList[j].attrKey == key && commodityAttr[i].attrValueList[j].attrValue == value) {
    console.log('跟换选择规格') 
    includeGroup.push(commodityAttr[i]);
     console.log("金额 ==》 " + commodityAttr[i].price)
     console.log(commodityAttr[i])
     priceId = commodityAttr[i].priceId;
     prices =  commodityAttr[i].price;
     if(commodityAttr[i].imgPath != ''){
      imgPath = commodityAttr[i].imgPath;
     }else{
       imgPath = this.data.fImg;
     }
    }
   }
  }
  attrValueList[index].selectedValue = value;
  
  // 判断属性是否可选 
  for (var i = 0; i < attrValueList.length; i++) {
   for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
    //  console.log("attrValueList[i].attrValues.length ==> " + attrValueList[i].attrValues.length)
    //  console.log(attrValueList[i].attrValues)
    //  console.log(attrValueList[i].attrValueStatus[j])

    // attrValueList[i].attrValueStatus[j] = false;
    attrValueList[i].attrValueStatus[j] = true;
   }
  }
  for (var k = 0; k < attrValueList.length; k++) {
   for (var i = 0; i < includeGroup.length; i++) {
    for (var j = 0; j < includeGroup[i].attrValueList.length; j++) {
     if (attrValueList[k].attrKey == includeGroup[i].attrValueList[j].attrKey) {
      for (var m = 0; m < attrValueList[k].attrValues.length; m++) {
       if (attrValueList[k].attrValues[m] == includeGroup[i].attrValueList[j].attrValue) {
        attrValueList[k].attrValueStatus[m] = true;
       }
      }
     }
    }
   }
  }
  console.log('结果', attrValueList); 
  this.setData({
   attrValueList: attrValueList,
   includeGroup: includeGroup
  });
  
  var count = 0;
  for (var i = 0; i < attrValueList.length; i++) {
   for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
    if (attrValueList[i].selectedValue) {
     count++;
     break;
    }
   }
  }
  // console.log("attrValueList.length ==> " + attrValueList.length)
  if (count < 2) {// 第一次选中，同属性的值都可选 
    // console.log('第一次选择')
   this.setData({
    firstIndex: index,
    price_number: this.data.num*prices,
    priceId: priceId,
    one_price_number: prices,
    fImg: imgPath
   });
  }else if(count == attrValueList.length){
    // console.log("最后一个参数")
    // console.log(attrValueList)
    // console.log(this.data.num*prices)
    this.setData({
      price_number: this.data.num*prices,
      priceId: priceId,
      one_price_number: prices,
      fImg: imgPath
     });
  } else {

   this.setData({
    firstIndex: -1
   });
  }
 },
 /* 取消选中 */
 disSelectValue: function (attrValueList, index, key, value) {
  var commodityAttr = this.data.commodityAttr;
  attrValueList[index].selectedValue = '';
  
  // 判断属性是否可选 
  for (var i = 0; i < attrValueList.length; i++) {
   for (var j = 0; j < attrValueList[i].attrValues.length; j++) {
    attrValueList[i].attrValueStatus[j] = true;
   }
  }
  this.setData({
   includeGroup: commodityAttr,
   attrValueList: attrValueList
  });
  
  for (var i = 0; i < attrValueList.length; i++) {
   if (attrValueList[i].selectedValue) {
    this.selectValue(attrValueList, i, attrValueList[i].attrKey, attrValueList[i].selectedValue, true);
   }
  }
 },
 submit: function () {
  var value = [];
  console.log(this.data.attrValueList)
  for (var i = 0; i < this.data.attrValueList.length; i++) {
   if (!this.data.attrValueList[i].selectedValue) {
    break;
   }
   value.push(this.data.attrValueList[i].selectedValue);
  }

  console.log("验证数据是否完整")
  console.log(this.data.attrValueList)
  console.log(this.data.shopId)
  console.log(this.data.fId)
  if (i < this.data.attrValueList.length || this.data.shopId == ''|| this.data.fId == '') {
   wx.showToast({
    title: '请选择完整的数据',
    icon: 'loading',
    duration: 1000
   })
  } else {
   var valueStr = "";
   var valueStr2 = "";
   console.log(JSON.stringify(this.data.attrValueList))

   for(var i = 0;i < value.length;i++){
    console.log(value[i]);
    valueStr += value[i]+",";
    valueStr2 += value[i]+",";
   }

   // 商品名称 + 商品规格
   var productData = this.data.text + "：" + valueStr

   this.setData({
    productData: productData
    , valueStr2: valueStr2

    ,  modalName: null //隐藏当前窗口
   }) 



   console.log(valueStr);
  }
 },

data

  data: {
    , commodityAttr: []
    , attrValueList: []
  },

数据结构

{
  data: [{
    "attrValueList": [{
      "attrCode": "4_40",
      "attrKey": "大小：",
      "attrValue": "10cm",
      "url": ""
    }],
    "imgPath": "",
    "price": 299,
    "priceId": "4_40",
    "stock": 299
  }, {
    "attrValueList": [{
      "attrCode": "4_41",
      "attrKey": "大小：",
      "attrValue": "15cm",
      "url": ""
    }],
    "imgPath": "",
    "price": 339,
    "priceId": "4_41",
    "stock": 339
  }, {
    "attrValueList": [{
      "attrCode": "4_42",
      "attrKey": "大小：",
      "attrValue": "20cm",
      "url": ""
    }],
    "imgPath": "",
    "price": 389,
    "priceId": "4_42",
    "stock": 389
  }, {
    "attrValueList": [{
      "attrCode": "4_43",
      "attrKey": "大小：",
      "attrValue": "25cm",
      "url": ""
    }],
    "imgPath": "",
    "price": 439,
    "priceId": "4_43",
    "stock": 439
  }, {
    "attrValueList": [{
      "attrCode": "4_44",
      "attrKey": "大小：",
      "attrValue": "30cm",
      "url": ""
    }],
    "imgPath": "",
    "price": 499,
    "priceId": "4_44",
    "stock": 499
  }]
}