草庐IT

uniapp微信小程序不同规格商品显示对应价格和库存量

sodesine1 2023-04-03 原文

思路：将后端给的数据(我这先直接存data里)用键值对存起来，然后前端点击事件也存对应的键值对，比较二者得出对应的规格，显示对应价格和库存量

效果如下：

代码如下：

// 商品的规格细节
        sizes_detail:[
          {
            'id': '1',
            'price': '10',
            'stock': '10',
            'productSpecs': {
            '规格':'小份',
            '口味':'甜味'
            }
          },
          {
            'id': '2',
            'price': '20',
            'stock': '20',
            'productSpecs': {
            '规格':'小份',
            '口味':'烧烤味'
            }
          },
          {
            'id': '3',
            'price': '30',
            'stock': '30',
            'productSpecs': {
            '规格':'中份',
            '口味':'甜味'
            }
          },
          {
            'id': '4',
            'price': '40',
            'stock': '40',
            'productSpecs': {
            '规格':'中份',
            '口味':'烧烤味'
            }
          }
        ] 

实现的函数

// 点击触发函数
        change(i1, i2) {
          this.sizes[i1].start = i2
        
          // 将选中的选项存起来放入userChooseSize键值对中
          this.saveToUserChooseSize(i1, i2)
        
        },

saveToUserChooseSize(i1,i2){
        this.userChooseSize[this.sizes[i1].name] = this.sizes[i1].children[i2].title
        
        // console.log(this.userChooseSize)
        
        // 将键值对与传过来的进行比较
        this.sizes_detail.forEach(item => {
          if(this.isObjectValueEqualNew(this.userChooseSize,item.productSpecs)){
            // 设置金额和数量
            this.price = item.price
            this.stock = item.stock
            
          }
        })
      },
      
      // 判断键值对是否相等的函数
      isObjectValueEqualNew(a,b){
        // 判断对象是否指向同一内存
        if(a === b) return true;
        
        // 获取对象键值数组
        let aProps = Object.getOwnPropertyNames(a);
        let bProps = Object.getOwnPropertyNames(b);
        
        // 判断键值数组长度是否一致
        if(aProps.length !== bProps.length) return false;
        
        // 遍历键值
        for(let prop in a){
          // 判断a的键是否在b中存在
          if(b.hasOwnProperty(prop)){
            // 存在则判断a的键值是否为对象
            if(typeof a[prop] === 'object'){
              // 是对象则判断是否相等
              // 如果不相等
              if(!isObjectValueEqual(a[prop],b[prop])) return false;  
            } else if(a[prop] !== b[prop]){
              return false;
            }
          } 
          // a的键在b中不存在
          else{
            return false;
          }
        }
        
        return true;
      },

思路原文：uniapp商品详情页规格、SKU选择_偶然路过的吃瓜群众的博客-CSDN博客_uniapp商品规格选择

uniapp微信小程序br39611024程序员节$uni-app$微信小程序

有关uniapp微信小程序不同规格商品显示对应价格和库存量的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  4. java - 为什么 ruby​​ modulo 与 java/other lang 不同？ - 2

    我基本上来自Java背景并且努力理解Ruby中的模运算。(5%3)(-5%3)(5%-3)(-5%-3)Java中的上述操作产生，2个-22个-2但在Ruby中，相同的表达式会产生21个-1-2.Ruby在逻辑上有多擅长这个？模块操作在Ruby中是如何实现的？如果将同一个操作定义为一个web服务，两个服务如何匹配逻辑。 最佳答案 在Java中，模运算的结果与被除数的符号相同。在Ruby中，它与除数的符号相同。remainder()在Ruby中与被除数的符号相同。您可能还想引用modulooperation.

  5. ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  6. ruby-on-rails - 如何用不同的用户运行nginx主进程 - 2

    A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？ 最佳答案 只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(

  7. ruby - 从 sinatra 中的 before do block 返回不同的值 - 2

    有没有办法在sinatra的beforedoblock中停止执行并返回不同的值？beforedo#codeishere#Iwouldliketo'return"Message"'#Iwouldlike"/home"tonotgetcalled.end//restofthecodeget'/home'doend 最佳答案 beforedohalt401,{'Content-Type'=>'text/plain'},'Message!'end如果你愿意，你可以只指定状态，这里有状态、标题和正文的例子

  8. ruby-on-rails - Sunspot:如何对具有不同值的多个字段进行全文查询？ - 2

    我想用sunspot重现以下原始solr查询q=exact_term_text:fooORterm_textv:foo*ORalternate_text:bar*但我无法通过标准的太阳黑子界面理解这是否可能以及如何实现，因为看起来:fulltext方法似乎不接受多个文本/搜索字段参数我不知道将什么参数作为第一个参数传递给fulltext，就好像我通过了"foo"或"bar"结果不匹配如果我传递一个空参数，我得到一个q=*:*范围过滤器(例如with(:term).starting_with('foo*')(顾名思义)作为过滤器查询应用，因此不参与评分。似乎可以手动编写字符串(或者可能使

  9. ruby - 拆分字符串并分配给不同的变量 - 2

    我从ui中得到日期范围为-approved_between"=>"2013-03-17-2013-03-18"我需要拆分此approved_start_date="2013-03-17"和approved_end_date="2013-03-18"...我希望使用它在mysql中查询，因为mysql中的日期格式是created_at:2012-07-2810:35:01.我正在做的是:approved=approved_between.split("")approved_start_date=approved[0]approved_end_date=approved[2]很确定这不是处

  10. ruby - 如果散列有 key ，则使用它。否则，使用不同的 key - 2

    response是一个散列，可能看起来像以下两种情况之一:response={'demo'=>'nil','test_01'=>'DemoData'}或response={'test'=>'DemoData','demo'=>'nil'}我想做这样的事情:ifresponse.has_key?'test_01'new_response.update(:nps_score=>response['test_01']elsenew_response.update(:nps_score=>response['test']end是否有更“Ruby”的方法来解决这个问题？也许使用||的东西运算符(

随机推荐