vue前端sku实现

🕗 发布于 2024-11-07 13:26 vue.js 前端 javascript

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

原文地址：https://blog.csdn.net/cmh1008611/article/details/143578955

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：[安洵杯 2019]easy_web 详细题解
下一篇：vue data变量之间相互赋值或进行数据联动

解决 Spring Boot 中 `Ambiguous mapping. Cannot map ‘xxxController‘ method` 错误
在使用 Spring Boot 开发 Web 应用时，经常会遇到各种各样的错误。其中一种常见的错误是。本文将详细介绍这个错误的原因及解决方法，帮助开发者快速定位并解决问题。解决错误的关键在于确保每个方
阅读更多2024-11-15
数据分析案例-笔记本电脑价格数据可视化分析
本实验数据集来源于Kaggle，原始数据集共有1303条数据，13个变量，各变量含义如下：0 laptop_ID-数字-产品ID1 Company-字符串-笔记本电脑制造商2 Product-字符串-
阅读更多2024-11-15
Linux 如何查看当前系统版本的详细信息？
系统中基本都存在，所以是一种标准的获取系统信息的方式。命令以标准的方式提供详细的发行版信息。发行版的说明文件一般位于。
阅读更多2024-11-15
初级数据结构——栈
数据结构栈（Stack）是一种线性的数据结构，它只允许在序列的一端（称为栈顶）进行插入和删除操作。这种特性使得栈成为许多算法和问题解决中的有力工具。栈是一种简单而强大的数据结构，它遵循后进先出的原则，
阅读更多2024-11-15
网络安全练习之 ctfshow_web
根据前面得到的qq邮箱中的qq号查询用户，目前电脑版的QQ添加好友好像不能查看详细信息，手机版的可以看到对方所在地为陕西西安。路径是：/editor/attached/file/tmp/html/no
阅读更多2024-11-15
Python 三种方式实现自动化任务
本文介绍了用Python实现机器人过程自动化的三个包，方便读者选择、对比学习。
阅读更多2024-11-15
C++基础：Pimpl设计模式的实现
PIMPL （ Private Implementation 或 Pointer to Implementation ）是通过一个私有的成员指针，将指针所指向的类的内部实现数据进行隐藏。
阅读更多2024-11-15
【flutter】flutter2升级到3.
以这个 https://github.com/aa286211636/Flutter_QQ 为例子，升级下看看。只有登录界面能正常显示，别的页面都是报错。flutter这版本变动，基本不能直接ru
阅读更多2024-11-15
【JAVA毕业设计】基于Vue和SpringBoot的宠物咖啡馆平台
基于Vue.js和SpringBoot的宠物咖啡馆平台是一个综合性的在线服务系统，旨在为宠物爱好者提供一个便捷的宠物护理和社交场所。该平台分为管理后台和用户网页端，以满足不同用户群体的需求。管理后台主
阅读更多2024-11-15
认证鉴权框架SpringSecurity-2--重点组件和过滤器链篇
这4个接口中，每一个都是当认证或者授权过程中发生结果后触发，可以是失败的场景也可以是成功后触发。1个成功后执行，3个为失败后促发执行。
阅读更多2024-11-15

vue前端sku实现

假设的选择属性数据

初始化部分

处理不同数量的属性

1. 只有一个属性时

2. 有两个属性时

3. 有三个属性时

总结

相关文章