排队
This commit is contained in:
duan
447
src/views/lineUp/index.vue
Normal file
447
src/views/lineUp/index.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<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">取号</el-button>
|
||||
<el-button plain type="primary" @click="toUrl">叫号记录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between; ">
|
||||
<div class="lineUpBoxList" v-for="item in list.records" :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" width="30%">
|
||||
<span>通知消息已发送</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button style="" @click="dialogConfirm(2)">完成</el-button>
|
||||
<el-button type="primary" @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" 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 } from '@/api/shop'
|
||||
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: ""
|
||||
}
|
||||
},
|
||||
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
|
||||
|
||||
}
|
||||
},
|
||||
profilepicture(d) {
|
||||
this.dialogVisible = true
|
||||
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: 1,
|
||||
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
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</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;
|
||||
// flex: 0 0 50%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user