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

已知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)
        }
      },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIA云计算 V5.0题库

云计算&#xff0c;这是近几年听得最多词了&#xff0c;云计算对于网络的发展帮助非常大&#xff0c;它自身所产生的价值是不可估量的&#xff01;所以云计算的岗位对于很多IT公司来说&#xff0c;都是有一定地位的。华为认证云计算面向的对象很简单就是对云计算技术感兴趣的人…

redis缓存雪崩和缓存

目录 缓存雪崩 解决方案&#xff1a; 缓存击穿 ​解决方案 缓存雪崩 缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 解决方案&#xff1a; u 给不同的 Key 的 TTL 添加随机值 u 利用 Redis …

ACY100油烟浓度在线监控

ACY100油烟浓度在线监控仪-安科瑞 崔丽洁 ACY100型饮食业油烟浓度在线监控仪&#xff08;以下简称监控仪&#xff09;是针对饮食业厨房油烟排放场合设计的&#xff0c;由油烟探头、传感器、控制板和显示屏等部分组成&#xff0c;用于监控油烟、颗粒物和非甲烷总烃等污染物的排放…

Python(六十五)字典的特点

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

【更新】119所院校考研重点勾画更新预告!

截至目前&#xff0c;我已经发布了47篇不同院校的择校分析。发布了87套名校信号考研真题以及119所不同院校的考研知识点重点勾画。 另外为了更好服务已经报名的同学&#xff0c;24梦马全程班也到了收尾的阶段。即将封班&#xff01;需要报名的同学抓紧啦&#xff01; 去年开始…

机器人开发--兴颂雷达介绍

机器人开发--兴颂雷达介绍 1 介绍2 使用手册参考 1 介绍 佛山市兴颂机器人科技有限公司&#xff08;Hinson&#xff09;是一家集研发、设计、生产、销售机器人(AGV)导航核心零部件、并提供整体运动控制方案的自主创新型国家高新技术企业。 2 使用手册 兴颂激光雷达使…

skywalking全链路追踪

文章目录 一、介绍二、全链路追踪1. 测试1 - 正常请求2. 测试2 - 异常请求 三、过滤非业务请求链路1. 链路忽略插件2. 配置3. 测试 一、介绍 在上一篇文章skywalking安装教程中我们介绍了skywalking的作用以及如何将其集成到我们的微服务项目中。本篇文章我们介绍在微服务架构…

PostMan调用gitlab接口,OAuth 2.0 身份认证 API ,copy完事~

获取token接口&#xff1a; https://gitlab.***.com/oauth/token &#xff0c;接下来就可以调用其他功能的接口了 例&#xff1a;创建账户&#xff0c;将获取到的access_token放置在接口请求的token中 其他接口调用同上

ChatGPT辅助写论文:提升效率与创造力的利器

写作是人类最重要的交流方式之一&#xff0c;也是学术研究中不可或缺的环节。然而&#xff0c;写作并不是一件容易的事情&#xff0c;尤其是对于科研人员来说&#xff0c;他们需要花费大量的时间和精力来撰写高质量的论文&#xff0c;并且面临着各种各样的挑战&#xff0c;如语…

环境温度变化对DC电源模块稳定性的影响

环境温度变化对DC电源模块稳定性的影响 BOSHIDA DC电源模块是一种将交流电输入转化为稳定直流电输出的设备&#xff0c;其输出电压稳定性是非常重要的指标之一。在使用过程中&#xff0c;环境温度的变化可能会对其稳定性造成影响&#xff0c;因此需要对其进行充分的了解。 首先…

用Log4j 2记录日志

说明 maven工程中增加对Log4j 2的依赖 下面代码示例的maven工程中的pom.xml文件中需要增加对Log4j 2的依赖&#xff1a; <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.20.0&…

SQL92 SQL99 语法 Oracle 、SQL Server 、MySQL 多表连接、Natural 、USING

SQL92 VS SQL 99 语法 92语法 内连接 from table1&#xff0c; table2 where table1.col table2.col 外连接 放在 从表 左连接&#xff1a; from table1&#xff0c; table2 where table1.col table2.col() 右连接&#xff1a; from table1&#xff0c; table2 where table…

分布式协议与算法——拜占庭将军问题

拜占庭将军问题 背景&#xff1a;以战国时期为背景 战国时期&#xff0c;齐、楚、燕、韩、赵、魏、秦七雄并立&#xff0c;后来秦国的势力不断强大起来&#xff0c;成了东方六国的共同威胁。于是&#xff0c;这六个国家决定联合&#xff0c;全力抗秦&#xff0c;免得被秦国各个…

18. SpringBoot 如何在 POM 中引入本地 JAR 包

❤️ 个人主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;成功解决 BUG 合集 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; Spring Boot 是一种基于 Spring 框架的轻量级应用程序开发框架&#xff0c;它提供了快速开发应用程…

el-table那些事

el-table那些事 获取el-table所有勾选的行数据 用于记录工作和日常学习遇到的坑&#xff0c;需求。 vue3element-plusts 获取el-table所有勾选的行数据 1、需要先声明一个ref变量&#xff0c;并赋值给el-table 2、通过el-table提供的getSelectionRows()函数获取选中的"行…

uni-app:分页实现多选功能

效果 代码解析 一、标签-列表 <view class"item_all" v-for"(item, index) in info" :key"index"><view class"position parameter-info text-over" :class"{checked_parameter: item.checked}" :data-id"i…

gradio创建机器学习的好工具 基本使用和示例

1.gradio介绍 Gradio: 用Python构建机器学习网页APP Gradio是一个开源的Python库,用于构建演示机器学习或数据科学,以及web应用程序。 使用Gradio,您可以基于您的机器学习模型或数据科学工作流快速创建一个漂亮的用户界面,让用户可以”尝试“拖放他们自己的图像、粘贴文本…

HTML5(H5)的前生今世

目录 概述HTML5与其他HTML的区别CSS3与其他CSS版本的区别总结 概述 HTML5是一种用于构建和呈现网页的最新标准。它是HTML&#xff08;超文本标记语言&#xff09;的第五个版本&#xff0c;于2014年由万维网联盟&#xff08;W3C&#xff09;正式推出。HTML5的前身可以追溯到互联…

java实现钉钉群机器人@机器人获取信息后,机器人回复(机器人接收消息)

1.需求 鉴于需要使用钉钉群机器人回复&#xff0c;人们提出的问题&#xff0c;需要识别提出的问题中的关键词&#xff0c;后端进行处理实现对应的业务逻辑 2.实现方式 用户群机器人&#xff0c;附带提出的问题&#xff0c;后端接收消息后识别消息内容&#xff0c;读取到关键…

无人机机巢有哪些,无人机机场/机场的主要分类

随着无人机技术的飞速发展&#xff0c;无人机已经渗透到了物流、农业、救援、公共安全等多个领域。而为了使这些无人机能更加高效、灵活地运行&#xff0c;一个新的概念应运而生&#xff0c;那就是无人机机巢&#xff08;UAV Nest&#xff09;。复亚智能无人机机巢是一种供无人…