订单确认页面前端,src/views/orderConfirm.vue
<template>
<div>
...
<div class="container">
<div class="checkout-order">
<!-- order list -->
<div class="page-title-normal checkout-title">
<h2><span>Order content</span></h2>
</div>
<div class="item-list-wrap confirm-item-list-wrap">
<div class="cart-item order-item">
<div class="cart-item-head">
<ul>
<li>Order contents</li>
<li>Price</li>
<li>Quantity</li>
<li>Subtotal</li>
</ul>
</div>
<ul class="cart-item-list">
<li v-for="item in cartList" v-if="item.checked==1">
<div class="cart-tab-1">
<div class="cart-item-pic">
<img v-bind:src="'/static/' + item.productImage" v-bind:alt="item.productName">
</div>
<div class="cart-item-title">
<div class="item-name">{{item.productName}}</div>
</div>
</div>
<div class="cart-tab-2">
<div class="item-price">{{item.salePrice}}</div>
</div>
<div class="cart-tab-3">
<div class="item-quantity">
<div class="select-self">
<div class="select-self-area">
<span class="select-ipt">{{item.productNum}}</span>
</div>
</div>
<div class="item-stock item-stock-no">In Stock</div>
</div>
</div>
<div class="cart-tab-4">
<div class="item-price-total">{{item.salePrice*item.productNum}}</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Price count -->
<div class="price-count-wrap">
<div class="price-count">
<ul>
<li>
<span>Item subtotal:</span>
<span>{{subTotal}}</span>
</li>
<li>
<span>Shipping:</span>
<span>{{Shipping}}</span>
</li>
<li>
<span>Discount:</span>
<span>{{Discount}}</span>
</li>
<li>
<span>Tax:</span>
<span>{{Tax}}</span>
</li>
<li class="order-total-price">
<span>Order total:</span>
<span>{{subTotal+Shipping-Discount+Tax | currency('$')}}</span>
</li>
</ul>
</div>
</div>
<!-- 向前跳转,向后支付跳转-->
<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>
</div>
</div>
...
</div>
</template>
<script>
import NavHeader from "../components/NavHeader";
import NavFooter from "../components/NavFooter";
import NavBread from "../components/NavBread";
import Modal from "../components/Modal";
import axios from '../../node_modules/axios/dist/axios.js'
import {currency} from "../util/currency";
export default {
data(){
return{
cartList:[],
subTotal:0, // 商品价格总额
Shipping:30, // 配送费
Discount:100, // 折扣
Tax:20, // 税
orderTotal:0 // 订单总额
}
},
components:{
NavHeader,
NavBread,
NavFooter
},
filters:{
currency:currency
},
mounted() {
this.init();
},
methods:{
// 初始化,获取已选中的购物车商品列表,计算选中商品的总金额数
init(){
axios.get('/users/cartList').then((response)=>{
let res = response.data;
this.cartList = res.result;
this.cartList.forEach((item)=>{
if(item.checked==1){
this.subTotal += item.salePrice*item.productNum
}
})
this.orderTotal=this.subTotal+this.Shipping-this.Discount+this.Tax
})
},
// 生成订单Id,若成功,并跳转订单成功页面,跳转url接上订单Id
payMent(){
var addressId = this.$route.query.addressId;
axios.post('/users/PayMent',{addressId:addressId,
orderTotal:this.orderTotal}).then((response)=>{
let res = response.data;
if(res.status=='0'){
this.$router.push({ // 路由跳转链接设置
path:'/orderSuccess?orderId='+res.result.orderId
}
)
console.log("order created suc.")
}
})
}
}
}
</script>
后端,生成订单接口
// 生成支付订单接口
router.post('/payMent',function (req,res,next) {
var userId = req.cookies.userId;
var orderTotal = req.body.orderTotal;
var addressId = req.body.addressId;
User.findOne({userId:userId},function (err,doc) {
if(err){
res.json({
status:'1',
msg:err.message,
result:''
})
}else{
var address='';
var goodsList = [];
// 获取当前用户的地址信息
doc.addressList.forEach((item)=>{
if(addressId==item.addressId){
address = item;
}
})
// 获取用户购物车的购买商品
doc.cartList.filter((item)=>{
if(item.checked=='1'){
goodsList.push(item);
}
})
var platform = '622';
var r1 = Math.floor( Math.random()*10);
var r2 = Math.floor( Math.random()*10);
var sysDate = new Date().Format('yyyyMMddhhmmss');
var createDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
var orderId = platform+r1+sysDate+r2;
var order={
orderId:orderId, // 订单Id
orderTotal:orderTotal, // 订单总额
addressInfo:address, // 地址
goodsLsit:goodsList, // 订单商品列表
orderStatus:'1',
createDate:createDate // 订单生成日期
}
doc.orderList.push(order);
doc.save(function (err1,doc1) {
if(err1) {
res.json({
status: '1',
msg: err1.message,
result: ''
})
}else{
res.json({
status:'0',
msg:'',
result:{
orderId:order.orderId,
orderTotal:orderTotal
}
})
}
})
}
})
})
网友评论