sku选择器

业务简介

公司做的是O2O产品，自然是少不了选取商品规格的功能哒，购物，我们是专业滴~~~

需求分析

商品的属性有多种，尺寸，性别，颜色...
其存在的组合方式是确定的，
那么，问题来了...
作为前端的小美女，如何确保用户只能选择存在的那些组合呢？？？
例子：
性别：男 女
颜色：红色 黑色 白色
尺寸：L M S
存在的组合有： 男-红-L； 男-白-M ；女-红-M； 女-黑-S
所有的属性为平级的关系，即，点击性别，颜色，尺寸没有所谓的先后顺序...
我们面对的问题是：
当用户点击 红色的时候 男,女可选，L,M可选，S不可选
当用户选择了男-红后 仅L可选
不可选的呈置灰状态

解决问题

• 解析后台数据结构
• 获取所有组合的集合
• 获取已选的组合
• 判断其他属性是否可选
• 重新渲染页面
  下面就按着步骤一步一步来咯~~~

1.解析后台数据结构

后台数据结构如下（itemSkuMaps）：

  "26:2;27:4;28:6;":{"price": "122",      //属性id:具体属性id;
                     "stock": 13,
                     "skuId": 462618612501,
                     "skuImg": "***.jpg"},

解析：

  let all = Object.keys(itemSkuMaps).map((item)=>{
    let attrItemArr = item.split(';'); attrItemArr.pop();
    return attrItemArr
  })
  var AllGroups = [];
  let AllGroup = all.reduce((temp, allItem) => {
    var tempGroup = this.powerset(allItem);  //获取到单个组合的所有隐藏可选的集合
    return tempGroup.map((item) => {
      AllGroups.push(item)
    })
  }, 0)

  powerset(arr) {  //摘自网络
     var ps = [[]];
     for(var i= 0; i<arr.length; i++) {
        for (var j = 0, len = ps.length; j < len; j++) {
          ps.push(ps[j].concat(arr[i]));
        }
      }
    return ps;
  }  //  eg： 男-红-L存在时    {男 、红 、L、男红、男L、红L、男红L 全部存在}

2.获取已选的组合

getAttrs(e) {  //小程序版本的  获取属性id：具体属性id
  let datas = e.currentTarget.dataset;
  let pid = `skuItem[${datas.pid}]`
  if (datas.baned) {
    wx.showToast({
      title: '不可选',
      icon: 'none'
    })
    return;
  }
  this.data.skuItem[datas.pid] == datas.id ?
    this.setData({
      [pid]: ''  
    }) :
    this.setData({
      goodsCount: 1,
      [pid]: datas.id,
      tempSku: datas.pid + ':' + datas.id
    });
  let skuStr = this.data.skuItem.reduce((s = '', item, index) => {
    return s += item === '' ? '' : `${index}:${item};`
  }, '')
  this.setData({
    skuStr: skuStr
  })
}

3.判断其他属性是否可选

//计算剩余可以选择的属性
getAllAbled(list, test) {
  let abled= list.map((item) => {
    var key = test.toString().split(':')[0];
    if (key == [Object.keys(item)]) {
      return { [Object.keys(item)]: item[Object.keys(item)] }
    } else {
      return {
        [Object.keys(item)]: item[Object.keys(item)].map((abledItem) => {
          var inner = this.bubbelSort([...test, abledItem]);  //排序
          var flg = this.isInList(this.data.AllGroups, inner)
          if (flg) {
            return abledItem
          } else {
            return 0
          }
        })
      }
    }
  })
  return abled;
}

4.重新渲染+其他工具类的函数

isInList(lists, list) {//多维数组，数组
  return lists.some((item) => {
    return item.toString() == (list.toString());
  })
}
var item = this.data.skuStr.split(';');item.pop();
  this.setData({
    checkedLength: item.length
  })
  var flg = itemSkuAttrs
  for (var i = 0; i < item.length; i++) {
    flg = this.getAllAbled(flg, new Array(item[i]))
  }

整个的思路就是：通过已知的组合获取到所有存在的子组合的集合，再将用户选择的与之比较，对其他的属性进行依次比较判断其是否可选

总结：ES6hin强大，减少了好多工作量~~~