商城-下单-订单结算页
- 2.订单结算页
- 2.1.页面跳转
- 2.2.收货人信息（作业）
- 2.3.支付方式
- 2.4.商品列表
- 2.4.1.购物车信息获取
- 2.4.2.页面渲染
- 2.5.总金额
- 2.6.提交订单
- 2.6.1.页面提交
- 2.6.2.精度损失问题
2.订单结算页
2.1.页面跳转
在购物车页面的最下方，有一个去结算按钮：
当点击结算，我们应该跳转到订单结算页，即：getOrderInfo.html
查看购物车的结算按钮：
可以看到，地址是正确的。但是只有登录用户才可以去结算付款，因此我们不能直接跳转，而是在跳转前校验用户的登录状态，如果发现是未登录，应该重定向到登录页！
我们给这个按钮绑定点击事件：
事件中判断登录状态，进行页面跳转：
toOrderInfo() {// 判断是否登录ly.verifyUser().then(() => {// 已登录window.location.href = "/getOrderInfo.html"}).catch(() => {// 未登录window.location.href = "/login.html?returnUrl=" + window.location.href;})
}
登录后测试：
此处页面需要渲染的内容主要包含3部分：
- 收货人信息
- 支付方式
- 商品信息
2.2.收货人信息（作业）
这里的收货人信息肯定是当前登录用户的收货地址。所以需要根据当前登录用户去查询，目前我们在页面是写的假数据：
大家可以在在后台提供地址的增删改查接口，然后页面加载时根据当前登录用户查询，而后赋值给addresses即可。
2.3.支付方式
支付方式有2种：
- 微信支付
- 货到付款
与我们订单数据中的paymentType关联：
所以我们可以在Vue实例中定义一个属性来记录支付方式：
然后在页面渲染时与这个变量关联：
2.4.商品列表
效果图：
这里的送货清单，其实就是购物车中用户选择的要付款的商品
