此博客用于个人学习,来源于网上,对知识点进行一个整理。
1. 订单结算页:
1.1 页面跳转:
在购物车页面的最下方,有一个去结算按钮:
当点击结算,我们应该跳转到订单结算页,即:getOrderInfo.html。
查看购物车的结算按钮:
可以看到,地址是正确的。但是只有登录用户才可以去结算付款,因此我们不能直接跳转,而是在跳转前校验用户的登录状态,如果发现是未登录,应该重定向到登录页。我们给这个按钮绑定点击事件:
事件中判断登录状态,进行页面跳转:
toOrderInfo() {
// 判断是否登录
ly.verifyUser().then(() => {
// 已登录
window.location.href = "/getOrderInfo.html"
}).catch(() => {
// 未登录
window.location.href = "/login.html?returnUrl=" + window.location.href;
})
}
1.2 支付方式:
支付方式有2种:
- 微信支付
- 货到付款
与我们订单数据中的 paymentType 关联:
所以我们可以在 Vue 实例中定义一个属性来记录支付方式:
然后在页面渲染时与这个变量关联:
1.3 商品列表:
送货清单,其实就是购物车中用户选择的要付款的商品。因此,我们需要在购物车跳转过来的同时,携带选中的购物车的信息。
1)购物车信息获取:
我们修改 cart.html 中的页面跳转逻辑,把用户选中的购物车信息传递过来:
然后在 created 钩子函数中获取购物车数据,保存到本地属性,要注意的是,我们应该在获取数据前校验用户登录状态,如果发现未登录,则直接重定向到登录页:
2)页面渲染:
要修改的页面位置:每一个 li 就是一件商品
修改为:
<ul class="send-detail">
<li v-for="(cart,index) in carts" :key="index">
<div class="sendGoods">
<ul class="yui3-g">
<li class="yui3-u-1-6">
<span><img width="70px" height="70px" :src="cart.image"/></span>
</li>
<li class="yui3-u-7-12"</