Vue nodejs商城-訂單模塊

1、訂單列表渲染

新建OrderConfirm.vue訂單確認頁面，添加路由

src/router/index.js添加路由

1. import OrderConfirm from '@/views/OrderConfirm' // 訂單確認頁面
2.  
3. export default new Router({
4.   routes: [
5.     {
6.       path: '/orderConfirm', // 訂單確認頁面路由
7.       name: 'OrderConfirm',
8.       component: OrderConfirm
9.     }
10.   ]
11. })

src/views/OrderConfirm.vue 
要獲取訂單列表，不須要再從新寫接口，只須要使用查詢購物車列表的接口，提取出購物車列表。在渲染時頁面時，判斷選中的商品才顯示v-if="item.checked=='1'"。
對於一些價格數字不要忘記格式化，使用過濾器對價格進行格式化。

1. <!--列表渲染-->
2. <ul class="cart-item-list">
3.     <li v-for="item in cartList" v-if="item.checked=='1'">
4.         <!-- 商品圖片和商品名稱 -->
5.         <div class="cart-tab-1">
6.             <div class="cart-item-pic">
7.                 <img :src="'/static/'+item.productImage" :alt="item.productName">
8.             </div>
9.             <div class="cart-item-title">
10.                 <div class="item-name">{{item.productName}}</div>
11.             </div>
12.         </div>
13.         <!-- 商品單價 -->
14.         <div class="cart-tab-2">
15.             <div class="item-price">{{item.salePrice | currency('$')}}</div>
16.         </div>
17.         <!-- 商品數量 -->
18.         <div class="cart-tab-3">
19.             <div class="item-quantity">
20.                 <div class="select-self">
21.                     <div class="select-self-area">
22.                         <span class="select-ipt">×{{item.productNum}}</span>
23.                     </div>
24.                 </div>
25.                 <div class="item-stock item-stock-no">In Stock</div>
26.             </div>
27.         </div>
28.         <!-- 商品總金額 -->
29.         <div class="cart-tab-4">
30.             <div class="item-price-total">{{(item.salePrice*item.productNum) | currency('$')}}</div>
31.         </div>
32.     </li>
33. </ul>
34.  
35.  
36. <!-- Price count -->
37. <div class="price-count-wrap">
38.     <div class="price-count">
39.       <ul>
40.         <li>
41.           <span>Item subtotal:</span> <!-- 訂單總金額 -->
42.           <span>{{subTotal | currency('$')}}</span>
43.         </li>
44.         <li>
45.           <span>Shipping:</span> <!-- 配送費 -->
46.           <span>{{shipping | currency('$')}}</span>
47.         </li>
48.         <li>
49.           <span>Discount:</span> <!-- 折扣 -->
50.           <span>{{discount | currency('$')}}</span>
51.         </li>
52.         <li>
53.           <span>Tax:</span> <!-- 稅費 -->
54.           <span>{{tax | currency('$')}}</span>
55.         </li>
56.         <li class="order-total-price">
57.           <span>Order total:</span> <!-- 用戶支付總金額 -->
58.           <span>{{orderTotal | currency('$')}}</span>
59.         </li>
60.       </ul>
61.     </div>
62. </div>
63.  
64. import axios from 'axios'
65. import {currency} from '@/util/currency.js' // 對價格格式化的通用方法
66.  
67. export default {
68.     data(){
69.       return {
70.         shipping: 100, // 配送費
71.         discount:200, // 折扣
72.         tax:400, // 扣稅
73.  
74.         subTotal:0, // 訂單總金額(是購物車選中商品的總金額)
75.  
76.         orderTotal:0, // 總金額+配送費-折扣+稅費 = orderTotal用戶須要支付的金額,默認爲0
77.  
78.         cartList:[] // 購物車列表
79.       }
80.     },
81.     mounted(){
82.       this.init();
83.     },
84.     filters:{ // 定義局部過濾器
85.       currency:currency // currency.js傳過來的本就是函數
86.     },
87.     methods:{
88.       init(){
89.         axios.get('/users/cartList').then((response)=>{ // 訂單確認列表不須要再寫接口，直接用購物車列表的接口，渲染頁面時選取選中的商品做爲訂單確認的商品
90.           let res= response.data;
91.           this.cartList = res.result;
92.  
93.           this.cartList.forEach((item)=>{ // 遍歷購物車商品，獲取選中商品的總金額
94.             if(item.checked == '1'){
95.               this.subTotal += item.salePrice*item.productNum;
96.             }
97.           })
98.  
99.           this.orderTotal = this.subTotal+this.shipping-this.discount+this.tax; // 獲取用戶最終支付的金額，(總金額+配送費-折扣+稅費)
100.         })
101.       }
102.     }
103. }

 

2、建立訂單功能實現

(1)點擊支付跳轉到支付頁面，支付是由第三方作的集成的支付，沒辦法模擬複雜的支付場景，如今只作點擊支付建立訂單和跳轉到成功頁面，支付功能省略掉。 

(2)生成的訂單裏面有訂單生成的時間，首先須要有對時間格式化的函數方法。

時間格式化server/util/util.js

1. /**
2.  * Created by jacksoft on 17/4/26.
3.  * 直接對Date對象原型添加方法
4.  */
5. Date.prototype.Format = function (fmt) {
6.   var o = {
7.     "M+": this.getMonth() + 1, //月份
8.     "d+": this.getDate(), //日
9.     "h+": this.getHours(), //小時
10.     "m+": this.getMinutes(), //分
11.     "s+": this.getSeconds(), //秒
12.     "q+": Math.floor((this.getMonth() + 3) / 3), //季度
13.     "S": this.getMilliseconds() //毫秒
14.   };
15.   if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
16.   for (var k in o)
17.     if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
18.   return fmt;
19. }
20.  
21. module.exports = {};

 

訂單生成接口 server/routes/users.js
訂單生成是將訂單信息(包含訂單Id/訂單總金額/地址信息/下單的商品信息/訂單狀態/訂單建立時間等)存入數據庫。

1. require('./../util/util'); // 引入格式化函數
2.  
3. // 建立訂單功能
4. router.post('/payMent', function(req,res,next){
5.     // 前端傳參：訂單的地址id;訂單最終的總金額
6.     var userId = req.cookies.userId,
7.         addressId = req.body.addressId,
8.         orderTotal = req.body.orderTotal;
9.     User.findOne({userId:userId}, function(err,doc){
10.         if(err){
11.             res.json({
12.                 status:'1',
13.                 msg:err.message,
14.                 result:''
15.             })
16.         }else{
17.             var address = '',goodsList = [];
18.             // 獲取當前用戶的地址信息
19.             doc.addressList.forEach((item)=>{
20.                 if(addressId == item.addressId){
21.                     address = item;
22.                 }
23.             })
24.             // 獲取當前用戶的購物車的購買商品
25.             doc.cartList.filter((item)=>{
26.                 if(item.checked == '1'){
27.                     goodsList.push(item);
28.                 }
29.             })
30.  
31.             //建立訂單Id
32.             var platform = '622'; // 平臺系統架構碼
33.             var r1 = Math.floor(Math.random()*10);
34.             var r2 = Math.floor(Math.random()*10);
35.  
36.             var sysDate = new Date().Format('yyyyMMddhhmmss'); // 系統時間：年月日時分秒
37.             var orderId = platform+r1+sysDate+r2; // 21位
38.  
39.             // 訂單建立時間
40.             var createDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
41.  
42.             // 生成訂單
43.             var order = {
44.                 orderId:orderId, // 訂單id
45.                 orderTotal:orderTotal, // 訂單總金額(直接拿前端傳過來的參數)
46.                 addressInfo:address, // 地址信息
47.                 goodsList:goodsList, // 購買的商品信息
48.                 orderStatus:'1', // 訂單狀態，1成功
49.                 createDate:createDate // 訂單建立時間
50.             }
51.  
52.             // 訂單信息存儲到數據庫
53.             doc.orderList.push(order);
54.  
55.             doc.save(function (err1,doc1) {
56.                 if(err1){
57.                     res.json({
58.                         status:"1",
59.                         msg:err.message,
60.                         result:''
61.                     });
62.                 }else{
63.                     // 返回訂單的id和訂單的總金額給前端，下一個頁面要用到
64.                     res.json({
65.                         status:"0",
66.                         msg:'',
67.                         result:{
68.                             orderId:order.orderId,
69.                             orderTotal:order.orderTotal
70.                         }
71.                     });
72.                 }
73.             });
74.         }
75.     })
76. })

 

src/views/OrderConfirm.vue
傳參要傳訂單的地址id和訂單的總金額
訂單的地址id從訂單頁面的路由獲取參數id值 http://localhost:8080/#/orderConfirm?addressId=100001 的100001,this.$route.query.addressId
成功時跳轉到訂單成功頁面this.$router.push({path:'/orderSuccess?orderId='+res.result.orderId})

1. // 點擊支付按鈕
2. payMent(){ // 點擊支付
3.  
4.     // 從路由那裏獲取到訂單地址的id
5.     // http://localhost:8080/#/orderConfirm?addressId=100001
6.     var addressId = this.$route.query.addressId;
7.  
8.     axios.post('/users/payMent',{
9.       addressId:addressId,
10.       orderTotal:this.orderTotal
11.     }).then((response)=>{
12.       let res = response.data;
13.       if(res.status == '0'){
14.         console.log('order created success');
15.  
16.         // 路由跳轉到訂單成功頁面
17.         this.$router.push({
18.           path:'/orderSuccess?orderId='+res.result.orderId
19.         })
20.       }
21.     })
22. }

點擊支付按鈕，請求成功，返回生成的訂單Id(orderId)和訂單總金額(orderTotal)。訂單Id=6221201801252245492,622=平臺架構碼/1=隨機數r1/20180125224549=年月日時分秒/2=隨機數r2

跳轉到訂單成功頁面
 

訂單生成存儲到了數據庫

3、訂單成功頁面

新建訂單成功頁面組件src/views/orderSuccess.vue,添加頁面路由

src/router/index.js

1. import OrderSuccess from '@/views/OrderSuccess' // 訂單成功頁面
2.  
3. export default new Router({
4.   routes: [
5.     {
6.       path: '/orderSuccess', // 訂單成功頁面
7.       name: 'OrderSuccess',
8.       component: OrderSuccess
9.     }
10.   ]
11. })

後端接口server/routes/users.js,根據前端傳的訂單Id查詢訂單信息

1. //根據訂單Id查詢訂單信息
2. router.get("/orderDetail", function (req,res,next) {
3.     var userId = req.cookies.userId,
4.         orderId = req.param("orderId"); // 前端傳過來的訂單id
5.     User.findOne({userId:userId}, function (err,userInfo) {
6.         if(err){
7.             res.json({
8.                 status:'1',
9.                 msg:err.message,
10.                 result:''
11.             });
12.         }else{
13.             var orderList = userInfo.orderList; // orderList訂單列表
14.             if(orderList.length>0){ // 說明有訂單
15.                 var orderTotal = 0;
16.                 // 遍歷訂單列表，根據訂單id獲得該訂單總金額orderTotal
17.                 orderList.forEach((item)=>{
18.                     if(item.orderId == orderId){
19.                         orderTotal = item.orderTotal;
20.                     }
21.                 });
22.                 if(orderTotal>0){
23.                     res.json({
24.                         status:'0',
25.                         msg:'',
26.                         result:{
27.                             orderId:orderId,
28.                             orderTotal:orderTotal
29.                         }
30.                     })
31.                 }else{
32.                     res.json({
33.                         status:'120002',
34.                         msg:'無此訂單',
35.                         result:''
36.                     });
37.                 }
38.             }else{
39.                 res.json({
40.                     status:'120001',
41.                     msg:'當前用戶未建立訂單',
42.                     result:''
43.                 });
44.             }
45.         }
46.     })
47. });

前端頁面初始化時get請求，傳參訂單id,返回訂單的總金額渲染頁面。訂單的id從路由獲取，http://localhost:8080/#/orderSuccess?orderId=6221201801252245492 中的orderId：this.$route.query.orderId

1. <p>
2.     <span>Order ID：{{orderId}}</span>
3.     <span>Order total：{{orderTotal|currency('$')}}</span>
4. </p>
5. export default {
6.     data(){
7.       return {
8.         orderId:'', // 訂單id
9.         orderTotal:0 // 訂單總金額
10.       }
11.     },
12.     mounted(){
13.       // 從路由那裏獲取到訂單id
14.       // http://localhost:8080/#/orderSuccess?orderId=6221201801252245492
15.       var orderId = this.$route.query.orderId;
16.       console.log("orderId:"+orderId);
17.  
18.       if(!orderId){
19.         return;
20.       }
21.       axios.get("/users/orderDetail",{
22.         params:{
23.           orderId:orderId
24.         }
25.       }).then((response)=>{
26.         let res = response.data;
27.         if(res.status == '0'){
28.           this.orderId = orderId;
29.           this.orderTotal = res.result.orderTotal;
30.         }
31.       })
32.     },
33.     filters:{ // 定義局部過濾器
34.       currency:currency // currency.js傳過來的本就是函數
35.     }
36. }