美文网首页
订单确认模块实现

订单确认模块实现

作者: 飞飞廉 | 来源:发表于2018-01-05 17:02 被阅读0次
    image.png

    1、订单确认列表渲染

    请求购物车列表数据,请求后遍历购物车列表,如果选中了就将其push进订单数据等待渲染。同时计算subTotal和Total,比较简单不赘述了。购物车列表请求的后台数据之前已经写过了,直接调用即可。

     mounted(){
            this.init();
          },
          methods:{
             init(){
              axios.get('users/cartList').then((response)=>{
                let res=response.data;
                res.result.forEach((item)=>{           
                  if(item.checked==1){
                    this.cartList.push(item);
                    this.subTotal+=item.salePrice*item.productNum;
                  }
                })
                this.total=this.subTotal+this.shipping+this.tax-this.discount;
              })   
             },
    

    2、点击支付按钮将订单信息传递给下一个订单成功页面

    点击payMent后首先获取刚才从上一个页面传递到此页面url的addressId,然后向后台发起创建订单的请求,传递参数是addressId和orderTotal,相应成功后,进行路由跳转,通过编码方式跳转,并将orderId穿过去。

     payMent(){
              var addressId=this.$route.query.addressId;
              axios.post('users/createOrder',{
                addressId:addressId,
                orderTotal:this.total
              }).then((response)=>{
                let res=response.data;
                if(res.status=='0'){
                  this.$router.push({
                    path:'/OrderSuccess?orderId='+res.result.orderId
                  })
                }
              })
             }
          },
    

    后台创建订单的代码响应:
    orderId:通过随机数和日期创建
    orderStatus:0,表示成功创建
    goodsList:遍历购物车列表,如果是true就将其push进去。
    addressInfo:遍历地址列表,addressId等于谁就将谁赋值给他。
    orderTotal:前端传过来的。
    createDate:采用Date创建系统时间并通过Format格式化。
    创建成功后返回orderId和orderTotal

    router.post('/createOrder',(req,res,next)=>{
        let userId=req.cookies.userId;
        let addressId=req.body.addressId;
        let orderTotal=req.body.orderTotal;
        User.findOne({userId:userId},(err,doc)=>{
            if(err){
                res.json({
                    status:'1',
                    msg:err.message,
                    result:''
                })
            }else{
                let goodsList=[];
                let address='';
                doc.cartList.forEach((item)=>{
                    if(item.checked==1){
                        goodsList.push(item);
                    }
                })
                doc.addressList.forEach((item)=>{
                    if(item.addressId==addressId){
                        address=item;
                    }
                })
    
                let platform='622'
                let r1=Math.floor(Math.random()*10);
                let r2=Math.floor(Math.random()*10);
                var sysDate= new Date().Format('yyyyMMddhhmmss');
                var createDate= new Date().Format('yyyy-MM-dd hh:mm:ss');
                let orderId=platform+r1+sysDate+r2;
    
    
    
                let order={
                    orderId:orderId,
                    orderstatus:'0',
                    goodsList:goodsList,
                    addressInfo:address,
                    orderTotal:orderTotal,
                    createDate:createDate
                }
                doc.orderList.push(order);
                doc.save((err1,doc1)=>{
                    if(err){
                        res.json({
                            status:'1',
                            msg:err1.message,
                            result:''
                        })
                    }else{
                        res.json({
                            status:'0',
                            msg:'',
                            result:{
                                orderId:order.orderId,
                                orderTotal:order.orderTotal
                            }
                        })
                    }
                })
            }
        })
    })
    

    相关文章

      网友评论

          本文标题:订单确认模块实现

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