js实现添加购物车功能
功能简介
点击商品加入购物车,如果点击相同的商品,让商品的数量+1
js代码
data: {
// 商品列表项
list:[{id:1,name:"苹果"},{id:2,name:"西瓜"},{id:3,name:"梨"},{id:4,name:"香蕉"},{id:5,name:"葡萄"},{id:6,name:"菠萝"}],
// 我的购物车的列表项
choosed:[],
ischoosed:false,
index:null
},
// 点击添加购物车功能
add:function(e){
// 初始化商品的选中状态
this.setData({
ischoosed:false
})
var that=this;
// 获取当前点击商品的id
var id=e.currentTarget.dataset.item.id
// 获取的当前点击商品的信息
var item=e.currentTarget.dataset.item;
var choosed=this.data.choosed;
//便利购物车列表,如果商品为被选中状态,则ischoosed为true
choosed.forEach(function(item,index){
if(item.id==id){
that.setData({
ischoosed:true,
// 保存当前商品的下标
index:index
})
}
})
// 如果当前商品没有在购物车中,则将该商品push进数组中
if(!this.data.ischoosed){
item.quality=1
choosed.push(item);
console.log(choosed);
//否则,将商品的数量+1
}else{
//根据下标找到对应商品,数量+1
choosed[that.data.index].quality++
}
// 将choosed赋值
this.setData({
choosed
})
}
ttml代码
<view class="product">
<view tt:for="{{list}}" class="pro_item" bindtap="add" data-item="{{item}}">{{item.name}}</view>
</view>
<view>我的购物车</view>
<view class="my_cart">
<view tt:for="{{choosed}}" class="cart_item">
<text>{{item.name}}</text>
<text>X{{item.quality}}</text>
</view>
</view>