数据准备工作
- 所有的规格项和规格值 specList 类似的数据格式
我们这里把颜色/数量这个级别的对象统称规格项,黄色/红色和5/10这个级别的对象成为每个规格项的规格值
{
"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":"数量",
"valueList":[
{
"id":"00c",
"name":"5",
"selected":"true",
"disable":"true"
},
{
"id":"00d",
"name":"10",
"selected":"false",
"disable":"true"
}
]
}
]
}
- 可以选择的sku集合 canSkuList 数据格式组装成类似的格式一般数据库设计都是这个格式 比如黄色 数量5和10是可选的
[
["规格1颜色的值对应的code","规格2数量的值对应的code"],
["00a","00c"],
["00a","00d"]
]
- 已选择的规格集合 selectedList
一般情况下第一次查询的时候我们会给一个默认的规格值,一般是可选规格的 价钱最低的那一个,这里默认选中黄色和5,已选规格的规格值可以是空,也可以只选择了一部分规格项,但是未选择的 请用""占位,方便后面使用,如果直接用选中状态判断,就不需要存下标了
[["规格项的下标","规格值的下标","规格值的id"],["0","0","00a"],["1","0","00c"],"",""]
以上数据格式是我门项目用到的仅供参考,下面是大思路也是最笨的方法
逻辑判断分析
checkSku(selectedList) {
//遍历所有的规格项
for (var i = 0, l = this.specList.length; i < l; i++) {
var valueList= this.specList[i].valueList;
// 遍历规格规格项下的规格值 挨个判断是否能选
for (var a = 0, s = valueList.length; a < s; a++) {
//克隆一个已选择的的数组,用来做判断,不能改变老数组,应为每个规格值的判断都会用
var attrSelected = selectedList.slice(0);
//1.此规格项和已经选择项组装开始
// 选中的是不是有这个 有的话直接跳过
//这里可以用 valueList[a].selected 来判断 要比较的值是否是要选中的
//if (valueList[a].selected) {
//这项本来就是选中的 设置为可选 这里有点多余 他本该就是可选的
//this.specList[i].valueList[a].disable=false
//直接跳过判断下一个值
// continue;
// }
//组装的方法1结束
//2.此规格项和已经选择项组装开始
//如果 selected属性并不是太可靠,这里就需要我们的下标了
//遍历已选择的规格集合
for (var specSelect of selectedList) {
//下标规格项判断
if(""!=specSelect &&specSelect[0]==i){
//下标规格值判断
if(specSelect[1]==a){
//此规格项的规格值是现在选中的
//这项本来就是选中的 设置为可选 这里有点多余 他本该就是可选的
//this.specList[i].valueList[a].disable=false
//直接跳过判断下一个值
continue;
}
}
//组装的方法2结束
// 替换选中的此规格项的值
attrSelected.splice(i, 1, [i,a,valueList[a].id]);
//筛选掉没选择的规格项的值得占位符"";
var ssselect = attrSelected.filter(item => {
return item != '';
});
var isDisable = true;
//可选择的规格集合 遍历
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 {
//有一个不包含 直接跳过判断下一个可选规格
isDisable = false;
break;
}
}
//此可选规格判断完成依然是true 说明全部包含,不用判断下一个可选项了,实名此项可选
if (isDisable) {
break;
}
}
this.specList[i].valueList[a].disable=!isDisable
}
}
}
浪客行1213的简书
xhh
