179.Vue.js智能扫码点餐系统（十三）【修改用餐人数、$nextTick 获取更新后的DOM、购物车没有数据提示继续点餐】2019.03.24

0、知识点

• 修改用餐人数
• $nextTick 获取更新后的DOM
• 购物车没有数据提示继续点餐

1、EditPeopleInfo.vue

<template>
    
    <div id="start">    
           
         <div  class="start_content">			
                
                <header class="start_header">				
                    <img src="../assets/images/canju.png"/> 修改用餐人数
                </header>			
                
                <p class="notice">请选择正确的用餐人数</p>
                            
                <div class="content"> 
                    <ul class="user_list">
                        <li v-for="(item,key) in userList" :class="{'active':parseInt(peopleList.p_num)==key+1}">						
                            <span>{{item}}</span>
                        </li>                
                                                              
                    </ul>

                    <div class="mark_input">
                        <input type="text" v-model='p_mark' placeholder="请输入您的口味要求，忌口等（可不填）"/>
                    </div>    
                   
                    <ul class="mark_list">
                        <li>						
                            <span>打包带走</span>
                        </li>
                        <li>
                            <span>
                               不要放辣椒
                            </span>
                        </li>
                        <li>
                            <span>
                               微辣
                            </span>
                        </li>
                    </ul>
                    
                </div>               
                    
            </div>
            
                    
            <div id="start_cancel" class="start_cancel">
                <router-link to="/cart">                
                    <span>
                            取消
                    </span>     
                </router-link>               
            </div>
           
            <div id="start_ok" class="start_ok" @click="addPeopleInfo()">                
                <span>
                        确定修改
                </span>                
            </div>      

    </div>
</template>






<script>
        //引入config

    import  Config from '../model/config.js'

    export default{

        data () {
            return {
                 'p_num':'1人',
                 'p_mark':'',
                 'api':Config.api,
                 'peopleList':[],
                 'userList':[]
            }
        },
        
        methods:{
            addChangeEnvet(){

                var that=this;/*保存this*/
                

                
                //人数的dom操作
                var userLis=document.querySelectorAll('.user_list li');
                // alert(lis)

                for(var i=0;i<userLis.length;i++){
                    userLis[i].onclick=function(){

                        //去掉所有的li的class，让当前点击的li的class等于active

                        for(var j=0;j<userLis.length;j++){
                            userLis[j].className='';
                        }
                        this.className='active';   //this 就是li这个dom节点

                        //trim()表示去除空格

                        that.p_num=this.querySelector('span').innerHTML.trim();

                    }

                }




                 //口味的dom操作
                 var markLis=document.querySelectorAll('.mark_list li');           

                for(var i=0;i<markLis.length;i++){
                    markLis[i].onclick=function(){

                        for(var j=0;j<markLis.length;j++){
                            markLis[j].className='';
                        }
                        this.className='active';   //this 就是li这个dom节点

                        that.p_mark= that.p_mark+' '+this.querySelector('span').innerHTML.trim();
                    }

                }


            }
            ,addPeopleInfo(){

                //桌子id  桌子号：是扫描二维码从url获取的

                var api=this.api+'api/addPeopleInfo';
                this.$http.post(api,{
                    uid:'a002',                 
                    p_num:this.p_num,
                    p_mark:this.p_mark                                       
                }).then((response)=>{
                    if(response.body.success){

                        this.$router.push({ path: 'cart' })
                    }                                        
                },(err)=>{
                    console.log(err);
                })

            },




            //获取用餐人的信息

            getPeopleInfoList(){


                var api=this.api+'api/peopleInfoList?uid=a002';
                
                this.$http.get(api).then(response => {

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


                    this.p_mark= this.peopleList.p_mark;

                }, response => {
                    // error callback
                });

            }
        },
        mounted(){


            for(var i=0;i<12;i++){

                this.userList.push(i+1+'人');
            }
           

		   // 数据渲染完成操作dom 
		  // vue计算后的数据变化不能直接更新到DOM上，所以DOM无法表现出更新数据后的状态，需要在nextTick中使用回调函数的方式异步加载DOM，保证更新数据后在DOM上表现出来。                   
            this.$nextTick(function(){

                this.addChangeEnvet();
            })


            this.getPeopleInfoList();
        }
    }
</script>

• 效果图
  

2、Cart.vue

<div v-if="!totalNum" class="cart_empty">您的购物车空空的，点击菜单开始点菜</div>



/*购车空*/

.cart_empty{
    
    text-align: center;
    line-height: 3;
    
    h3{
        font-size: 1.8rem;
    }
}