订单确认页面

2020-05-13  本文已影响0人  是新来的啊强呀

订单确认页面前端,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
            }
          })
        }
      })
    }
  })
})
上一篇下一篇

猜你喜欢

热点阅读