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 列表。