wx小程序学习Day7 购物车收货地址按钮、动态渲染购物车、全选按钮、计算总价格和总数量、商品的选中与不选中

今天是学习小程序的第7天

---

---

1. 购物车-收货地址按钮

在pages/cart/index.json中设置一下购物车的title

primary设置颜色为绿色，plain设置背景色透明


实现获取用户的收货地址功能：

• 绑定按钮的点击事件
• 调用小程序内置的api：wx.chooseAddress()来获取用户的收货地址

应该是默认的地址？点确定

就能获取到用户的地址

我们将获取到的地址存入到本地存储中
这样之后每次打开购物车页面的时候，先判断本地存储中有无地址，有就显示

获取本地存储中的地址并设置，放在onShow()里，可能会多次打开此购物车页面，希望每次显示此页面都会执行一次

用wx:if和wx:else判断显示按钮还是显示地址

显示地址的样式随便调一下就行

---

2. 购物车-动态渲染

先写个样式，大概长这个样子

在前面我们把添加进购物车的商品数据保存在了本地，现在我们要获取本地存储中的购物车数据并显示，放在onShow()中
注意我们之前存的名字叫cartList

将数据填入对应的标签

但是我们购物车商品的选择框，是否选择，是需要一个属性来与之相关联的
可以像之前的num一样，在点击添加商品到购物车的时候就设置一个属性checked
pages/goods_detail/index.js：

在checkbox标签上加上这个属性

---

3. 购物车-全选按钮

如果购物车中所有商品都被选中 => 全选被选中
购物车中有任一商品未被选中 => 全选不被选中

⚠️：这里的|| [] 一定要加上，保证其类型不变，不然cartList为空时调用every()会报错

将全选属性allChecked和checkbox的checked属性绑定

但是此时如果购物车为空的话，全选按钮也是选中的，因为当cart为空数组时，every()方法默认返回true，所以我们的代码要改一下

---

4. 购物车-总价格和总数量

商品被选中 => 将它拿来计算
总价格 += 商品单价 * 商品数量
总数量 += 商品数量

在data中定义totalPrice和totalNum
这里把上面遍历数组设置allChecked也一起放进forEach循环里，不用遍历两遍

---

5. 购物车-商品的选中和不选中

1. 为选中框绑定change事件
2. 获取改变了选中状态的商品对象
3. 将该商品对象的状态取反
4. 重新填回data和本地存储中
5. 重新计算总价格和总数量

计算allChecked、totalPrice、totalNum这部分代码重复使用了，可以封装成一个函数