订单页的渲染

支付方式

支付方式有2种：

• 微信支付

• 货到付款

与我们订单数据中的paymentType关联：

所以我们可以在Vue实例中定义一个属性来记录支付方式：

然后在页面渲染时与这个变量关联：

商品列表

效果图：

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

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

 

购物车信息获取

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

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

页面渲染

要修改的页面位置：每一个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>

总金额

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

可以看出这里主要有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;
    }
},

然后在页面渲染：

效果：