190.Vue.js智能扫码点餐系统（二十四）【解决修改选择人数bug、提交订单跳转到订单页面】2019.03.26

0、知识点

• 解决修改选择人数bug
• 提交订单跳转到订单页面

1、 Cart.vue

<template>
	<div class="cart_p_num">
					
					// 渲染购物车数据
					<p>购物车中总共有{{totalNum}}个菜</p>
	       			
	       			<p>合计：<span class="price">¥{{allPrice}}</span></p>
				</div>
</template>



					  addOrder(){  //提交订单

                       var uid=storage.get('roomid');

                       var p_num= this.peopleList.p_num;

                       var p_mark= this.peopleList.p_mark;


                       var total_price=this.allPrice;

                       var total_num=this.totalNum;

                       var order=JSON.stringify(this.list);  /*数组   把json对象转化成json字符串*/

                     
                        var api=this.api+'api/addOrder';

                        this.$http.post(api,{
                            uid,
                            p_num,
                            p_mark,
                            total_price,
                            total_num,
                            order                         
                        }).then((response)=>{   // ES6语法                            
                                if(response.body.success){
                                         this.$router.push({ path: 'order' })
                                }else{
                                    alert('提交数据有误');
                                }
                                                
                        },(err)=>{
                            console.log(err);
                        })

                }
        }

• 云服务器提交订单，打印小票
  

• 接口、参数说明
  

2、NavFooter.vue

<li>	
              // 左侧悬浮框，跳转到order页面
              
  			  <router-link to="/order">
                       <img src="../../assets/images/order.png"/>
                        <p>我的订单</p>
                   	</router-link>
                   
 </li>	

3、Order.vue

<!--订单列表-->
	       
	       <div class="order_list">
	       	
	       		<h3>菜品详情:</h3>
	       		<ul class="list">
	       			<li v-for="item in list.items"> // 循环获取items
	       				<div class="title">
	       					{{item.title}}/
                            已下厨
	       				</div>
	       					
       					<div class="num">
       						
       						{{item.num}}份
       					</div>
       					
       					
       					<div class="price">
       						
       						{{item.price}}元
       					</div>
       			
	       			</li>
	       			
	       			
	       		</ul>
	       
	       </div>
       	





			methods:{

            getOrder(){

                    var uid=storage.get('roomid');

                    var api=this.api+'api/getOrder?uid='+uid;

                    this.$http.get(api).then((response)=>{
                        console.log(response);

                        this.list=response.body.result[0];

                    },(error)=>{
                        console.log(error);
                    })

            }
        },
        mounted(){

            this.getOrder();
        }

4、截图

• 显示提交订单成功，跳转到订单页面
• 效果图