Vue nodejs商城-订单模块

冷不防 2022-05-11 15:48 342阅读 0赞

orderconfirm.vue

<div class="order-foot-wrap">
      <div class="prev-btn-wrap">
        <router-link class="btn btn--m" to="/address">Previous</router-link>
      </div>
      <div class="next-btn-wrap">
        <button class="btn btn--m btn--red" @click="payMent">Proceed to payment</button>
      </div>
    </div>

这是订单确认页面的按钮

**一、订单列表渲染**

新建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. 
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. \}

[![688651-20180628044203703-399891657.jpg][]][688651-20180628044203703-399891657.jpg 1]

**二、创建订单功能实现**

(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][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  
[![688651-20180628044204828-305259231.jpg][]][688651-20180628044204828-305259231.jpg 1]

跳转到订单成功页面  
[![688651-20180628044205528-726600124.jpg][]][688651-20180628044205528-726600124.jpg 1]

订单生成存储到了数据库  
[![688651-20180628044206186-29045218.jpg][]][688651-20180628044206186-29045218.jpg 1]

[![688651-20180628044206833-1285130263.jpg][]][688651-20180628044206833-1285130263.jpg 1]

**三、订单成功页面**

新建订单成功页面组件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. \}

[![688651-20180628044208496-71910044.jpg][]][688651-20180628044208496-71910044.jpg 1]

[688651-20180628044203703-399891657.jpg]: /images/20220505/9d7e8babb8c2495ab832f63c3319da2f.png
[688651-20180628044203703-399891657.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/13/1.jpg?raw=true
[http_localhost_8080_orderConfirm_addressId_100001]: http://localhost:8080/
[688651-20180628044204828-305259231.jpg]: /images/20220505/587279636a364503853da09e7f205d49.png
[688651-20180628044204828-305259231.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/13/2.jpg?raw=true
[688651-20180628044205528-726600124.jpg]: /images/20220505/2718ce021a914b9ca9f85e0d65aaa902.png
[688651-20180628044205528-726600124.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/13/3.jpg?raw=true
[688651-20180628044206186-29045218.jpg]: /images/20220505/e6d76b93b1224f809bbe38f01737b663.png
[688651-20180628044206186-29045218.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/13/4.jpg?raw=true
[688651-20180628044206833-1285130263.jpg]: /images/20220505/c8778760363545089850abfd1d65ec8e.png
[688651-20180628044206833-1285130263.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/13/5.jpg?raw=true
[688651-20180628044208496-71910044.jpg]: /images/20220505/5c0165e0c6ef4352add2343db95ae423.png
[688651-20180628044208496-71910044.jpg 1]: https://github.com/ccyinghua/vue-node-mongodb-project/blob/master/resource/readme/14/1.jpg?raw=true