思路:将后端给的数据(我这先直接存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商品规格选择

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐