677 lines
14 KiB
Vue
677 lines
14 KiB
Vue
<template>
|
|
<view class="container">
|
|
<block v-if="dataform.queueInfo">
|
|
<view class="result"
|
|
style="background: url('https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_su_bg.png') no-repeat center 26rpx / 96%;">
|
|
<view class="head">
|
|
<u-icon name="checkmark-circle-fill" color="#fff" size="40"></u-icon>
|
|
<view class="title">排队成功</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="center_top">
|
|
<view class="shopName">{{dataform.shopInfo.shopName}}</view>
|
|
<view class="tip">当前门店</view>
|
|
</view>
|
|
<view class="sort">{{dataform.queueInfo.callNum}}</view>
|
|
<view class="note">{{dataform.queueInfo.tableName}}{{dataform.queueInfo.tableNote||''}}</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="footer_item">
|
|
<view class="footer_item_top"><text>{{dataform.queueInfo.waitingCount}}</text><text>桌</text>
|
|
</view>
|
|
<view class="footer_item_bom">前方等待桌数</view>
|
|
</view>
|
|
<view class="footer_item">
|
|
<view class="footer_item_top"><text>≥{{dataform.queueInfo.waitTime || 0}}</text><text>分钟</text>
|
|
</view>
|
|
<view class="footer_item_bom">预计等待时长</view>
|
|
</view>
|
|
</view>
|
|
<view class="result_btn">
|
|
<view class="subscribe" @click="subscribe">
|
|
订阅通知
|
|
</view>
|
|
<view class="cancelBtn" @click="cancelTakeNumber">
|
|
取消排队
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<image class="top_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_bg.png"
|
|
mode="aspectFill"></image>
|
|
<view class="content">
|
|
<image class="top_img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/queueUp/queueUp_img.png"
|
|
mode="aspectFill"></image>
|
|
<view class="head">
|
|
<image class="avatar" :src="dataform.shopInfo.logo" mode="aspectFill"></image>
|
|
<view class="head_text">
|
|
<text class="shopName">{{dataform.shopInfo.shopName}}</text>
|
|
<text class="tip">{{dataform.shopInfo.status == 1 ? '营业中' : '休息中'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="center_head">
|
|
<text>餐桌类型</text>
|
|
<text>等待桌数</text>
|
|
<text>预计等待</text>
|
|
</view>
|
|
<view class="center_list" v-for="(item,index) in tableList" :key="index">
|
|
<view class="w center_list_item">
|
|
<text>{{item.name||''}}</text>
|
|
<text>{{item.note||''}}</text>
|
|
</view>
|
|
<view class="w center_list_item">
|
|
<text>{{item.nearNum}}</text>
|
|
<text>桌</text>
|
|
</view>
|
|
<view class="w time">约{{item.waitTime}}分钟</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="addBtn" @click="dataform.show = true" v-if="dataform.shopInfo.status == 1">
|
|
立即排队
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 立即排队 -->
|
|
<up-popup :show="dataform.show" mode="center" @close="close" round="18" :safeAreaInsetBottom="false">
|
|
<view class="add_content">
|
|
<view class="head">
|
|
<view></view>
|
|
<view class="title">取号</view>
|
|
<u-icon name="close-circle-fill" color="#666" size="30" @click="close"></u-icon>
|
|
</view>
|
|
<view class="center">
|
|
<view>
|
|
<view class="title">选择桌型</view>
|
|
<view class="tablelist">
|
|
|
|
<view class="tablelist_item" :class="{'active': item.id == dataform.callTableId }"
|
|
v-for="(item,index) in tableList" :key="index" @click="tableCut(item)">
|
|
<view>{{item.name||''}}</view>
|
|
<view>{{item.note||''}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="title">手机号码</view>
|
|
<u--input type="number" placeholder="填写号码" border="surround"
|
|
v-model="dataform.phone"></u--input>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view @click="close">取消</view>
|
|
<view @click="getTakeNumber">确认取号</view>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref,
|
|
onMounted,
|
|
getCurrentInstance,
|
|
nextTick,
|
|
onShow
|
|
} from 'vue';
|
|
|
|
//接口引入
|
|
import {
|
|
APIcallTabletakeNumber,
|
|
APIusercallTable,
|
|
APIqueuecallTable,
|
|
APIqueuedetail,
|
|
APIcallTablesubMsg,
|
|
APIqueuecancel
|
|
} from "@/common/api/subscribeto.js";
|
|
|
|
// 获取全局属性
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance();
|
|
|
|
const queueUpList = ref([])
|
|
|
|
const tableList = ref([])
|
|
|
|
const dataform = reactive({
|
|
show: false,
|
|
phone: "",
|
|
callTableId: "",
|
|
shopInfo: {
|
|
shopName: ''
|
|
},
|
|
queueInfo: null,
|
|
shopId: 29,
|
|
queueId: "",
|
|
})
|
|
|
|
// 解码
|
|
const getQueryString = (url, name) => {
|
|
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
|
var r = url.substr(1).match(reg)
|
|
if (r != null) {
|
|
return r[2]
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
|
|
// 获取排号列表
|
|
const userorderList = async () => {
|
|
let res = await APIusercallTable({
|
|
shopId: dataform.shopId,
|
|
queueId: dataform.queueId
|
|
})
|
|
tableList.value = res.records
|
|
}
|
|
|
|
// 叫号队列详情
|
|
const getQueueUpTablList = async () => {
|
|
let res = await APIqueuedetail({
|
|
shopId: dataform.shopId,
|
|
openId: uni.cache.get('userInfo').wechatOpenId,
|
|
})
|
|
if (res.queueInfo) {
|
|
dataform.queueInfo = res.queueInfo;
|
|
} else {
|
|
userorderList()
|
|
}
|
|
dataform.shopInfo = res.shopInfo;
|
|
}
|
|
|
|
// 订阅通知
|
|
const subscribe = async () => {
|
|
let res = await APIcallTablesubMsg({
|
|
openId: uni.cache.get('userInfo').wechatOpenId,
|
|
shopId: dataform.shopId,
|
|
queueId: dataform.queueInfo.id,
|
|
})
|
|
if (res) {
|
|
uni.showToast({
|
|
title: '订阅成功',
|
|
icon: 'none'
|
|
});
|
|
uni.requestSubscribeMessage({
|
|
tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
|
|
"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
|
|
"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
|
|
],
|
|
complete() {
|
|
|
|
},
|
|
})
|
|
}
|
|
}
|
|
|
|
// 取号
|
|
const getTakeNumber = async () => {
|
|
if (dataform.phone == "" || dataform.phone == null) {
|
|
uni.showToast({
|
|
title: '请填写手机号',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
let res = await APIcallTabletakeNumber({
|
|
openId: uni.cache.get('userInfo').wechatOpenId,
|
|
shopId: dataform.shopId,
|
|
phone: dataform.phone,
|
|
callTableId: dataform.callTableId,
|
|
})
|
|
if (res) {
|
|
dataform.phone = "";
|
|
dataform.queueId = res.id;
|
|
dataform.show = false;
|
|
getQueueUpTablList()
|
|
uni.requestSubscribeMessage({
|
|
tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
|
|
"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
|
|
"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
|
|
],
|
|
complete() {
|
|
|
|
},
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
// 取消排队
|
|
const cancelTakeNumber = async () => {
|
|
let res = await APIqueuecancel({
|
|
queueId: dataform.queueInfo.id,
|
|
shopId: dataform.shopId,
|
|
})
|
|
getQueueUpTablList();
|
|
}
|
|
|
|
// 切换桌型
|
|
const tableCut = (item) => {
|
|
dataform.callTableId = item.id;
|
|
}
|
|
|
|
// 弹窗关闭监听
|
|
const close = async () => {
|
|
dataform.phone = "";
|
|
if (tableList.value.length > 0) {
|
|
dataform.callTableId = tableList.value[0].id;
|
|
}
|
|
dataform.show = false;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await proxy.$onLaunched;
|
|
// 获取当前页面栈
|
|
// const pages = getCurrentPages();
|
|
// // 获取当前页面实例
|
|
// const currentPage = pages[pages.length - 1];
|
|
// // 获取页面参数
|
|
// const options = currentPage.options;
|
|
|
|
// // #ifdef MP-WEIXIN
|
|
// if (options.q) {
|
|
// dataform.shopId = getQueryString(decodeURIComponent(options.q), 'shopId')
|
|
// dataform.queueId = getQueryString(decodeURIComponent(options.q), 'queueId')
|
|
// }
|
|
// // #endif
|
|
// // #ifdef MP-ALIPAY
|
|
// if (getApp().globalData.shopId) {
|
|
// dataform.shopId = getApp().globalData.shopId
|
|
// }
|
|
// if (getApp().globalData.queueId) {
|
|
// dataform.queueId = getApp().globalData.queueId
|
|
// }
|
|
//// #endif
|
|
await nextTick()
|
|
uni.cache.set('shopId', 29, 30)
|
|
getQueueUpTablList();
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
// background: #f6f6f6;
|
|
}
|
|
|
|
.top_bg {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 48rpx 32rpx;
|
|
|
|
.top_img {
|
|
width: 282rpx;
|
|
height: 222rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 26rpx;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-right: 16rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.head_text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.shopName {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.tip {
|
|
background: #F6FAFF;
|
|
border-radius: 4rpx;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #318AFE;
|
|
padding: 4rpx 10rpx;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
}
|
|
|
|
.center {
|
|
background-color: #fff;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 48rpx;
|
|
|
|
.center_head {
|
|
height: 104rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #FAFAFA;
|
|
border-radius: 18rpx 18rpx 0rpx 0rpx;
|
|
|
|
text {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.center_list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 32rpx 0;
|
|
|
|
.w {
|
|
width: 33.333%;
|
|
text-align: center;
|
|
}
|
|
|
|
.center_list_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
text {}
|
|
|
|
text:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.addBtn {
|
|
width: 530rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
background: #000000;
|
|
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin: 16rpx auto 64rpx auto;
|
|
}
|
|
|
|
|
|
.add_content {
|
|
width: 594rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 32rpx;
|
|
|
|
.title {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 32rpx;
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.tablelist {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.tablelist_item {
|
|
min-width: 200rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #E5E5E5;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
view:nth-child(1) {
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding: 24rpx 0 16rpx 0;
|
|
border-bottom: 1rpx dashed #E5E5E5;
|
|
}
|
|
|
|
view:nth-child(2) {
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
padding: 16rpx 0 24rpx 0;
|
|
}
|
|
}
|
|
|
|
.active {
|
|
border: 2rpx solid #FFB562;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
|
|
view {
|
|
width: 50%;
|
|
height: 94rpx;
|
|
line-height: 94rpx;
|
|
text-align: center;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
view:nth-child(1) {
|
|
color: #999999;
|
|
border-right: 1rpx solid #E5E5E5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.result {
|
|
padding: 32rpx 20rpx 32rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.result_bg {
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.head {
|
|
height: 192rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.title {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
color: #333333;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.center_top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 74rpx;
|
|
|
|
.shopName {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.tip {
|
|
padding: 4rpx 10rpx;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 18rpx;
|
|
color: #333333;
|
|
background-color: #E1E1E1;
|
|
border-radius: 4rpx
|
|
}
|
|
}
|
|
|
|
.sort {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 80rpx;
|
|
color: #333333;
|
|
margin-top: 104rpx;
|
|
}
|
|
|
|
.note {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
margin-top: 44rpx;
|
|
margin-bottom: 84rpx;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
border-top: 1rpx dashed #E5E5E5;
|
|
padding-top: 70rpx;
|
|
display: flex;
|
|
margin-bottom: 64rpx;
|
|
|
|
.footer_item {
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.footer_item_top {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
|
|
text:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 64rpx;
|
|
color: #FFB562;
|
|
}
|
|
|
|
text:nth-child(2) {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
}
|
|
|
|
.footer_item_bom {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.footer_item:nth-child(1) .footer_item_top {
|
|
border-right: 1rpx solid #E5E5E5;
|
|
}
|
|
}
|
|
|
|
.result_btn {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
view {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
border-radius: 56rpx;
|
|
border: 2rpx solid #333333;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.subscribe {
|
|
width: 336rpx;
|
|
margin: 64rpx auto;
|
|
}
|
|
|
|
.cancelBtn {
|
|
width: 336rpx;
|
|
|
|
|
|
|
|
margin: 64rpx auto;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |