177.Vue.js智能扫码点餐系统（十一）【选择用餐人数、备注口味信息、服务器保存用餐人数】2019.03.24

0、知识点

• 选择用餐人数
• 备注口味信息

1、Start.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 class="active">		
                            <span>1人</span>
                        </li>
                        <li>
                            <span>
                                2人
                            </span>
                        </li>
                        <li>
                            <span>
                                3人
                            </span>
                        </li>
                        
                        <li>
                            <span>
                                4人
                            </span>
                        </li>
                        <li>
                            <span>
                                5人
                            </span>
                        </li>
                        <li>
                            <span>
                                6人
                            </span>
                        </li>
                        <li>
                            <span>
                                7人
                            </span>
                        </li>
                        <li>
                            <span>
                                8人
                            </span>
                        </li>
                        <li>
                            <span>
                                9人
                            </span>
                        </li>
                        <li>
                            <span>
                                10人
                            </span>
                        </li>
                        <li>
                            <span>
                                11人
                            </span>
                        </li>
                        
                        <li>
                            <span>
                                12人
                            </span>
                        </li>  
                        
                                                              
                    </ul>

                    <div class="mark_input">

						// 双向数据绑定，v-model
						//  placeholder 框输入“请输入您的口味要求，忌口等（可不填）”
                        <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" class="start" @click="addPeopleInfo()">                
                <span>
                        开始点菜
                </span>                
            </div>  
    </div>
</template>

• script

<script>

    //引入config
    import  Config from '../model/config.js'
    
    export default{

        data () {
            return {
                 'p_num':'1人',  // 选择点餐人数默认是1人
                 'p_mark':'',
                 'api':Config.api
            }
        },
        
        methods:{
            addChangeEnvet(){  // 定义一个 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: 'home' })
                    }
                                        
                },(err)=>{
                    console.log(err);
                })

            }
        },
        mounted(){

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

• 效果图
  
• 在服务器里面的数据库中显示选择订餐人数、口味信息成功