You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
11 KiB
238 lines
11 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>简易点菜系统</title>
|
|
<link href="/css/index.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
|
<style>
|
|
.order-frame {
|
|
width: 700px
|
|
}
|
|
|
|
.action {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<script th:inline="javascript">
|
|
onload = function () {
|
|
let item = document.getElementsByClassName('fff')
|
|
for (let i in item) {
|
|
item[i].innerHTML += getSelect()
|
|
}
|
|
}
|
|
|
|
function getSelect() {
|
|
let fenlei = [[${fenlei}]]
|
|
let fenleistr = ''
|
|
for (let item in fenlei) {
|
|
fenleistr += `<option value="${fenlei[item]}">${fenlei[item]}</option>`
|
|
}
|
|
let count=document.querySelectorAll('select[name$=cailiao]').length
|
|
return `<select class="custom-select" name="diancans[${count}].fenlei" onchange="changeFenLei(this,this.parentElement.querySelector('select[name$=pinmu]'),this.parentElement.querySelector('select[name$=cailiao]'))">
|
|
<option selected>请选择分类</option>
|
|
${fenleistr}
|
|
</select>
|
|
|
|
<select class="custom-select" name="diancans[${count}].pinmu" onchange="changePinmu(this.parentElement.querySelector('select[name$=fenlei]'),this,this.parentElement.querySelector('select[name$=cailiao]'))">
|
|
<option selected>请选择品目</option>
|
|
</select>
|
|
|
|
<select class="custom-select" name="diancans[${count}].cailiao" required oninvalid="setCustomValidity('请选择材料')" onchange="changeCailiao(document.querySelectorAll('select[name$=cailiao]'))">
|
|
<option selected value="">请选择材料</option>
|
|
</select>
|
|
|
|
<input type="text" class="form-control" name="diancans[${count}].sum" placeholder="做法或数量" onchange="changeCailiao(document.querySelectorAll('select[name$=cailiao]'))">`
|
|
}
|
|
|
|
function plus(s) {
|
|
let div = document.createElement('div')
|
|
div.classList.add('input-group', 'mt-3', 'order-frame')
|
|
div.innerHTML = `<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus(this)"/>
|
|
<img src="/icon/minus.svg" class="icon action" onclick="minus(this)"/>
|
|
</div>
|
|
${getSelect()}
|
|
`
|
|
list.appendChild(div)
|
|
if (list.childElementCount > 1) {
|
|
add.classList.add('d-none')
|
|
}
|
|
}
|
|
|
|
function minus(s) {
|
|
list.removeChild(s.parentElement.parentElement)
|
|
if (list.childElementCount === 1) {
|
|
add.classList.remove('d-none')
|
|
}
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changeFenLei(fenlei, pinmu, cailiao) {
|
|
pinmu.innerHTML = '<option selected>请选择品目</option>'
|
|
cailiao.innerHTML = '<option selected>请选择材料</option>'
|
|
fetch(new Request('/api/getPinMu?fenlei=' + fenlei.value)).then(res => res.json()).then(res => {
|
|
for (let index in res) {
|
|
pinmu.innerHTML += `<option>${res[index]}</option>`
|
|
}
|
|
})
|
|
let sum=fenlei.parentElement.querySelector('input[name$=sum]')
|
|
if (fenlei.value === '正菜') {
|
|
sum.setAttribute('type', 'text')
|
|
} else {
|
|
sum.setAttribute('type', 'number')
|
|
sum.value=1
|
|
}
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changePinmu(fenlei, pinmu, cailiao) {
|
|
cailiao.innerHTML = '<option selected>请选择材料</option>'
|
|
fetch(new Request(`/api/getMenu?fenlei=${fenlei.value}&pinmu=${pinmu.value}`)).then(res => res.json()).then(res => {
|
|
for (let index in res) {
|
|
cailiao.innerHTML += `<option value="${res[index].id}" jine="${res[index].jiage}">${res[index].cailiao}</option>`
|
|
}
|
|
})
|
|
|
|
changeCailiao(document.querySelectorAll('select[name$=cailiao]'))
|
|
}
|
|
|
|
function changeCailiao(cailiao) {
|
|
let sum = 0
|
|
for (let index in cailiao) {
|
|
if (cailiao[index].value !== '' && cailiao[index].selectedIndex) {
|
|
if(cailiao[index].selectedIndex!==0){
|
|
cailiao[index].setCustomValidity('')
|
|
}
|
|
let option = cailiao[index].childNodes[cailiao[index].selectedIndex]
|
|
let value=cailiao[index].parentElement.querySelector('input[name$=sum]').value
|
|
sum += parseInt(option.getAttribute('jine'))*(/^\d+$/.test(value)?value:1)
|
|
}
|
|
}
|
|
jine.value = sum
|
|
}
|
|
|
|
function birthdayValid(shijian) {
|
|
shijian.removeAttribute('required')
|
|
shijian.setCustomValidity('')
|
|
}
|
|
|
|
function changeBirthday(shijian) {
|
|
shijian.setAttribute('required','required')
|
|
}
|
|
|
|
function hasYuding(zhuohao) {
|
|
fetch(new Request(`/api/hasYuding?zhuohao=${zhuohao.value}`)).then(res=>res.json()).then(res=>{
|
|
if(res){
|
|
alert(`桌号${zhuohao.value}已预定！`)
|
|
zhuohao.value=''
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function checkMobie() {
|
|
let mobie=document.querySelector('input[name=tel]')
|
|
if(mobie.value.length>0&&!/^\d{11}$/.test(mobie.value)){
|
|
mobie.setCustomValidity('手机号不合法')
|
|
}else {
|
|
mobie.setCustomValidity('')
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="frame">
|
|
<span th:text="${span_name}"></span>
|
|
<form method="post" action="/api/order">
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">桌号</span>
|
|
</div>
|
|
<input type="text" name="zhuohao" class="form-control col-4" required oninvalid="setCustomValidity('桌号不能为空')" oninput="setCustomValidity('');hasYuding(this)">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">客人姓名</span>
|
|
</div>
|
|
<input type="text" name="xingming" class="form-control col-4" oninvalid="setCustomValidity('姓名不能为空')" oninput="setCustomValidity('');" required maxlength="15">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">用餐时间</span>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" id="customRadioInline1" name="birthday" checked
|
|
class="custom-control-input" value="1" onclick="birthdayValid(this.parentElement.parentElement.querySelector('input[name=shijian]'))">
|
|
<label class="custom-control-label" for="customRadioInline1">及时单</label>
|
|
</div>
|
|
<div class="custom-control custom-radio custom-control-inline mt-auto mb-auto">
|
|
<input type="radio" id="customRadioInline2" value="2" name="birthday" class="custom-control-input" onclick="changeBirthday(this.parentElement.parentElement.querySelector('input[name=shijian]'))">
|
|
<label class="custom-control-label" for="customRadioInline2">指定</label>
|
|
</div>
|
|
|
|
<input type="text" name="shijian" oninput="setCustomValidity('')" oninvalid="setCustomValidity('时间不能为空')" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">用餐人数</span>
|
|
</div>
|
|
|
|
<input type="number" value="1" name="renshu" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">联系方式(手机)</span>
|
|
</div>
|
|
|
|
<input type="text" name="tel" oninput="checkMobie()" class="form-control col-4">
|
|
</div>
|
|
|
|
<div class="input-group mt-3 order-frame fff">
|
|
<div class="input-group-prepend col-3 pr-2 justify-content-end">
|
|
<span class="input-group-text">点餐区</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="list">
|
|
<div class="input-group mt-3 order-frame d-none" id="add">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus(this)"/>
|
|
</div>
|
|
</div>
|
|
<div class="input-group mt-3 order-frame fff">
|
|
<div class="col-3 text-right mt-auto mb-auto">
|
|
<img src="/icon/plus.svg" class="icon action" onclick="plus(this)"/>
|
|
<img src="/icon/minus.svg" class="icon action" onclick="minus(this)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group mt-3 justify-content-end">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">预结金额</span>
|
|
</div>
|
|
<input type="text" id="jine" name="jine" class="form-control col-2" readonly>
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">备注</span>
|
|
</div>
|
|
<textarea class="form-control" name="beizhu" aria-label="With textarea"></textarea>
|
|
</div>
|
|
<div class="mt-3 text-right">
|
|
<button class="btn btn-secondary col-3">提交</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |