數(shù)據(jù)準(zhǔn)備工作
- 所有的規(guī)格項和規(guī)格值 specList 類似的數(shù)據(jù)格式
我們這里把顏色/數(shù)量這個級別的對象統(tǒng)稱規(guī)格項,黃色/紅色和5/10這個級別的對象成為每個規(guī)格項的規(guī)格值
{
"specList":[
{
"id":"001",
"name":"顏射",
"valueList":[
{
"id":"唯一值",
"name":"展示值",
"selected":"是否被選中",
"disable":"是否可選"
},
{
"id":"00a",
"name":"黃色",
"selected":"true",
"disable":"true"
},
{
"id":"00b",
"name":"紅色",
"selected":"false",
"disable":"true"
}
]
},
{
"id":"002",
"name":"數(shù)量",
"valueList":[
{
"id":"00c",
"name":"5",
"selected":"true",
"disable":"true"
},
{
"id":"00d",
"name":"10",
"selected":"false",
"disable":"true"
}
]
}
]
}
- 可以選擇的sku集合 canSkuList 數(shù)據(jù)格式組裝成類似的格式一般數(shù)據(jù)庫設(shè)計都是這個格式 比如黃色 數(shù)量5和10是可選的
[
["規(guī)格1顏色的值對應(yīng)的code","規(guī)格2數(shù)量的值對應(yīng)的code"],
["00a","00c"],
["00a","00d"]
]
- 已選擇的規(guī)格集合 selectedList
一般情況下第一次查詢的時候我們會給一個默認(rèn)的規(guī)格值,一般是可選規(guī)格的 價錢最低的那一個,這里默認(rèn)選中黃色和5,已選規(guī)格的規(guī)格值可以是空,也可以只選擇了一部分規(guī)格項,但是未選擇的 請用""占位,方便后面使用,如果直接用選中狀態(tài)判斷,就不需要存下標(biāo)了
[["規(guī)格項的下標(biāo)","規(guī)格值的下標(biāo)","規(guī)格值的id"],["0","0","00a"],["1","0","00c"],"",""]
以上數(shù)據(jù)格式是我門項目用到的僅供參考,下面是大思路也是最笨的方法
邏輯判斷分析
checkSku(selectedList) {
//遍歷所有的規(guī)格項
for (var i = 0, l = this.specList.length; i < l; i++) {
var valueList= this.specList[i].valueList;
// 遍歷規(guī)格規(guī)格項下的規(guī)格值 挨個判斷是否能選
for (var a = 0, s = valueList.length; a < s; a++) {
//克隆一個已選擇的的數(shù)組,用來做判斷,不能改變老數(shù)組,應(yīng)為每個規(guī)格值的判斷都會用
var attrSelected = selectedList.slice(0);
//1.此規(guī)格項和已經(jīng)選擇項組裝開始
// 選中的是不是有這個 有的話直接跳過
//這里可以用 valueList[a].selected 來判斷 要比較的值是否是要選中的
//if (valueList[a].selected) {
//這項本來就是選中的 設(shè)置為可選 這里有點(diǎn)多余 他本該就是可選的
//this.specList[i].valueList[a].disable=false
//直接跳過判斷下一個值
// continue;
// }
//組裝的方法1結(jié)束
//2.此規(guī)格項和已經(jīng)選擇項組裝開始
//如果 selected屬性并不是太可靠,這里就需要我們的下標(biāo)了
//遍歷已選擇的規(guī)格集合
for (var specSelect of selectedList) {
//下標(biāo)規(guī)格項判斷
if(""!=specSelect &&specSelect[0]==i){
//下標(biāo)規(guī)格值判斷
if(specSelect[1]==a){
//此規(guī)格項的規(guī)格值是現(xiàn)在選中的
//這項本來就是選中的 設(shè)置為可選 這里有點(diǎn)多余 他本該就是可選的
//this.specList[i].valueList[a].disable=false
//直接跳過判斷下一個值
continue;
}
}
//組裝的方法2結(jié)束
// 替換選中的此規(guī)格項的值
attrSelected.splice(i, 1, [i,a,valueList[a].id]);
//篩選掉沒選擇的規(guī)格項的值得占位符"";
var ssselect = attrSelected.filter(item => {
return item != '';
});
var isDisable = true;
//可選擇的規(guī)格集合 遍歷
for (var x = 0, len = this.canSkuList ; x < len; x++) {
var canSelectSpecValues =this.canSkuList[x];
// 遍歷選中的值
for (var selectSpec of ssselect) {
//可選的是否包含已選的的所有
if (canSelectSpecValues.includes(selectSpec[2])) {
isDisable = true;
} else {
//有一個不包含 直接跳過判斷下一個可選規(guī)格
isDisable = false;
break;
}
}
//此可選規(guī)格判斷完成依然是true 說明全部包含,不用判斷下一個可選項了,實(shí)名此項可選
if (isDisable) {
break;
}
}
this.specList[i].valueList[a].disable=!isDisable
}
}
}
浪客行1213的簡書
xhh
