这次项目是课堂作业所以较为简单，新颖的点是可以叫号取餐，有遮罩式弹窗等。均为同一页面模拟移动端，通过显示隐藏产生如下效果
在后厨叫号点击 【叫号】按钮便可以根据订单号叫顾客取餐
在后厨叫号点击 【完成】按钮订单号便删除
因为用到template.js制作模板需将其下载引入，顶部压缩包中也有全部项目资源
下面是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>餐饮</title>
<style>
* {
list-style: none;
font-size: 14px;
margin: 0px;
padding: 0px;
}
body {
background-color: #fefff2;
}
ul {
margin: 0px;
padding: 0px;
}
a {
color: rgb(128 126 126);
text-decoration: none;
font-weight: 600;
}
#head {
width: 95%;
}
#head ul {
width: 100%;
overflow: hidden;
height: 32px;
background-color: greenyellow;
padding: 10px 0px 0px 20px;
}
#head ul li {
float: left;
margin-right: 20px;
height: 100%;
}
#head ul li a {
height: 30px;
display: block;
width: 100%;
}
#head ul li a:hover {
color: black;
border-bottom: 2px solid black;
}
/* 头部li点击样式 */
.hover{
color: black;
border-bottom: 2px solid black;
}
#context {
width: 100%;
}
#menu li {
padding: 15px 0px 15px 20px;
border-bottom: 1px solid #f2f3f3;
}
#menu li:hover {
color: rgb(107 147 47);
;
font-weight: 600;
background-color: #fafce0;
}
#menu li img {
width: 90px;
margin: 0px 15px 0px 15px;
vertical-align: middle;
}
#sb {
width: 90%;
border: 0px;
border-radius: 3px;
background-color: greenyellow;
padding: 6px 0px;
margin-left: 20px;
color: rgb(93, 93, 92);
font-weight: 600;
margin-top: 20px;
}
/* 后台页面 */
#context_2 {
display: none;
}
#context_2 h3 {
text-align: center;
margin-top: 50%;
color: #777779;
}
.order_up {
background-color: #f7facf;
padding: 10px 20px;
color: #706f6f;
}
.order_up span {
display: block;
float: right;
}
.order_up span:last-child {
margin-right: 53%;
background-color: white;
width: 30px;
text-align: center;
border-radius: 25%;
}
.order_down {
margin-top: 10px;
color: #706f6f;
position: relative;
}
.order_down img {
width: 50px;
margin: 0px 10px 10px 20px;
vertical-align: middle;
}
/* 菜品数量 */
.num {
margin-left: 20px;
}
/* 两个input的父容器 */
.input {
position: absolute;
right: 22px;
bottom: 20px;
}
.order_down input {
border: 0px;
background-color: greenyellow;
color: rgb(128 126 126);
padding: 3px 5px;
border-radius: 4px;
box-shadow: inset 1px 2px 3px 0px #91cb37;
}
/* //设置第一个按钮 */
.finish {
margin-left: 10px;
}
/* 弹窗 */
#dialog {
width: 70%;
/* height: 220px; */
background-color: #fff;
/* border: 3px solid #ccc; */
border-radius: 5px;
position: absolute;
top: 50%;
left: 60%;
margin-left: -200px;
margin-top: -110px;
padding: 0 20px 15px 15px;
text-align: center;
display: none;
z-index: 1;
}
#hdTitle {
padding: 10px 0;
cursor: move;
}
#box_close {
position: absolute;
right: -2px;
top: -2px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
cursor: pointer;
}
#bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
display: none;
}
/* //菜品名称td */
.big {
width: 80px;
}
#order tr td input {
width: 35%;
margin: 0px 1px 0px 2px;
}
#order tr td a {
font-weight: 600;
font-size: 16px;
}
#order tr td img {
width: 80px;
vertical-align: middle;
margin-right: 10px;
margin-bottom: 10px;
}
#order_sub {
width: 90%;
border: 0px;
border-radius: 3px;
background-color: greenyellow;
padding: 6px 0px;
margin-left: 5px;
color: rgb(93, 93, 92);
font-weight: 600;
margin-top: 20px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="./js/template.js"></script>
<!-- 2. 准备一个模板 -->
<script type="text/html" id="tp">
{{ each list value }}
<li>
<label>
<input name="che" type="checkbox">
<img src='./image/{{ value.name }}.png' />
<span>{{ value.name }} ￥{{ value.price }}</span>
</label>
</li>
{{ /each }}
</script>
<script>
$(function () {
//加载菜单
var arr = [{
name: "爆炒肥肠",
price: 30.00
},
{
name: "啤酒鸭",
price: 20.00
},
{
name: "红烧茄子",
price: 10.00
},
{
name: "胡萝卜炒肉",
price: 20.00
},
{
name: "香干炒肉",
price: 30.00
}
];
var html = template("tp", {
list: arr
});
//找到父元素挂载
$("#menu").html(html);
//默认'前台叫号'样式
$("#head ul li a:first").addClass("hover");
//点单页面切换
$("#head ul li a:first").click(function () {
$("#context_2").hide();
$("#context_1").show();
//移除样式
$("#head ul li a:last").removeClass('hover')
//重新点击时 清空之前勾选的复选框
$('input[name="che"]:checked').each(function () {
$(this).attr("checked", false)
});
});
$("#head ul li a:last").click(function () {
$("#context_1").hide();
$("#context_2").show();
//移除样式
$("#head ul li a:first").removeClass("hover");
});
//确认点餐按钮点击事件
$("#sb").click(function () {
//获取勾选的菜品
var od = []; //定义数组储存
$('input[name="che"]:checked').each(function () {
od.push($(this).next().next().text());
});
//显示弹窗
bg.style.display = 'block'; // 遮罩层
dialog.style.display = 'block';
//将其添加显示在弹窗上
for (let i = 0; i < od.length; i++) {
var str = od[i].split(" ￥");
// console.log(str);
//创建元素
var tr = '<tr><td><img src="./image/' + str[0] + '.png"></td><td class="big">' + str[0] +
'</td><td>￥' + str[1] + '</td>' +
'<td><a href="#" name="sub">-</a><input name="number" type="number" value="1"/><a name="sum" href="#">+</a></td></tr>'
//获取挂载父元素
$('#order').append(tr)
}
//菜品数量增减
$('a[name="sub"]').click(function () {
var num = $(this).next().val();
if (num > 1) $(this).next().val(num - 1);
})
$('a[name="sum"]').click(function () {
var num = $(this).prev().val();
$(this).prev().val(Number(num) + 1);
})
// 取消默认行为
return false;
})
//订单号
var count = 1;
//序列号
var lis = 0;
//打印凭条按钮
$('#order_sub').click(function () {
var me = []; //定义数组储存
//储存菜单
$('#order tr td img').each(function () {
var st = $(this).parent().next();
var name = st.text();
var price = st.next().text();
var num = st.next().next().children("input").val();
me.push(name + price + "￥" + num);
});
//隐藏弹窗
bg.style.display = 'none';
dialog.style.display = 'none';
//清空弹窗内容，防止下次重复出现
$("#order").find("tr").remove();
//在后厨叫号显示订单
//切换页面
$("#context_1").hide();
$("#context_2").show();
$("#context_2 h3").hide(); //暂无订单隐藏
//总金额
var total = 0;
//计算总金额
for (let i = 0; i < me.length; i++) {
//分割数据出来
var str1 = me[i].split("￥");
total += str1[1] * str1[2];
}
//创建元素
var li = '<li><div class="order_up">订单号<span>总金额 ￥' + total + '</span><span>' + count +
'</span></div> <div class="order_down"></div></li>'
//将li挂载到父元素
$("#context2_order").append(li);
//将订单循环出来
for (let i = 0; i < me.length; i++) {
//分割数据出来
var str = me[i].split("￥");
var div = '<br/><img src="./image/' + str[0] + '.png">' + str[0] + ' ￥' + str[1] +
'<span class="num">X' + str[2] + '</span>'
//获取挂载好的父元素
$(".order_down").eq(lis).append(div);
}
var input =
'<span class="input"><input type="button" value="叫号" name="call"><input class="finish" type="button" value="完成" name="finish"><span/>'
//获取挂载好的父元素
$(".order_down").eq(lis).append(input);
//订单号+1
count++;
//序列号+1
lis++;
//后厨叫号添加样式
$("#head ul li a:last").addClass('hover')
$("#head ul li a:first").removeClass('hover')
});
//点'X'关闭按钮
$('#box_close').click(function () {
bg.style.display = 'none';
dialog.style.display = 'none';
//清空弹窗内容，防止下次重复出现
$("#order").find("tr").remove();
})
//叫号按钮
$("#context2_order").on('click', 'input[name="call"]', function () {
var id = $(this).parent().parent().prev().children("span:last-child").text();
console.log(this);
var to_speak = new SpeechSynthesisUtterance('夏日烧烤店请' + id + '号顾客取餐');
window.speechSynthesis.speak(to_speak);
});
//订单完成删除
$("#context2_order").on('click', 'input[name="finish"]', function () {
$(this).parent().parent().parent().remove();
//序列号-1
if (lis > 0) {
lis--;
if(lis===0) $("#context_2 h3").show(); //'暂无订单'显示
}
});
});
</script>
</head>
<body>
<!-- 头部开始 -->
<div id="head">
<ul>
<li><a href="#">前台点餐</a></li>
<li><a href="#">后厨叫号</a></li>
</ul>
</div>
<!-- 头部结束 -->
<!-- 内容开始 -->
<div id="context">
<div id="context_1">
<ul id="menu">
</ul>
<input type="submit" id="sb" value="确认点餐">
</div>
<div id="context_2">
<h3>暂无订单</h3>
<ul id="context2_order">
</ul>
</div>
</div>
<!-- 内容结束 -->
<div id="dialog">
<div id="box_close">X</div>
<h4 id="hdTitle">订单</h4>
<table id="order">
</table>
<input type="submit" id="order_sub" value="打印凭条">
</div>
<!-- 遮罩层 模态窗口 -->
<div id="bg"></div>
</body>
</html>
扫一扫
298
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
