商城-下单-订单结算页

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="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">
                    <div class="desc">{{cart.title}}</div>
                    <div class="seven">
                        <span v-for="(v) in JSON.parse(cart.ownSpec)">{{v + "  "}} </span>
                    </div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="price">￥{{ly.formatPrice(cart.price * cart.num)}}</div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="num">{{cart.num}}</div>
                </li>
                <li class="yui3-u-1-12">
                    <div class="exit">有货</div>
                </li>
            </ul>
        </div>
    </li>
</ul>

2.5.总金额

另外在商品列表下面，还有一个总金额的计算：

可以看出这里主要有4个数据：

• 总金额：totalPay
• 优惠返现：discount
• 运费：postFee
• 实付金额：actualPay

不过我们没有做优惠活动，另外运费需要结合物流系统来计算，暂时我们都设置为0，在order属性中写死：

我们通过计算属性来得到totalPay和actualPay值：

computed: {
    totalNum(){
        return this.carts.reduce((c1, c2) => c1 + c2.num, 0)
    },
    totalPay(){
        return this.carts.reduce((c1, c2) => c1 + c2.price * c2.num, 0);
    },
    actualPay(){
        return this.totalPay + this.order.postFee - this.order.discount;
    }
},

然后在页面渲染：

效果：

2.6.提交订单

2.6.1.页面提交

来看下订单接口所需要的数据：

分为3部分，分别是

• 订单本身的基本信息

  • 总金额
  • 实付金额
  • 付款类型
  • 买家信息就是当前用户

• 订单详情

  • 就是购物车中的商品，不过购物车数据会多出一个userId，我们去除即可：
    

• 物流信息

  • 当前用户选中的物流地址信息

给提交按钮绑定事件：

然后编写方法，组织数据并提交：

methods: {
    submit() {
        // 把购物车数据处理成订单详情
        const orderDetails = this.carts.map(({userId, ...rest}) => rest);
        // 处理物流信息
        const addr = this.addresses[this.selectedAddress];
        const obj = {
            receiver: addr.name,
            receiverState: addr.state,
            receiverCity: addr.city,
            receiverAddress: addr.address,
            receiverDistrict: addr.district,
            receiverMobile: addr.phone,
            receiverZip: addr.zipCode
        };
        // 复制到订单对象
        Object.assign(this.order, obj, {
            orderDetails,
            totalPay: this.totalPay,
            actualPay: this.actualPay,
        });
        // 提交订单
        ly.http.post("/order", this.order).then(({data}) => {
            // 在线支付，需要到付款页
            window.location = "pay.html?orderId=" + data;
        }).catch((resp) => {
            alert("订单提交失败，可能是缺货!")
        })
    }
},

2.6.2.精度损失问题

在页面点击提交测试：

成功生成订单！

然后看页面跳转：

好像有什么不对？订单号的最后2位不正确啊！

这其实是因为JS的长整数精度有限，java的Long类型数据超出了范围，所以出现了精度损失。

我们后台返回的是Json的字符串，在axios内部会自动调用 JSON.parse()方法把json字符串转为JS数据，就会出现进度损失。如果不进行转换，依然当做字符串来使用，就不会有问题了。

因此，我们重写axios对响应的处理回调函数：

再次测试，就OK了。

接下来就轮到支付了。