美文网首页
订单确认页面

订单确认页面

作者: 是新来的啊强呀 | 来源:发表于2020-05-13 10:29 被阅读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
                }
              })
            }
          })
        }
      })
    })
    

    相关文章

      网友评论

          本文标题:订单确认页面

          本文链接:https://www.haomeiwen.com/subject/ojggnhtx.html