vue SKU已知sku.tree算出sku.list类目值和id

news2024/11/17 0:00:14

已知sku.tree算出sku.list类目值和id

在这里插入图片描述

  <van-sku
          ref="sku"
          v-model="showBase"
          :close-on-click-overlay="closeOnClickOverlay"
          :goods="skuData.goods_info"
          :goods-id="skuData.goods_id"
          :hide-stock="skuData.sku.hide_stock"
          :quota="quota"
          :show-add-cart-btn="showAddCartBtn"
          :sku="skuData.sku"
          @add-cart="onAddCartClicked"
        >
          <!-- <template #sku-header>
            <div class="van-sku-actions">
              <van-button
                size="large"
                square
                type="warning"
                @click="onPointClicked"
              >
                积分兑换
              </van-button>
            </div>
          </template> -->
          <template #sku-stepper>
            <!-- <div class="van-sku-actions">
              <van-button
                size="large"
                square
                type="warning"
                @click="onPointClicked"
              >
                积分兑换
              </van-button>
            </div> -->
          </template>
          <!-- <template #sku-actions> -->
          <div slot="sku-actions" class="van-sku-actions">
            <van-button size="large" square type="warning" @click="define">
              加入购物车
            </van-button>
          </div>
          <!-- </template> -->
        </van-sku>
    skuData: {
          sku: {
            // 所有sku规格类目与其值的从属关系,比如商品有颜色和尺码两大类规格,颜色下面又有红色和蓝色两个规格值。
            // 可以理解为一个商品可以有多个规格类目,一个规格类目下可以有多个规格值。
            tree: [
              {
                k: '颜色',
                k_id: '1',
                v: [
                  {
                    id: '30349',
                    name: '天蓝色',
                  },
                  {
                    id: '1215',
                    name: '白色',
                  },
                ],
                k_s: 's1',
                count: 2,
                largeImageMode: false, //  是否展示大图模式
              },
              {
                k_id: 123, // 属性id
                k: '加料', // 属性名
                is_multiple: true, // 是否可多选
                v: [
                  {
                    id: 1222, // 属性值id
                    name: '珍珠', // 属性值名
                    price: 1, // 属性值加价
                    text_status: 1, // 属性启用/禁用状态 0 - 禁用,1 - 启用
                  },
                  {
                    id: 1223,
                    name: '椰果',
                    price: 1,
                    text_status: 1,
                  },
                ],
                 k_s: 's2',
              },
              {
                k_id: 124, // 属性id
                k: '加料', // 属性名
                is_multiple: true, // 是否可多选
                v: [
                  {
                    id: 1225, // 属性值id
                    name: '珍珠', // 属性值名
                    price: 1, // 属性值加价
                    text_status: 1, // 属性启用/禁用状态 0 - 禁用,1 - 启用
                  },
                  {
                    id: 1226,
                    name: '椰果',
                    price: 1,
                    text_status: 1,
                  },
                ],
                  k_s: 's3',
              },
            ],
            // 所有 sku 的组合列表,如下是:白色1、白色2、天蓝色1、天蓝色2
            list: [
              {
                id: 2259,
                price: 0, //价格
                discount: 122,
                stock_num: 20, //库存
                goods_id: 946755,
              },
              // {
              //   id: 2250,
              //   price: 121, //价格
              //   discount: 123,
              //   s1: '30349',
              //   s2: '1223',
              //   stock_num: 22, //库存
              //   goods_id: 946756,
              // },
            ],
            price: '5.00',
            stock_num: 227, // 商品总库存
            none_sku: false, // 是否无规格商品
            hide_stock: false, // 是否隐藏剩余库存
          },
          goods_info: {
            title: '测试商品A',
            picture:
              'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg',
          },
          goods_id: '946755',
          initialSku: {},
        },
mounted() {
      // 调用函数生成sku.list组合列表
      this.generateCombinations(
        this.skuData.sku.tree,
        0,
        {},
        this.skuData.sku.list
      )
    },
  generateCombinations(tree, index, combination, combinations) {
        if (index === tree.length) {
          combinations.push(combination)
          return
        }
        const node = tree[index]
        const v = node.v
        const k_s = node.k_s
        for (let i = 0; i < v.length; i++) {
          const value = v[i]
          const combination1 = {
            id: this.skuData.sku.list[0].id,
            price: this.skuData.sku.list[0].price,
            discount: this.skuData.sku.list[0].discount,
            stock_num: this.skuData.sku.list[0].stock_num,
            goods_id: this.skuData.sku.list[0].goods_id,
          }
          const newCombination = { ...combination, ...combination1}
          newCombination[k_s] = value.id
          this.skuData.sku.list[i]=newCombination
          this.generateCombinations(
            tree,
            index + 1,
            newCombination,
            combinations
          )
          console.log('最后', tree, index + 1, newCombination, combinations)
        }
      },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/837942.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android Ble蓝牙App(二)连接与发现服务

Ble蓝牙App&#xff08;二&#xff09;连接与发现服务 前言正文一、GATT回调二、连接和断连三、连接状态回调四、发现服务五、服务适配器六、显示服务七、源码 前言 在上一篇中我们进行扫描设备的处理&#xff0c;本文中进行连接和发现服务的数据处理&#xff0c;运行效果图如下…

CSGO游戏搬砖行业乱象

CSGO游戏搬砖行业乱象 CSGO游戏搬砖&#xff0c;这个项目&#xff0c;这个概念相信大家已不再陌生。CSGO这款全球竞技游戏&#xff0c;也早已不是当初的游戏&#xff0c;而是带着目的&#xff0c;带着经济系统向大家缓缓走来&#xff0c;一个虚拟的空间&#xff0c;一种虚拟的…

【大数据】Flink 从入门到实践(一):初步介绍

Flink 从入门到实践&#xff08;一&#xff09;&#xff1a;初步介绍 Apache Flink 是一个框架和分布式处理引擎&#xff0c;用于在 无边界 和 有边界 数据流上进行 有状态 的计算。Flink 能在所有常见集群环境中运行&#xff0c;并能以内存速度和任意规模进行计算。 1.架构 1…

算法与数据结构-跳表

文章目录 什么是跳表跳表的时间复杂度跳表的空间复杂度如何高效的插入和删除跳表索引动态更新代码示例 什么是跳表 对于一个单链表来讲&#xff0c;即便链表中存储的数据是有序的&#xff0c;如果我们要想在其中查找某个数据&#xff0c;也只能从头到尾遍历链表。这样查找效率…

OceanBase上的泡泡玛特抽盒机,轻松应对百倍流量峰值

8月3日晚10点&#xff0c;近百万年轻人再次同时涌入泡泡玛特的抽盒机小程序&#xff0c;参加抢抽盲盒新品的狂欢。 每周四的这个时刻&#xff0c;都是对抽盒机系统的一次技术大考。这个考验不但影响着用户体验&#xff0c;也直接影响着泡泡玛特的业绩。据2022年年度财报&#…

向你推荐这5个好用的UI设计软件,快来收藏

好用的UI设计工具将助力设计师实现高效创作&#xff0c;今天本文将为大家推荐5个好用的UI设计工具&#xff0c;一起来看看吧&#xff01; 1、即时设计 即时设计是国产的UI设计工具&#xff0c;它不仅能为设计师提供UI设计上的帮助&#xff0c;还可以助力设计团队实现一体化协…

[CKA]考试之检查可用节点数量

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 检查集群中有多少节点为Ready状态&#xff08;不包括被打上 Taint&#xff1…

java中使用Jsoup和Itext实现将html转换为PDF

1.在build.gradle中安装所需依赖&#xff1a; implementation group: com.itextpdf, name: itextpdf, version: 5.5.13 implementation group: com.itextpdf.tool, name: xmlworker, version: 5.5.13 implementation group: org.jsoup, name: jsoup, version: 1.15.32.创建工具…

Java多线程(1)---多线程认识、四种创建方式以及线程状态

目录 前言 一.Java的多线程 1.1多线程的认识 1.2Java多线程的创建方式 1.3Java多线程的生命周期 1.4Java多线程的执行机制 二.创建多线程的四种方式 2.1继承Thread类 ⭐创建线程 ⭐Thread的构造方法和常见属性 2.2.实现Runnable接口 ⭐创建线程 ⭐使用lambda表达…

大一新生必读:如何选择适合自己的笔记本电脑?

大家好&#xff0c;这里是程序员晚枫&#xff0c; 今天给大家推荐5个适合大学生&#xff0c;尤其是大一新生使用的笔记本电脑。都是大品牌&#xff0c;而且价格实惠&#xff0c;性能优秀&#xff01; 偷偷说一句&#xff0c;点击本文链接有大额优惠券哟~ 01 推荐电脑 以下是…

【IC设计】ICC workshop Lab1 数据准备基本流程 【脚本总结】

Task 1 Create a Milkyway library 先进入lab1_data_setup目录&#xff0c;打开icc_shell&#xff0c;创建项目 create_mw_lib -technology $tech_file -mw_reference_library "$mw_path/sc $mw_path/io $mw_path/ram16x128" -bus_naming_style {[%d]} -open $my_m…

100道Python练习题

100道Python练习题&#xff0c;希望对你提升有所帮助&#xff01; 编写一个程序&#xff0c;输入两个数并计算它们的和。编写一个程序&#xff0c;输入一个字符串&#xff0c;并倒序输出该字符串。编写一个程序&#xff0c;判断一个数是否为质数。编写一个程序&#xff0c;计…

“Why Should I Trust You?” Explaining the Predictions of Any Classifier阅读笔记

“Why Should I Trust You?” Explaining the Predictions of Any Classifier阅读笔记 1. 论文贡献2. 背景 [ 1 ] ^{[1]} [1]3. LIME解释单个样本3.1 总体思想3.2 构建可解释的数据表示 [ 1 ] ^{[1]} [1]3.3 可解释性和忠实度的权衡3.4 局部采样3.5 稀疏线性解释3.6 使用SVM进…

C++ 一行代码删除string字符串中的“\n“、“\r“、“\t“ 和 所有空白字符

这篇博客记录如何删除C字符串中的回车、换行、制表符和所有的空白字符&#xff01; 方式一 示例&#xff1a; std::string str "\n\r\t abc \n\t\r cba \r\t\n"; std::cout << str << std::endl; 运行截图&#xff1a; 使用remove_if进行移除…

当我用Python采集全国加盟品牌详情信息,并进行可视化分析后发现了这些

表弟找我说想开个加盟店&#xff0c; 不知道什么品牌好&#xff0c;让我帮他参谋参谋。 还好我会Python&#xff0c;分分钟就获取到了全国加盟品牌信息&#xff0c;稍加分析就筛选出了最适合他的品牌。 话不多说&#xff0c;咱们直接分享干货&#xff01; 准备工作 开发环境…

第三章 API基础

3-1 String类 1、API概述-帮助文档的使用 【1】API概述 【2】如何使用帮助文档 2、键盘录入字符串案例 【1】需求 需求&#xff1a;按照帮助文档的使用步骤学习Scanner类的使用&#xff0c;并实现键盘录入一个字符串&#xff0c;最后输出在控制台 【2】实现 &#xff08;…

SuperNova论文赏析

1. 引言 前序博客有&#xff1a; Nova: Recursive Zero-Knowledge Arguments from Folding Schemes学习笔记 卡内基梅隆大学 Abhiram Kothapalli 和 微软研究中心 Srinath Setty 2022年论文《SuperNova: Proving universal machine executions without universal circuits》…

36.利用解fgoalattain 有约束多元变量多目标规划问题求解(matlab程序)

1.简述 多目标规划的一种求解方法是加权系数法&#xff0c;即为每一个目标赋值一个权系数&#xff0c;把多目标模型转化为一个单目标模型。MATLAB的fgoalattain()函数可以用于求解多目标规划。 基本语法 fgoalattain()函数的用法&#xff1a; x fgoalattain(fun,x0,goal,weig…

计蒜客T1116——验证子串

C实现验证子串的功能:今天复习了一下数据结构的串部分的内容&#xff0c;突然想起来子串匹配的实现&#xff0c;于是计蒜客随便找一道题写一下&#xff0c;核心的代码为裁剪子串和字符串比较两个内容&#xff0c;建议理解背诵&#xff0c;考研大概率会考。 子串裁剪 string Sf…

让这款音频转文字免费软件帮你解放双手吧

嘿&#xff0c;朋友们!你是不是经常遇到这样的场景——你听到一段精彩的演讲、音乐或者语音笔记&#xff0c;却又不方便手动输入文字&#xff1f;别担心&#xff0c;音频转文字技术将解救你出困境&#xff01;说到这&#xff0c;你是不是也对这项技术动心了呢&#xff1f;想知道…