uniapp微信小程序不同规格商品显示对应价格和库存量
思路:将后端给的数据(我这先直接存data里)用键值对存起来,然后前端点击事件也存对应的键值对,比较二者得出对应的规格,显示对应价格和库存量效果如下:代码如下:// 商品的规格细节sizes_detail:[{'id': '1','price': '10','stock': '10','productSpecs': {'规格':'小份',
思路:将后端给的数据(我这先直接存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;
},
更多推荐
所有评论(0)