商城-下单-订单结算页

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.商品列表

效果图：

这里的送货清单，其实就是购物车中用户选择的要付款的商品

因此，我们需要在购物车跳转过来的同时，携带选中的购物车的信息

2.4.1.购物车信息获取

我们修改cart.html中的页面跳转逻辑，把用户选中的购物车信息传递过来：

然后在created钩子函数中获取购物车数据，保存到本地属性，要注意的是，我们应该在获取数据前校验用户登录状态，如果发现未登录，则直接重定向到登录页：

然后重新加载页面，查看控制台：

2.4.2.页面渲染

要修改的页面位置：每一个li就是一件商品

我们修改为：

<ul class