说明:
购物车数据存入到storage缓存中。
此篇博文主要讲如何在商品详情页面,点击加入购物车按钮,将商品加入购物车,并更新购物车中商品总数量。
步骤:
点击添加购物车按钮
||
判断该商品是否已经存在于购物车中
|| ||
已经存在 不存在
|| ||
只增加数量 将该商品信息添加到缓存中
具体步骤:
1、从缓存中获取购物车数据 (this._storageKeyName为自定义的缓存名字,如 'cart' )
getCartDataFromLocal(){
var res = wx.getStorageSync(this._storageKeyName);
if(!res){
res = [];
}
return res;
}
2、判断该商品是否已经存在于购物车中
//判断某个商品是否已经添加到购物车中,返回该商品在缓存数据中的下标index和该商品的信息
//id 为商品在数据库中id,arr为缓存中的购物车数据
_isHasThatOne(id,arr){
var result = {index: -1, data: ''};
for(let i = 0; i < arr.length; i++){
if(arr[i].id == id){
result = {
index: i,
data: arr[i]
}
break;
}
}
return result;
}
3、如果之前有,则新增数量就可以;如果之前没有,则增加(别忘更新数据)
//如果之前有,则新增数量就可以
//如果之前没有,则增加
add(item, counts){
var cartData = this.getCartDataFromLocal();
var isHasInfo = this._isHasThatOne(item.id, cartData);
if(isHasInfo.index == -1){
item.counts = counts;
item.selectStatus = true;
cartData.push(item); //新增数据
}else{
cartData[isHasInfo.index].counts += counts;
}
//更新缓存
wx.setStorageSync(this._storageKeyName, cartData);
}
补:具体代码:
1、view
<view class='cart-box'>
<view class='product-counts'>
<picker class="{{product.stock==0?'disabled':''}}" bindchange='bindPickerChange' range="{{test}}" value=''>
<view>
<text class='counts-tips'>数量</text>
<text class='counts-data'>{{productCount}}</text>
<image class='counts-icon' src='../../imgs/icon/arrow@down.png'></image>
</view>
</picker>
</view>
<view class='middle-border'></view>
<view class='add-cart-btn' bindtap='onAddingToCartTap'>
<text>加入购物车</text>
<image class='cart-icon' src="../../imgs/icon/cart.png"></image>
</view>
</view>