电商项目微信小程序实现sku组合选择

之前后台添加了sku组合属性，现在就需要在微信小程序端展示并选择对应组合后显示对应库存和价格

选择组合的实现

这里我能力有限，只能说勉强实现，如果之后能力提升再来重构，如果各位有建议可以留言告诉我。

// 规格选择
  changeSize(e) {
      //这边就是很简单的获取点击的值然后改变他的checked，来达到改变选择样式的目的
    let that = this
    let property = e.currentTarget.dataset.id
    let activeItem = e.currentTarget.dataset.item
    let arr = that.data.detailInfo.property
    let checklist = []
    arr.forEach(item => {
      // 只改变一个属性里的内容
      if (item.property_id == property) {
        item.property_value.forEach(ele => {
          if (ele.value == activeItem) {
            ele.checked = !ele.checked
          } else {
            ele.checked = false
          }
        })
      }
      //这是个比较好理解的实现，把每组的属性遍历，如果checked有true的说明这组有选择，push进入checklist数组
      item.property_value.forEach(ele => {
        if (ele.checked) {
          checklist.push(ele)
        }
      })
      //这边如果选择列表的长度 == 属性列表的长度就说明所有的属性都选择了一个属性值就可以进行匹配操作
      if (checklist.length == arr.length) {
        //使用JSON转换再转回可以实现深拷贝
        let _skuList = JSON.stringify(that.data.detailInfo.totals)
        let skuList = JSON.parse(_skuList)
        // console.log(skuList)
        //双重循环把不匹配的splice删除掉，splic的for循环一定要用自减，
        // 不然删除后索引会错乱而删错东西。。之前用两个forEach就是没想到这点
        checklist.forEach((element, index) => {
          for(let i=skuList.length-1; i>=0; i--){
            console.log(element.value,skuList[i][index])
            if(element.value != skuList[i][index]){
                skuList.splice(i,1);
            }
          }
        })
        that.setData({
          skuList:skuList[0]
        })
      }
    })
    that.setData({
      ['detailInfo.property']: arr
    })
  },