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>
- 效果图
- 在服务器里面的数据库中显示选择订餐人数、口味信息成功