赞
踩
window.location.href = “http://www.leyou.com/cart.html”;
});
}
结果:
添加完成后,页面会跳转到购物车结算页面:cart.html
因为会多次校验用户登录状态,因此我们封装一个校验的方法:
在common.js中:
页面加载时,就应该去查询购物车。cart.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.num++;
ly.verifyUser()
.then(() => {
// TODO 已登录,向后台发起请求
})
.catch(() => {
// 未登录,直接操作本地数据
ly.store.set(“carts”, this.carts);
})
},
decrement© {
if (c.num <= 1) {
return;
}
c.num–;
this.verifyUser()
.then(() => {
// TODO 已登录,向后台发起请求
})
.catch(() => {
// 未登录,直接操作本地数据
ly.store.set(“carts”, this.carts);
})
},
给删除按钮绑定事件:
点击事件中删除商品:
deleteCart(i) {
ly.verifyUser()
.then(() => {
// 已登录
})
.catch(() => {
// 未登录
this.carts.splice(i, 1);
ly.store.set(“carts”, this.carts);
})
}
在页面中,每个购物车商品左侧,都有一个复选框,用户可以选择部分商品进行下单,而不一定是全部:
我们定义一个变量,记录所有被选中的商品:
我们给商品前面的复选框与selected绑定,并且指定其值为当前购物车商品:
我们在加载完成购物车查询后,初始化全选:
然后编写一个计算属性,计算出选中商品总价格:
computed: {
totalPrice() {
return this.selected.map(c => c.num * c.price).reduce((p1, p2) => p1 + p2, 0);
}
}
在页面中展示总价格:
效果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。