vue前端sku实现的方法小结
作者：寰梦
这篇文章主要为大家详细介绍了vue前端sku实现的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
this.value.skuStockList = [];
let skuList = this.value.skuStockList;
//只有一个属性时
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0];
for (let i = 0; i < attr.values.length; i++) {
skuList.push({
spData: JSON.stringify([{key:attr.name,value:attr.values[i]}])
});
}
} else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
} else {
let attr0 = this.selectProductAttr[0];
let attr1 = this.selectProductAttr[1];
let attr2 = this.selectProductAttr[2];
for (let i = 0; i < attr0.values.length; i++) {
if (attr1.values.length === 0) {
skuList.push({
spData: JSON.stringify([{key:attr0.name,value:attr0.values[i]}])
});
continue;
}
for (let j = 0; j < attr1.values.length; j++) {
if (attr2.values.length === 0) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
skuList.push({
spData: JSON.stringify(spData)
});
continue;
}
for (let k = 0; k < attr2.values.length; k++) {
let spData = [];
spData.push({key:attr0.name,value:attr0.values[i]});
spData.push({key:attr1.name,value:attr1.values[j]});
spData.push({key:attr2.name,value:attr2.values[k]});
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}假设的选择属性数据
假设选择的商品属性如下（可以根据需要调整）：
this.selectProductAttr = [
{ name: "颜色", values: ["红色", "蓝色"] },
{ name: "大小", values: ["S", "M"] },
{ name: "材质", values: ["棉", "羊毛"] }
];
初始化部分
首先，代码初始化了一个空数组 skuStockList，并通过 skuList 引用指向该数组。
this.value.skuStockList = []; let skuList = this.value.skuStockList;
这段代码的目的是为后续生成的 SKU 列表提供一个存储地方。
处理不同数量的属性
接下来，代码根据 this.selectProductAttr.length 的值判断当前有多少个属性被选择。根据属性的数量，代码将生成不同数量的组合 SKU。
1. 只有一个属性时
if (this.selectProductAttr.length === 1) {
let attr = this.selectProductAttr[0]; // 获取第一个属性
for (let i = 0; i < attr.values.length; i++) { // 遍历该属性的所有值
skuList.push({
spData: JSON.stringify([{ key: attr.name, value: attr.values[i] }])
});
}
}
执行过程：
- 只有一个属性 "颜色"，其值为 ["红色", "蓝色"]。
- 对这个属性的每一个值，生成一个 SKU 并推入 skuList。
结果：
[
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"}]"}
]
2. 有两个属性时
else if (this.selectProductAttr.length === 2) {
let attr0 = this.selectProductAttr[0]; // 获取第一个属性
let attr1 = this.selectProductAttr[1]; // 获取第二个属性
for (let i = 0; i < attr0.values.length; i++) { // 遍历第一个属性的所有值
if (attr1.values.length === 0) { // 如果第二个属性没有值
skuList.push({
spData: JSON.stringify([{ key: attr0.name, value: attr0.values[i] }])
});
continue; // 跳过当前循环，继续处理下一个第一个属性的值
}
for (let j = 0; j < attr1.values.length; j++) { // 遍历第二个属性的所有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一个属性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二个属性的值
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}执行过程：
- 有两个属性 "颜色" 和 "大小"，其中 "颜色" 有 ["红色", "蓝色"]，"大小" 有 ["S", "M"]。
- 代码会生成两个属性的所有组合。即，遍历 "颜色" 的每一个值，并与 "大小" 的每个值进行配对。
结果：
[
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"M\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"S\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"M\"}]"}
]
3. 有三个属性时
else {
let attr0 = this.selectProductAttr[0]; // 获取第一个属性
let attr1 = this.selectProductAttr[1]; // 获取第二个属性
let attr2 = this.selectProductAttr[2]; // 获取第三个属性
for (let i = 0; i < attr0.values.length; i++) { // 遍历第一个属性的所有值
if (attr1.values.length === 0) { // 如果第二个属性没有值
skuList.push({
spData: JSON.stringify([{ key: attr0.name, value: attr0.values[i] }])
});
continue; // 跳过当前循环，继续处理下一个第一个属性的值
}
for (let j = 0; j < attr1.values.length; j++) { // 遍历第二个属性的所有值
if (attr2.values.length === 0) { // 如果第三个属性没有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一个属性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二个属性的值
skuList.push({
spData: JSON.stringify(spData)
});
continue; // 跳过当前循环，继续处理下一个第二个属性的值
}
for (let k = 0; k < attr2.values.length; k++) { // 遍历第三个属性的所有值
let spData = [];
spData.push({ key: attr0.name, value: attr0.values[i] }); // 添加第一个属性的值
spData.push({ key: attr1.name, value: attr1.values[j] }); // 添加第二个属性的值
spData.push({ key: attr2.name, value: attr2.values[k] }); // 添加第三个属性的值
skuList.push({
spData: JSON.stringify(spData)
});
}
}
}
}执行过程：
有三个属性 "颜色"、"大小" 和 "材质"，其值分别为：
- "颜色"：["红色", "蓝色"]
- "大小"：["S", "M"]
- "材质"：["棉", "羊毛"]
代码会生成三个属性的所有组合。即，遍历 "颜色" 的每一个值，和 "大小"、"材质" 的每个值进行配对。
结果：
[
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材质\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材质\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材质\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"红色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材质\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材质\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"S\"},{\"key\":\"材质\",\"value\":\"羊毛\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材质\",\"value\":\"棉\"}]"},
{"spData": "[{\"key\":\"颜色\",\"value\":\"蓝色\"},{\"key\":\"大小\",\"value\":\"M\"},{\"key\":\"材质\",\"value\":\"羊毛\"}]"}
]
总结
- 代码根据选择的商品属性数量动态生成不同数量的 SKU 组合。
- 当属性数量为 1 时，生成一个包含该属性所有值的 SKU 列表。
- 当属性数量为 2 时，生成包含这两个属性所有值的组合 SKU 列表。
- 当属性数量为 3 时，生成包含三个属性的所有组合 SKU 列表。
- 每一个 SKU 都是一个包含属性名和值的 JSON 字符串，保存在 skuStockList 中。
通过这些步骤，代码可以灵活地处理多属性商品的不同组合，最终生成不同的 SKU 列表。
到此这篇关于vue前端sku实现的方法小结的文章就介绍到这了,更多相关vue sku内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！