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>//引入configimport  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等于activefor(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>

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

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

168.Vue.js智能扫码点餐系统（二）【搭建Vue开发环境】2019.03.18
0.知识点搭建开发环境 1.搭建Vue开发环境 2.安装vue-cli脚手架安装命令 // 第一种: npm install --global vue-cli// 第二种 cnpm install ...
android简单点餐系统_微信点餐和扫码点餐系统能为商家带来什么？
近几年来,我们去餐厅吃饭的时候可能会发现,很多餐厅都安装扫码点餐系统.和微信点餐系统,相比传统餐饮软件及传统模式,这带来的不只是节省人工.一套系统稳定.功能齐全的微信点餐系统,对餐饮管理而言,能够降低 ...
基于微信小程序springboot粤味早茶店微信扫码点餐系统源码和论文
这是一个功能简单的微信点餐小程序. 当今社会的发展,日新月异,发生了翻天覆地的变化,尤其是在智能方面,发展的更加迅速,随之带来的就是各个产业的智能化.军工业,化工,当然还有餐饮业,都在逐渐向智能化进发 ...
手机点餐系统概述_疫情之下，无接触点餐模式再成热搜，扫码点餐系统能不能普及？...
近期,广东省逐步恢复堂食,提倡隔桌就餐!宁波.成都等地餐饮店也在慢慢复工,倡导隔桌就餐,间距至少1.5米.随着复工复产政策的执行,这类情况也正在其他各地重演. 受疫情影响,餐饮行业面临巨大改革,其中线 ...
智慧扫码点餐系统源码
智慧餐厅扫码点餐小程序系统源码 1. 开发语言:JAVA 2. 数据库:MySQL 3. 原生小程序 4. Saas 模式 5. 带调试部署视频 6.总后台管理端+商家端+门店端+小程序用户端智慧扫 ...
外卖扫码点餐系统源码后台管理端+商家端+门店端+小程序用户端源码
外卖点餐堂食点餐扫码点餐本套扫码点餐系统源码基于java语言开发,移动端原生小程序,SaaS模式.代码完整,带部署调试视频. 系统由总后台管理端+商家端+门店端+小程序用户端组成,支持扫码点单. ...
微信扫码点餐系统制作流程简单，方便客户下单
扫码点餐,对于餐饮行业来说,是必不可少的重要的一环,它可以帮助顾客点餐.顾客通过微信扫码,就可以获取到菜单,查看菜品的图片以及优惠活动,操作十分简单,而且效率比传统菜单要好很多. 对于新手来说,不会制 ...
扫码点餐系统源码外卖点餐小程序源码点餐APP全套源码
1. 开发语言:JAVA 2. 数据库:MySQL 3. 原生小程序 4. Sass 模式 5. 带调试视频门店独立管理后台,可打包微信小程序,H5,APP,LBS定位附近门店,可导航前往下单,订单 ...
分享商家为什么要做扫码点餐系统_微信小程序点餐系统有什么作用
商家为什么要开通"扫码点餐" 解决服务员不够用的问题. 不怕顾客跑单漏单. 在微信就能管理菜品.查看营业额. 订单小票显示顾客桌号和已点菜品. 可在"附近的小程序&quo ...

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

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

最新文章

热门文章