美文网首页
订单确认页面

订单确认页面

作者: 是新来的啊强呀 | 来源:发表于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
            }
          })
        }
      })
    }
  })
})

相关文章

  • 订单确认页面

    订单确认页面前端,src/views/orderConfirm.vue 后端,生成订单接口

  • 设计观察06-页面滑动时重要信息一直展示

    京东客户端确认订单页面,当向下滑动页面时,地址栏在页面底部用提示的方式再次展示。

  • 阻止事件冒泡

    最近在做一个商城项目,在确认订单页选择地址列表中的某个地址时,跳转回确认订单页,当需要编辑的时候跳转到修改地址页面...

  • app调用支付宝信用评估过程中的思考

    先看一下这个流程 在确认订单页中打开支付宝支付页面后image.png 从确认订单页到支付宝的信用评估页image...

  • 设计观察04-页面滑动时重要信息一直展示

    京东安卓客户端确认订单页面,当向下滑动页面时,地址栏在页面底部用提示的方式再次展示。 向下滑动后页面

  • 付款剩余时间倒计时的实现

    点击提交订单跳转到确认订单(支付)页面,在顶部有一个倒计时,与此同时,接口返回有创建订单时间字段,根据此字段实现倒...

  • 见识2分钟集成微信和支付宝支付的威力

    在开发的APP中项目集成了微信跟支付宝支付,分别是在订单确认页面,订单列表以及订单详情里面都需要进行支付,并且需要...

  • 2行代码调起微信支付宝支付

    在开发的APP中项目集成了微信跟支付宝支付,分别是在订单确认页面,订单列表以及订单详情里面都需要进行支付,并且需要...

  • Objective-C中的深浅拷贝

    项目中遇到把购物车中勾选的商品数据传递到订单确认页面时,我直接将整个购物车商品的数据模型传递过去,然后再在订单确认...

  • 小程序组件通信

    小程序页面数据传递 修改页面栈 场景 在确认订单页面,用户需要选择已有的收货人,而已有收货人列表在另一个页面,那么...

网友评论

      本文标题:订单确认页面

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