微信小程序实现sku选择

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

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

  
    
  
  {{amount}}
  
    
  
    
      {{item.standardStr}}
      
        
          {{value.name}}
        
      
    
    
      兑换数量: 库存{{stock}}件 
      
        
          
          
        
        
        
          
        
      
    
  

效果如下：

然后是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)})
  },

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