502 lines
14 KiB
Vue
502 lines
14 KiB
Vue
<template>
|
||
<div class="lineUpBox">
|
||
<div class="lineUpBoxTop">
|
||
<ul class="lineUpBoxUl">
|
||
<li :class="[[selecttopType == '' ? 'active' : '']]" @click="gettypeevent('')">
|
||
<div>全部</div>
|
||
<div>{{ tableData.totalCount }}桌</div>
|
||
<div class="postionStyle" v-if="selecttopType == ''">
|
||
<i class="el-icon-check postionStyleI"></i>
|
||
</div>
|
||
</li>
|
||
<li v-for="item in tableData.records" :key="item.id" @click="gettypeevent(item.id)"
|
||
:class="[[selecttopType == item.id ? 'active' : '']]">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.totalCount }}桌</div>
|
||
<div class="postionStyle" v-if="selecttopType == item.id">
|
||
<i class="el-icon-check postionStyleI"></i>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div class="buttonstyle">
|
||
<el-button type="primary" @click="dialogVisibles = true; phone = ''">取号</el-button>
|
||
<el-button plain type="primary" @click="toUrl">叫号记录</el-button>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;align-items: center;flex-wrap: wrap; ">
|
||
<div class="lineUpBoxList" v-for="item in list" style="margin-right: 20px;" :key="item.id">
|
||
<ul>
|
||
<li>
|
||
<div>用户</div>
|
||
<div>{{ item.phone }}</div>
|
||
</li>
|
||
<li>
|
||
<div>号码</div>
|
||
<div>{{ item.callNum }}</div>
|
||
</li>
|
||
<li>
|
||
<div>桌型</div>
|
||
<div>{{ item.name }}{{ item.note }}</div>
|
||
</li>
|
||
<li>
|
||
<div>等待</div>
|
||
<div>{{ item.waitingCount }}桌</div>
|
||
</li>
|
||
</ul>
|
||
<div>
|
||
<el-button type="primary" @click="dialogConfirm(1, item)">取消</el-button>
|
||
<el-button type="primary" @click="profilepicture(item)">播报</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 播报弹窗 -->
|
||
<el-dialog title="提示" :visible.sync="dialogVisible" center width="30%">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 16px;">正在叫号，请稍等</div>
|
||
<div v-if="profilepicturedata.state == 1" style="color: #52C41A;font-size: 16px;margin-top: 17px;">
|
||
已发送至用户<i class="el-icon-circle-check" style="color: #52C41A;"></i>
|
||
</div>
|
||
<div v-else style="color:#FF4D4F;font-size: 16px;margin-top: 17px;">用户未订阅消息 <i style="color: #FF4D4F;"
|
||
class="el-icon-circle-close"></i></div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button style="width: 176px;
|
||
height: 48px;
|
||
background: #F7F7FA;
|
||
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.02);
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid rgba(255,255,255,0);" @click="dialogConfirm(2)">完成</el-button>
|
||
<el-button type="primary" style="width: 189px;
|
||
height: 45px;
|
||
background: #FF4D4F;
|
||
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.02);
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid rgba(255,255,255,0.28);" @click="dialogConfirm(3)">过号</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<!-- 取号 -->
|
||
<el-dialog title="取号" :visible.sync="dialogVisibles" width="30%">
|
||
<div>
|
||
<div style="color: #000;">选择桌型</div>
|
||
<ul class="lineUpBoxUl" :class="[tableData.records.length > 2 ? 'dfs' : 'dfas']"
|
||
style="margin-top: 10px;">
|
||
<li v-for="item in tableData.records" :key="item.id" @click="selectTabletype = item"
|
||
:class="[[selectTabletype.id == item.id ? 'active' : '']]">
|
||
<div>{{ item.name }}</div>
|
||
<div>{{ item.totalCount }}桌</div>
|
||
<div class="postionStyle" v-if="selectTabletype.id == item.id">
|
||
<i class="el-icon-check postionStyleI"></i>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div style="margin-top: 20px;color: #000;">手机号码</div>
|
||
<div style="margin-top: 10px;">
|
||
<input v-model="phone" style="height: 30px;" type="text" placeholder="填写号码" />
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="callTabletakeNumberEvent">确认取号</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { callTable, callTablequeue, callTableput, callTabletakeNumber, callTablecall } from '@/api/shop'
|
||
const synth = window.speechSynthesis;
|
||
const msg = new SpeechSynthesisUtterance()
|
||
export default {
|
||
data() {
|
||
return {
|
||
query: {
|
||
productId: '',
|
||
name: '',
|
||
categoryId: '',
|
||
typeEnum: ''
|
||
},
|
||
tableData: {
|
||
data: [],
|
||
page: 0,
|
||
size: 30,
|
||
loading: false,
|
||
total: 0
|
||
},
|
||
selecttopType: "",
|
||
list: [],
|
||
dialogVisible: false,
|
||
dialogVisibles: false,
|
||
profilepictureInfo: "",
|
||
phone: "",
|
||
selectTabletype: "",
|
||
// 播报弹窗显示是否订阅
|
||
profilepicturedata: ""
|
||
}
|
||
},
|
||
async mounted() {
|
||
await this.getlist()
|
||
await this.getTableData()
|
||
},
|
||
methods: {
|
||
async callTabletakeNumberEvent() {
|
||
const res = await callTabletakeNumber({
|
||
callTableId: this.selectTabletype.id,
|
||
shopId: localStorage.getItem('shopId'),
|
||
|
||
phone: this.phone,
|
||
note: this.selectTabletype.note,
|
||
name: this.selectTabletype.name,
|
||
})
|
||
if (res.callNum) {
|
||
this.getTableData()
|
||
this.getlist()
|
||
this.dialogVisibles = false
|
||
|
||
}
|
||
},
|
||
|
||
|
||
|
||
handleSpeak(text) {
|
||
msg.text = text; // 文字内容: 小朋友，你是否有很多问号
|
||
msg.lang = "zh-CN"; // 使用的语言:中文
|
||
msg.volume = 3; // 声音音量：1
|
||
msg.rate = 1; // 语速：1
|
||
msg.pitch = 1; // 音高：1
|
||
synth.speak(msg); // 播放
|
||
},
|
||
// // 语音停止
|
||
// handleStop(e) {
|
||
// msg.text = e;
|
||
// msg.lang = "zh-CN";
|
||
// synth.cancel(msg);
|
||
// },
|
||
|
||
|
||
async profilepicture(d) {
|
||
this.handleSpeak('请'+d.callNum+'用餐')
|
||
let res = await callTablecall({
|
||
shopId: localStorage.getItem('shopId'),
|
||
callQueueId: d.id
|
||
})
|
||
if (res) {
|
||
this.dialogVisible = true
|
||
this.profilepicturedata = res
|
||
this.profilepictureInfo = d
|
||
}
|
||
},
|
||
gettypeevent(d) {
|
||
this.selecttopType = d
|
||
this.getTableData()
|
||
this.getlist()
|
||
|
||
},
|
||
async dialogConfirm(value, item) {
|
||
if (value == 1) {
|
||
const res = await callTableput({
|
||
shopId: localStorage.getItem('shopId'),
|
||
state: -1,
|
||
callQueueId: item.id
|
||
})
|
||
if (res) {
|
||
this.getTableData()
|
||
this.getlist()
|
||
}
|
||
} else if (value == 2) {
|
||
const res = await callTableput({
|
||
shopId: localStorage.getItem('shopId'),
|
||
state: 2,
|
||
callQueueId: this.profilepictureInfo.id
|
||
})
|
||
if (res) {
|
||
this.getTableData()
|
||
this.getlist()
|
||
this.dialogVisible = false
|
||
}
|
||
|
||
|
||
} else if (value == 3) {
|
||
const res = await callTableput({
|
||
shopId: localStorage.getItem('shopId'),
|
||
|
||
state: 3,
|
||
callQueueId: this.profilepictureInfo.id
|
||
})
|
||
if (res) {
|
||
this.getTableData()
|
||
this.getlist()
|
||
this.dialogVisible = false
|
||
}
|
||
}
|
||
}
|
||
,
|
||
toUrl() {
|
||
this.$router.push({ path: '/lineUp/record' })
|
||
},
|
||
// 获取商品列表
|
||
async getTableData() {
|
||
try {
|
||
|
||
const res = await callTable({
|
||
shopId: localStorage.getItem('shopId'),
|
||
page: 1,
|
||
size: 10,
|
||
})
|
||
// this.tableData.loading = false
|
||
this.tableData = res
|
||
this.selectTabletype = res.records[0]
|
||
// this.tableData.total = res.totalElements
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
},
|
||
async getlist() {
|
||
const res = await callTablequeue({
|
||
shopId: localStorage.getItem('shopId'),
|
||
page: 1,
|
||
size: 9999,
|
||
callTableId: this.selecttopType,
|
||
state: 0
|
||
})
|
||
this.list = res.records
|
||
}
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
* {
|
||
margin: 0;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
|
||
ul,
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
.show {
|
||
display: none !important;
|
||
}
|
||
|
||
.hidden {
|
||
display: block !important;
|
||
}
|
||
|
||
.lineUpBox {
|
||
padding: 20px;
|
||
}
|
||
|
||
.lineUpBoxTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.lineUpBoxUl {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0;
|
||
|
||
>li {
|
||
border-radius: 4px 4px 4px 4px;
|
||
border: 1px solid #DDDFE6;
|
||
width: 112px;
|
||
height: 55px;
|
||
text-align: center;
|
||
margin-right: 52px;
|
||
position: relative;
|
||
|
||
>div {
|
||
margin-top: 8px;
|
||
color: #999;
|
||
}
|
||
|
||
>div:first-child {
|
||
color: #333333;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.postionStyle {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: -9px;
|
||
|
||
width: 0;
|
||
height: 0;
|
||
border: 14px solid;
|
||
border-color: #318AFE #318AFE #fff #fff;
|
||
|
||
}
|
||
|
||
.postionStyleI {
|
||
position: absolute;
|
||
right: -13px;
|
||
top: -13px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 2px solid #318AFE;
|
||
|
||
>view:first-child {
|
||
color: #318AFE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.buttonstyle {
|
||
>button {
|
||
height: 31px;
|
||
|
||
padding: 5px 16px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lineUpBoxList {
|
||
width: 507px;
|
||
height: 148px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #DDDFE6;
|
||
margin-top: 30px;
|
||
|
||
|
||
>ul {
|
||
padding: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
>li {
|
||
>div:nth-child(2) {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
>div {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
>button {
|
||
width: 169px;
|
||
height: 32px;
|
||
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
|
||
border-radius: 1px 1px 1px 1px;
|
||
border: 1px solid #D9D9D9;
|
||
}
|
||
|
||
>button:first-child {
|
||
background: #FFFFFF;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.dfs {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.dfas {
|
||
>li {
|
||
margin-right: 52px;
|
||
}
|
||
}
|
||
|
||
.lineUpBoxUl {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0;
|
||
|
||
>li {
|
||
border-radius: 4px 4px 4px 4px;
|
||
border: 1px solid #DDDFE6;
|
||
width: 112px;
|
||
height: 55px;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
>div {
|
||
margin-top: 8px;
|
||
color: #999;
|
||
}
|
||
|
||
>div:first-child {
|
||
color: #333333;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
}
|
||
|
||
.postionStyle {
|
||
position: absolute;
|
||
right: 0px;
|
||
top: -9px;
|
||
|
||
width: 0;
|
||
height: 0;
|
||
border: 14px solid;
|
||
border-color: #318AFE #318AFE #fff #fff;
|
||
|
||
}
|
||
|
||
.postionStyleI {
|
||
position: absolute;
|
||
right: -13px;
|
||
top: -13px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
border: 2px solid #318AFE;
|
||
|
||
>view:first-child {
|
||
color: #318AFE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.handle {
|
||
font-size: 18px;
|
||
color: #999;
|
||
|
||
&:hover {
|
||
cursor: grab;
|
||
}
|
||
}
|
||
|
||
.shop_info {
|
||
display: flex;
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-left: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.tag_wrap {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
</style> |