订单页的渲染
支付方式
支付方式有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;} },然后在頁面渲染：
效果：
?
總結
