微信小程序实现sku选择

总结一下去年做过的项目，emmm... 发现都是业务代码也没啥好总结的，就把之前写的时候感觉有难度的东西在拿出来鞭尸一遍，总归是会有成长的

1.首先是wxml，先写个规格弹窗

<!-- 规格弹窗 -->
<view wx:if="{{isHandleConfig}}" class="configModleStyle" bindtap="closeConfigModle">
</view>
<view class="modleStyle" wx:if="{{isHandleConfig}}">
  <view class="goodsImgStyle">
    <image src="data:image/jpg;base64,{{imageList[0]}}"></image>
  </view>
  <text class="configPrice">{{amount}}</text>
  <!-- <view class="closeImgStyle" bindtap="closeConfigModle">
    <image src="../../images/close.png"></image>
  </view> -->
    <!-- 规格选择 -->
  <view class="handleBox">
    <view wx:for="{{standardTypeList}}" class="configTitle">
      <text class="configTitleName">{{item.standardStr}}</text>
      <view class="configBox">
        <view wx:for="{{item.mapList}}" wx:for-item="value" class="{{configResult[item.standardStr] == value.val?'choseConfigContert':'configContert'}} {{value.lack?'disbleStyle':''}}" data-children="{{value.val}}" data-lack="{{value.lack}}" data-type="{{item.standardStr}}" bindtap="choseConfig">
          {{value.name}}
        </view>
      </view>
    </view>
    <view class="numberBox">
      <view class="numberTitle">兑换数量: <text class="stockNum">库存{{stock}}件</text> </view>
      <view class="num_style">
        <view bindtap="reduce" class="handleBtn">
          <image src="../../images/reduce.png">
          </image>
        </view>
        <input name="num" class="number" type="number" value="{{num}}" bindinput="changeNum" bindblur="blur"></input>
        <view class="handleBtn" bindtap="add">
          <image src="../../images/add_num.png"></image>
        </view>
      </view>
    </view>
  </view>
</view>

效果如下：

然后是sku的选择方法

choseConfig(e){
    let parentType = e?e.currentTarget.dataset.type:''  // 规格大类
    let type =e?e.currentTarget.dataset.children:''     // 选中的规格小类
    let lack =e?e.currentTarget.dataset.lack:''         // 是否是不可选择项
    if(lack) return false                           // 如果是不可选择项则不进行操作
    let result = {...this.data.configResult}        // 获取当前所有选择规格
    const {configList,standardTypeList} = this.data // 获取规格列表以及数据列表
    let newStandardTypeList = [...standardTypeList] // 深拷贝规格列表
    if(result[parentType] == type) delete result[parentType]  // 取消选中
    else result[parentType] = type                            // 选中
    let has = []                                      // 选中操作
    // 获取所有包含当前选项的数据集合
    // 循环判断 不包含自己的每一种规格
    // 在当前规格下再次进行循环 找出不满足 当前所有选项的去致灰
    let first = []
    if(result[parentType]==type)
      first = configList.filter(item=>item.objMap[parentType] == type) // 1
    else 
    first = configList
    standardTypeList.map(item=>{
      if(item.standardStr != parentType){  // 2
        item.mapList.filter(v=>{
          let d = {...result}
          d[item.standardStr] = v.val
          if(first.filter(m=>{
            let pass = true
            for(let i in d){
              console.log(d[i],m.objMap[i],i,m,d)
              if(d[i] != m.objMap[i]) pass = false
            }
            if(pass) return m
          }).length != 0){
            return v
          }
        }).map(z=>has.push(z.val))
      }
    })
    standardTypeList.map((val,i)=>{
      has = [...(new Set(has))]
      console.log(has)
      if(val.standardStr != parentType){
        console.log(val.standardStr,parentType)
        val.mapList.map((v,n)=>{
          if( has.indexOf(v.val) == -1) newStandardTypeList[i].mapList[n]['lack'] = true
          else newStandardTypeList[i].mapList[n]['lack'] = false
        })
      }
    })
    console.log(result,'查看返回结果')
    if(Object.keys(result).length == Object.keys(this.data.configList[0].objMap).length){
      let a = this.data.configList.filter(item=>isObjectEqual(item.objMap,result))
      let amount = ''
      if(a.length == 0){
        wx.showToast({
          icon:'none',
          title: '抱歉没有匹配对应规格的商品～'
        })
        return false
      }
      if(this.data.detail.payMethod==1) amount = a[0].integral+'积分'
      else if(this.data.detail.payMethod==2) amount = a[0].amount+'元+'+a[0].integral+'积分'
      else amount = '¥'+a[0].amount
      this.setData({
        amount:amount,
        stock:a[0].stock
      })
      if(a.length == 1){
        this.setData({
          chose_id:a[0].id,
        })
      }
      console.log(a)
    }else{
      this.setData({
        amount:this.data.detail.priceRange,
        stock:this.data.detail.totalStock
      })
    }
    this.setData({configResult:result,standardTypeList:newStandardTypeList,configResultLength:Object.keys(result)})
  },

主要是提供自己去反思。 其中肯定有不合理的地方，欢迎大佬指正