萌新求助,商品SKU组合算法?
const list = [ {
options: [
{ value: "原厂质保", disabled: false },
{ value: "总成三大件", disabled: false },
],
currentValue: "",
},
{
options: [
{ value: "1年", disabled: false },
{ value: "2年", disabled: false },
{ value: "3年", disabled: false },
],
currentValue: "",
},
{
options: [
{ value: "1年", disabled: false },
{ value: "2年", disabled: false },
{ value: "3年", disabled: false },
{ value: "4年", disabled: false },
{ value: "5年", disabled: false },
{ value: "6年", disabled: false },
],
currentValue: "",
},
];
const skus = [
{ skuSpecValueList: ["原厂质保", "1年", "1年"] },
{ skuSpecValueList: ["原厂质保", "1年", "2年"] },
{ skuSpecValueList: ["原厂质保", "1年", "3年"] },
{ skuSpecValueList: ["原厂质保", "2年", "4年"] },
{ skuSpecValueList: ["原厂质保", "2年", "5年"] },
{ skuSpecValueList: ["原厂质保", "2年", "6年"] },
{ skuSpecValueList: ["原厂质保", "3年", "2年"] },
{ skuSpecValueList: ["原厂质保", "3年", "3年"] },
{ skuSpecValueList: ["原厂质保", "3年", "4年"] },
{ skuSpecValueList: ["原厂质保", "3年", "5年"] },
{ skuSpecValueList: ["原厂质保", "3年", "6年"] },
{ skuSpecValueList: ["总成三大件", "2年", "5年"] },
{ skuSpecValueList: ["总成三大件", "2年", "6年"] },
{ skuSpecValueList: ["总成三大件", "3年", "1年"] },
{ skuSpecValueList: ["总成三大件", "3年", "2年"] },
{ skuSpecValueList: ["总成三大件", "3年", "3年"] },
{ skuSpecValueList: ["总成三大件", "3年", "4年"] },
{ skuSpecValueList: ["总成三大件", "3年", "5年"] },
{ skuSpecValueList: ["总成三大件", "3年", "6年"] },
];
大佬们, 我想选择禁止选择不可以选的规格,如何搞啊, 想了好久了~
const allSpec = [ {
title: "规格1",
options: [
{
value: "原厂质保",
disabled: false,
selectable: [
["原厂质保", "1年", "1年"],
["原厂质保", "1年", "2年"],
["原厂质保", "1年", "3年"],
["原厂质保", "2年", "4年"],
["原厂质保", "2年", "5年"],
["原厂质保", "2年", "6年"],
["原厂质保", "3年", "2年"],
["原厂质保", "3年", "3年"],
["原厂质保", "3年", "4年"],
["原厂质保", "3年", "5年"],
["原厂质保", "3年", "6年"],
],
},
{
value: "总成三大件",
disabled: false,
selectable: [
["总成三大件", "2年", "5年"],
["总成三大件", "2年", "6年"],
["总成三大件", "3年", "1年"],
["总成三大件", "3年", "2年"],
["总成三大件", "3年", "3年"],
["总成三大件", "3年", "4年"],
["总成三大件", "3年", "5年"],
["总成三大件", "3年", "6年"],
],
},
],
currentValue: "总成三大件",
},
{
title: "规格2",
options: [
{
value: "1年",
disabled: true,
selectable: [
["原厂质保", "1年", "1年"],
["原厂质保", "1年", "2年"],
["原厂质保", "1年", "3年"],
],
},
{
value: "2年",
disabled: false,
selectable: [
["原厂质保", "2年", "4年"],
["原厂质保", "2年", "5年"],
["原厂质保", "2年", "6年"],
["总成三大件", "2年", "5年"],
["总成三大件", "2年", "6年"],
],
},
{
value: "3年",
disabled: false,
selectable: [
["原厂质保", "3年", "2年"],
["原厂质保", "3年", "3年"],
["原厂质保", "3年", "4年"],
["原厂质保", "3年", "5年"],
["原厂质保", "3年", "6年"],
["总成三大件", "3年", "1年"],
["总成三大件", "3年", "2年"],
["总成三大件", "3年", "3年"],
["总成三大件", "3年", "4年"],
["总成三大件", "3年", "5年"],
["总成三大件", "3年", "6年"],
],
},
],
currentValue: "2年",
},
{
title: "规格3",
options: [
{
value: "1年",
disabled: true,
selectable: [
["原厂质保", "1年", "1年"],
["总成三大件", "3年", "1年"],
],
},
{
value: "2年",
disabled: true,
selectable: [
["原厂质保", "1年", "2年"],
["原厂质保", "3年", "2年"],
["总成三大件", "3年", "2年"],
],
},
{
value: "3年",
disabled: true,
selectable: [
["原厂质保", "1年", "3年"],
["原厂质保", "3年", "3年"],
["总成三大件", "3年", "3年"],
],
},
{
value: "4年",
disabled: true,
selectable: [
["原厂质保", "2年", "4年"],
["原厂质保", "3年", "4年"],
["总成三大件", "3年", "4年"],
],
},
{
value: "5年",
disabled: false,
selectable: [
["原厂质保", "2年", "5年"],
["原厂质保", "3年", "5年"],
["总成三大件", "2年", "5年"],
["总成三大件", "3年", "5年"],
],
},
{
value: "6年",
disabled: false,
selectable: [
["原厂质保", "2年", "6年"],
["原厂质保", "3年", "6年"],
["总成三大件", "2年", "6年"],
["总成三大件", "3年", "6年"],
],
},
],
currentValue: "6年",
},
];
function updateDisabledStatus() {
const hit = allSpec.map((spec) => spec.currentValue);
allSpec.forEach((spec, index) => {
spec.options.forEach((option) => {
option.disabled = !option.selectable.some((skuSpecValueList) => {
return !skuSpecValueList.some((value, index1) => {
if (index === index1) return false;
if (!hit[index1]) return false;
return value !== hit[index1];
});
});
});
});
}
写了一天 写出来了, 反复自测了下 应该没啥问题,头大,希望大佬能帮助在看看是否正确或者有最优解
回答:
你的意思是说需要禁止某些不可选的规格组合吗?
比如规格2选择了2年-》那规格3就只能选择1年,2年,3年,其他的要禁选变灰?
比如规格2选择了3年-》那规格3只能选择2年,3年,4年,其他的禁选变灰?
类似于这样的效果?
可以把禁选组合作为一个数据集,然后在选择上一级时,触发判断下一级哪些不能选,禁灰。
回答:
const skus = [ { skuSpecValueList: ["原厂质保", "1年", "1年"] },
{ skuSpecValueList: ["原厂质保", "1年", "2年"] },
{ skuSpecValueList: ["原厂质保", "1年", "3年"] },
{ skuSpecValueList: ["原厂质保", "2年", "4年"] },
{ skuSpecValueList: ["原厂质保", "2年", "5年"] },
{ skuSpecValueList: ["原厂质保", "2年", "6年"] },
{ skuSpecValueList: ["原厂质保", "3年", "2年"] },
{ skuSpecValueList: ["原厂质保", "3年", "3年"] },
{ skuSpecValueList: ["原厂质保", "3年", "4年"] },
{ skuSpecValueList: ["原厂质保", "3年", "5年"] },
{ skuSpecValueList: ["原厂质保", "3年", "6年"] },
{ skuSpecValueList: ["总成三大件", "2年", "5年"] },
{ skuSpecValueList: ["总成三大件", "2年", "6年"] },
{ skuSpecValueList: ["总成三大件", "3年", "1年"] },
{ skuSpecValueList: ["总成三大件", "3年", "2年"] },
{ skuSpecValueList: ["总成三大件", "3年", "3年"] },
{ skuSpecValueList: ["总成三大件", "3年", "4年"] },
{ skuSpecValueList: ["总成三大件", "3年", "5年"] },
{ skuSpecValueList: ["总成三大件", "3年", "6年"] },
];
let choose1 = '原厂质保'
let choose2 = '1年'
let choose3 = ''
handleChooseItem()
function handleChooseItem() {
const firstList = [], secondList = [], thirdList = []
skus.filter(item => {
if (choose2 && choose3) {
return item.skuSpecValueList[1] === choose2 && item.skuSpecValueList[2] === choose3
} else if (choose2) {
return item.skuSpecValueList[1] === choose2
} else if (choose3) {
return item.skuSpecValueList[2] === choose3
} else {
return true
}
}).map(item => {
firstList.push(item.skuSpecValueList[0])
})
skus.filter(item => {
if (choose1 && choose3) {
return item.skuSpecValueList[0] === choose1 && item.skuSpecValueList[2] === choose3
} else if (choose1) {
return item.skuSpecValueList[0] === choose1
} else if (choose3) {
return item.skuSpecValueList[2] === choose3
} else {
return true
}
}).map(item => {
secondList.push(item.skuSpecValueList[1])
})
skus.filter(item => {
if (choose1 && choose2) {
return item.skuSpecValueList[0] === choose1 && item.skuSpecValueList[1] === choose2
} else if (choose1) {
return item.skuSpecValueList[0] === choose1
} else if (choose2) {
return item.skuSpecValueList[1] === choose2
} else {
return true
}
}).map(item => {
thirdList.push(item.skuSpecValueList[2])
})
console.log([...new Set([...firstList])])
console.log([...new Set([...secondList])])
console.log([...new Set([...thirdList])])
}
firstList: [ '原厂质保' ]secondList: [ '1年', '2年', '3年' ]
thirdList: [ '1年', '2年', '3年' ]
说实话没写过SKU,感觉写得挺烂的,抛砖引玉等大佬有没有优化解
回答:
试试这个
// 定义你的选项和 SKUconst list = [
// ...
];
const skus = [
// ...
];
// 更新选项的函数
function updateOptions() {
// 获取当前选中的所有值
const currentValues = list.map(group => group.currentValue);
// 遍历所有选项
list.forEach((group, groupIndex) => {
group.options.forEach(option => {
// 检查是否存在一个 SKU 包含当前选项
option.disabled = !skus.some(sku => {
// 判断每个 SKU 是否匹配所有当前选中的值
return sku.skuSpecValueList.every((value, index) => {
// 如果当前组没有选中值,或者当前组的选中值与 SKU 匹配,或者当前选项的值与 SKU 匹配,那么这个 SKU 就是匹配的
return currentValues[index] === "" || currentValues[index] === value || (index === groupIndex && option.value === value);
});
});
});
});
}
// 用户选择选项的函数
function selectOption(groupIndex, optionIndex) {
// 设置当前值
list[groupIndex].currentValue = list[groupIndex].options[optionIndex].value;
// 更新选项
updateOptions();
}
// 初始化:将第一个选项设为当前值,然后更新其他选项
list.forEach((group, index) => {
if (group.options.length > 0) {
selectOption(index, 0);
}
});
以上是 萌新求助,商品SKU组合算法? 的全部内容, 来源链接: utcz.com/p/945260.html