本篇目录:
1-小程序实现加入购物车操作 2-小程序获取用户收货地址 3-购物车判断是否全选
① 触发点击事件
访问本地缓存中的购物车数据(数组)。
/*
获取缓存中的购物车 数组
由于第一次获取肯定是一个空的字符串,所以给他转化成数组,保证它肯定是数组
*/
let cart=wx.getStorageSync('cart')||[];
② 判断商品是否存在于购物车中
如果在则返回该商品在购物车数组中的索引,如果不存在则返回-1
。
let index=cart.findIndex(v=>v.goods_id==this.goodsData.goods_id);
③ 对存在或不存在购物车时进行相应的动作
if(index===-1){
//表示购物车中没有该数据
this.goodsData.num=1,
//将该数据放入购物车数组中
cart.push(this.goodsData)
}else{
//表示购物车中已经有了 需要给数量+1
cart[index].num++;
}
④ 将购物车中的数据重新放入缓存中
无论是否之前存在该商品,都重新放入。
//将购物车数组重新放入缓存中
wx.setStorageSync('cart', cart);
⑤ 弹窗提示用户添加购物车成功
//弹窗提示用户添加购物车成功
wx.showToast({
title: '加入购物成功',
icon:'success',
//使用用户1.5s之后才能再次点击页面,防止恶意
mask:'true'
})
API中微信提供了获取用户收货地址的方法,从2020年9月24日起,获取用户收货地址无需用户授权。
wx.chooseAddress({
//获取到地址信息
success: (res) => {
console.log(res)
},
})
业务场景:当购物车有很多商品时,当所有商品都勾选了复选框后,全选框也应该被勾选。以此来提醒用户已经选择了购物车中所有的商品了。
思路:先获取到本地缓存中的购物车数据,判断数组中选中属性是否为true,如果都为true则返回true,将获取到值赋值给data中,然后传递前端页面。
使用一个函数,遍历数组中的属性值,如果有一个属性值是false
则返回false。
//计算是否全选
//判断元素中是否有false,只要有一个false就会返回false
//判断数组长度,如果为零直接返回flase
const allChecked=cart.length?cart.every(v=>v.cheked):false;