当前位置： 代码网 > it编程>前端脚本>Vue.js > vue前端sku实现的方法小结

vue前端sku实现的方法小结

2024年11月25日 • Vue.js •我要评论
this.value.skustocklist = []; let skulist = this.value.skustocklist; //只有一个属性时 
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内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com