業(yè)務(wù)簡介
公司做的是O2O產(chǎn)品，自然是少不了選取商品規(guī)格的功能噠镣煮，購物姐霍，我們是專業(yè)滴~~~
需求分析
商品的屬性有多種，尺寸怎静，性別邮弹，顏色...
其存在的組合方式是確定的黔衡，
那么蚓聘，問題來了...
作為前端的小美女，如何確保用戶只能選擇存在的那些組合呢盟劫？夜牡？？
例子：
性別：男 女
顏色：紅色 黑色 白色
尺寸：L M S
存在的組合有： 男-紅-L侣签； 男-白-M 塘装；女-紅-M； 女-黑-S
所有的屬性為平級的關(guān)系影所，即蹦肴，點擊性別，顏色猴娩，尺寸沒有所謂的先后順序...
我們面對的問題是：
當(dāng)用戶點擊 紅色的時候 男,女可選阴幌，L,M可選勺阐，S不可選
當(dāng)用戶選擇了男-紅后 僅L可選
不可選的呈置灰狀態(tài)
解決問題
- 解析后臺數(shù)據(jù)結(jié)構(gòu)
- 獲取所有組合的集合
- 獲取已選的組合
- 判斷其他屬性是否可選
- 重新渲染頁面
下面就按著步驟一步一步來咯~~~
1.解析后臺數(shù)據(jù)結(jié)構(gòu)
后臺數(shù)據(jù)結(jié)構(gòu)如下（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) { //摘自網(wǎng)絡(luò)
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.重新渲染+其他工具類的函數(shù)
isInList(lists, list) {//多維數(shù)組，數(shù)組
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]))
}
整個的思路就是：通過已知的組合獲取到所有存在的子組合的集合栈幸，再將用戶選擇的與之比較愤估，對其他的屬性進行依次比較判斷其是否可選
總結(jié)：ES6hin強大，減少了好多工作量~~~
