642 lines
14 KiB
Vue
642 lines
14 KiB
Vue
<template>
|
|
<view class="container">
|
|
<block v-if="!queueInfo">
|
|
<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="shopInfo.logo" mode="aspectFill"></image>
|
|
<view class="head_text">
|
|
<text class="shopName">{{shopInfo.shopName}}</text>
|
|
<text class="tip">{{shopInfo.status == 1 ? '营业中' : '休息中'}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="center">
|
|
<view class="center_head">
|
|
<text>餐桌类型</text>
|
|
<text>等待桌数</text>
|
|
<text>预计等待</text>
|
|
</view>
|
|
<!-- queueUpList -->
|
|
<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.waitingCount}}</text>
|
|
<text>桌</text>
|
|
</view>
|
|
<view class="w time">约{{item.waitTime}}分钟</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="addBtn" @click="show = true" v-if="shopInfo.status == 1">
|
|
立即排队
|
|
</view>
|
|
</block>
|
|
|
|
<block v-else>
|
|
<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">{{shopInfo.shopName}}</view>
|
|
<view class="tip">当前门店</view>
|
|
</view>
|
|
<view class="sort">{{queueInfo.callNum}}</view>
|
|
<view class="note">{{queueInfo.tableName}}{{queueInfo.tableNote||''}}</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="footer_item">
|
|
<view class="footer_item_top"><text>{{queueInfo.waitingCount}}</text><text>桌</text></view>
|
|
<view class="footer_item_bom">前方等待桌数</view>
|
|
</view>
|
|
<view class="footer_item">
|
|
<view class="footer_item_top"><text>≥{{queueInfo.waitTime||''}}</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>
|
|
|
|
|
|
|
|
<!-- 立即排队 -->
|
|
<u-popup :show="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 == 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="phone"
|
|
></u--input>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view @click="close">取消</view>
|
|
<view @click="getTakeNumber">确认取号</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
phone: "",
|
|
queueUpList: [],
|
|
tableList: [],
|
|
callTableId: "",
|
|
shopInfo: null,
|
|
queueInfo: null,
|
|
shopId: "",
|
|
queueId: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// #ifdef MP-WEIXIN
|
|
if (options.q) {
|
|
this.shopId = this.getQueryString(decodeURIComponent(options.q), 'shopId')
|
|
this.queueId = this.getQueryString(decodeURIComponent(options.q), 'queueId')
|
|
}
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
if (getApp().globalData.shopId) { this.shopId = getApp().globalData.shopId }
|
|
if (getApp().globalData.queueId) { this.queueId = getApp().globalData.queueId }
|
|
// #endif
|
|
},
|
|
onShow() {
|
|
this.getQueueUpState();
|
|
// this.getQueueUpList();
|
|
this.getQueueUpTablList();
|
|
},
|
|
|
|
|
|
methods: {
|
|
/**
|
|
* 解码
|
|
* @param {Object} url
|
|
* @param {Object} name
|
|
*/
|
|
getQueryString(url, name) {
|
|
var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
|
|
var r = url.substr(1).match(reg)
|
|
if (r != null) {
|
|
return r[2]
|
|
}
|
|
return null;
|
|
},
|
|
|
|
/**
|
|
* 获取排号状态
|
|
*/
|
|
async getQueueUpState () {
|
|
let params = {
|
|
openId: uni.cache.get('miniAppOpenId'),
|
|
shopId: this.shopId,
|
|
}
|
|
if (this.queueId) {
|
|
params.queueId = this.queueId;
|
|
}
|
|
let res = await this.api.getQueueUpState(params)
|
|
|
|
if ( res.code == 0) {
|
|
this.shopInfo = res.data.shopInfo;
|
|
this.queueInfo = res.data.queueInfo;
|
|
this.queueId = this.queueInfo.id;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取排号数据
|
|
*/
|
|
async getQueueUpList () {
|
|
let res = await this.api.getQueueUpList({
|
|
openId: uni.cache.get('miniAppOpenId'),
|
|
shopId: this.shopId,
|
|
})
|
|
if ( res.code == 0 && res.data.length > 0) {
|
|
this.queueUpList = res.data;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 获取桌型数据
|
|
*/
|
|
async getQueueUpTablList () {
|
|
let res = await this.api.getQueueUpTablList({
|
|
shopId: this.shopId,
|
|
})
|
|
if ( res.code == 0 && res.data.length > 0) {
|
|
this.tableList = res.data;
|
|
this.callTableId = res.data[0].id;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 订阅通知
|
|
*/
|
|
async subscribe () {
|
|
|
|
let res = await this.api.setSubMsg({
|
|
openId: uni.cache.get('miniAppOpenId'),
|
|
shopId: this.shopId,
|
|
queueId: this.queueId,
|
|
})
|
|
if ( res.code == 0) {
|
|
uni.showToast({
|
|
title: '订阅成功',
|
|
icon: 'none'
|
|
});
|
|
uni.requestSubscribeMessage({
|
|
tmplIds:["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw","yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM","3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"],
|
|
complete() {
|
|
|
|
},
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* 取号
|
|
*/
|
|
async getTakeNumber () {
|
|
if ( this.phone == "" || this.phone == null ) {
|
|
uni.showToast({
|
|
title: '请填写手机号',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
let res = await this.api.getTakeNumber({
|
|
openId: uni.cache.get('miniAppOpenId'),
|
|
shopId: this.shopId,
|
|
phone: this.phone,
|
|
callTableId: this.callTableId,
|
|
})
|
|
if ( res.code == 0) {
|
|
this.phone = "";
|
|
this.queueId = res.data.id;
|
|
this.getQueueUpState();
|
|
this.show = false;
|
|
uni.requestSubscribeMessage({
|
|
tmplIds:["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw","yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM","3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"],
|
|
complete() {
|
|
|
|
},
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* 取消排队
|
|
*/
|
|
async cancelTakeNumber () {
|
|
let res = await this.api.cancelTakeNumber({
|
|
queueId: this.queueInfo.id,
|
|
shopId: this.shopId,
|
|
})
|
|
if ( res.code == 0) {
|
|
this.getQueueUpTablList();
|
|
this.getQueueUpState();
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* 切换桌型
|
|
*/
|
|
tableCut(item) {
|
|
this.callTableId = item.id;
|
|
},
|
|
|
|
/**
|
|
* 弹窗关闭监听
|
|
*/
|
|
close () {
|
|
this.phone = "";
|
|
if (this.tableList.length > 0) {
|
|
this.callTableId = this.tableList[0].id;
|
|
}
|
|
this.show = false;
|
|
},
|
|
|
|
}
|
|
};
|
|
</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> |