查询购物车
校验用户登录
因为会多次校验用户登录状态，因此我们封装一个校验的方法：
在common.js中：
文章图片
在页面item.html中使用该方法：
文章图片
查询购物车
页面加载时，就应该去查询购物车。
var cartVm = new Vue({
el: "#cartApp",
data: {
ly,
carts: [],// 购物车数据
},
created() {
this.loadCarts();
},
methods: {
loadCarts() {
// 先判断登录状态
ly.verifyUser().then(() => {
// 已登录}).catch(() => {
// 未登录
this.carts = ly.store.get("carts") || [];
this.selected = this.carts;
})
}
}
components: {
shortcut: () => import("/js/pages/shortcut.js")
}
})刷新页面，查看控制台Vue实例：
渲染到页面
接下来，我们在页面中展示carts的数据：
文章图片
要注意，价格的展示需要进行格式化，这里使用的是我们在common.js中定义的formatPrice方法
效果：
文章图片
改数量 我们给页面的
+ 和 -绑定点击事件，修改num 的值：
文章图片
两个事件：
increment(c) {
c.num++;
ly.verifyUser().then(() => {
// TODO 已登录，向后台发起请求
}).catch(() => {
// 未登录，直接操作本地数据
ly.store.set("carts", this.carts);
})
},
decrement(c) {
if (c.num <= 1) {
return;
}
c.num--;
ly.verifyUser().then(() => {
// TODO 已登录，向后台发起请求
}).catch(() => {
// 未登录，直接操作本地数据
ly.store.set("carts", this.carts);
})
}删除商品 给删除按钮绑定事件：
文章图片
点击事件中删除商品：
deleteCart(i){
ly.verifyUser().then(res=>{
// TODO，已登录购物车
}).catch(()=>{
// 未登录购物车
this.carts.splice(i, 1);
ly.store.set("carts", this.carts);
})
}选中商品 在页面中，每个购物车商品左侧，都有一个复选框，用户可以选择部分商品进行下单，而不一定是全部：
文章图片
我们定义一个变量，记录所有被选中的商品：
文章图片
选中一个
我们给商品前面的复选框与selected绑定，并且指定其值为当前购物车商品：
文章图片
初始化全选
我们在加载完成购物车查询后，初始化全选：
文章图片
总价格
【购物车页面渲染】然后编写一个计算属性，计算出选中商品总价格：
computed: {
totalPrice() {
return ly.formatPrice(this.selected.reduce((c1, c2) => c1 + c2.num * c2.price, 0));
}
}在页面中展示总价格：
文章图片
效果：
文章图片
