【微信小程序】商品多规格的sku组件完整代码

一、效果图：

无库存置灰不可选

二、使用：

页面使用组件：

<!-- 规格 -->
<view class="specification">
    <view class="title">选择规格</view>
    <commodity-sku skuNameArr="{{detailData.specList}}" skuInfoArr="{{detailData.specInfo}}"
        bind:getResultObj="getResultObj">
    </commodity-sku>
</view>

记得注册组件：

{
  "usingComponents": {
    "commodity-sku": "/components/commodity-sku/commodity-sku"
  }
}

三、完整组件：

commodity-sku.wxml

<!-- sku组件 -->
<view class="container">
  <view class="sku-item" wx:for="{{skuNameArr}}" wx:for-item="item" wx:key="index">
    <view class='spec-name'>{{item.specName}}</view>
    <view class="spec-right">
      <view wx:for="{{item.attrList}}" wx:for-item="subItem" wx:for-index='subIndex' wx:key="subIndex"
        bindtap="changeItem" data-show="{{subItem.isShow}}"
        class="{{subItem.isShow?'':'no-active'}} {{subIndexArr[index] == subIndex?'active':''}}"
        data-ol="{{subIndex[index]}}" data-name="{{subItem.attrName}}" data-index="{{index}}"
        data-subindex="{{subIndex}}">{{subItem.attrName}}
        <!-- 勾选的图片没有可以不要 -->
        <image class="tags-img" wx:if="{{subIndexArr[index] == subIndex}}" src="/mall-pages/images/commodity/sel.png" />
      </view>
    </view>
  </view>
  <view wx:if="{{resultObj.price}}">该组合价格为 {{resultObj.price}} </view>
</view>

commodity-sku.js

page({
  properties: {
    // 规格名称数组
    skuNameArr: {
      type: Array,
      value: []
    },
    // 规格匹配信息
    skuInfoArr: {
      type: Array,
      value: []
    }
  },
  data: {
    //存放被选中的值
    selectArr: [],
    //存放要和选中的值进行匹配的数据
    selItemObj: {},
    //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
    subIndexArr: [],
    //最终匹配到的规格信息结果
    resultObj: {},
  },
  methods: {
    // 切换规格
    changeItem(e) {
      var index = e.currentTarget.dataset.index
      var subindex = e.currentTarget.dataset.subindex
      var item = e.currentTarget.dataset.name
      var selectArr = this.data.selectArr
      var subIndexArr = this.data.subIndexArr
      var selItemObj = this.data.selItemObj
      if (selectArr[index] != item) {
        selectArr[index] = item;
        subIndexArr[index] = subindex;
      } else {
        //去掉选中的颜色
        // this.selectArr[index] = "";
        // this.subIndexArr[index] = -1;
      }
      this.filterSkuNameArr();
      var obj = selItemObj[selectArr];
      this.setData({
        selectArr: selectArr,
        subIndexArr: subIndexArr,
        resultObj: obj,
        selItemObj: selItemObj
      })
      console.log(obj)
      this.triggerEvent('getResultObj', obj)
    },
    // 过滤每一组是否可选 isShow
    filterSkuNameArr() {
      var self = this;
      var arr = self.data.skuNameArr;
      var result = []; //定义数组存储被选中的值
      for (var i in arr) {
        result[i] = self.data.selectArr[i] ? self.data.selectArr[i] : "";
      }
      for (var i in arr) {
        var last = result[i]; //把选中的值存放到字符串last去
        for (var j in arr[i].attrList) {
          result[i] = arr[i].attrList[j].attrName; //赋值，存在直接覆盖，不存在往里面添加name值
          arr[i].attrList[j].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
      }
      self.setData({
        skuNameArr: arr
      })
      console.log(arr);
    },
    // 判断是否可选 
    isMay(result) {
      for (var i in result) {
        if (result[i] == "") {
          //如果数组里有为空的值，那直接返回true
          return true;
        }
      }
      //匹配选中的数据的库存，若不为空返回true反之返回false
      return !this.data.selItemObj[result] ? false : this.data.selItemObj[result].stockNum == 0 ? false : true;
    },
  },
  lifetimes: {
    ready() {
      console.log(this.data.skuNameArr);
      console.log(this.data.skuInfoArr);
      var skuInfoArr = this.data.skuInfoArr
      var selItemObj = this.data.selItemObj
      var skuNameArr = this.data.skuNameArr
      for (var i in skuInfoArr) {
        //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
        selItemObj[skuInfoArr[i].wholeSpecName] = skuInfoArr[i];
      }
      for (var i = 0; i < skuNameArr.length; i++) {
        for (var o = 0; o < skuNameArr[i].attrList.length; o++) {
          skuNameArr[i].attrList[o].isShow = true
        }
      }
      this.setData({
        skuInfoArr: skuInfoArr,
        selItemObj: selItemObj,
        skuNameArr: skuNameArr
      })
    }
  }
})

commodity-sku.wxss

.sku-item {
    margin-top: 30rpx;
    display: flex;
}

.spec-name {
    position: relative;
    top: 15rpx;
    width: 22%;
    font-size: 24rpx;
    font-weight: 600;
    word-break: break-all;
}

.spec-right view {
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    padding: 0 16rpx;
    line-height: 60rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 2rpx solid #DDDDDD;
    display: inline-block;
    font-size: 24rpx;
    -webkit-border-radius: 8rpx;
    -moz-border-radius: 8rpx;
    -ms-border-radius: 8rpx;
    -o-border-radius: 8rpx;
    position: relative;
    overflow: hidden;
    word-break: break-all;
    min-height: 42rpx;
}

.spec-right .active {
    background: #FFF7F0;
    border: 2rpx solid #FF6526;
}

.spec-right .no-active {
    color: #9DA0A6;
    pointer-events: none;
}
.tags-img {
    position: absolute;
    width: 26rpx;
    height: 20rpx;
    right: -4rpx;
    bottom: 0;
}