czg_team/cashier_wx
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加网络波动加载中，增加会员信息扫码充值

Browse Source
This commit is contained in:
wwz
2025-03-26 17:58:52 +08:00
parent 3a6fa55234
commit 98ce8b5544
18 changed files with 1018 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

696
pages/subscribeto/index.vue Normal file
View File

@@ -0,0 +1,696 @@
<template>
<view class="container">
<block v-if="!dataform.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="dataform.shopInfo.logo" mode="aspectFill"></image>
<view class="head_text">
<text class="shopName">{{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.waitingCount}}</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>
<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">{{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||''}}</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>
<!-- 立即排队 -->
<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
} from 'vue';
const queueUpList = ref([])
const tableList = ref([])
const dataform = reactive({
show: false,
phone: "",
callTableId: "",
shopInfo: null,
queueInfo: null,
shopId: "",
queueId: "",
})
export default {
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.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) {
dataform.shopInfo = res.data.shopInfo;
dataform.queueInfo = res.data.queueInfo;
dataform.queueId = dataform.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) {
queueUpList.value = res.data;
}
},
/**
* 获取桌型数据
*/
async getQueueUpTablList() {
let res = await this.api.getQueueUpTablList({
shopId: this.shopId,
})
if (res.code == 0 && res.data.length > 0) {
tableList.value = res.data;
dataform.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 (dataform.phone == "" || dataform.phone == null) {
uni.showToast({
title: '请填写手机号',
icon: 'none'
});
return;
}
let res = await this.api.getTakeNumber({
openId: uni.cache.get('miniAppOpenId'),
shopId: dataform.shopId,
phone: dataform.phone,
callTableId: dataform.callTableId,
})
if (res.code == 0) {
dataform.phone = "";
dataform.queueId = res.data.id;
this.getQueueUpState();
dataform.show = false;
uni.requestSubscribeMessage({
tmplIds: ["qUhvEfvCtIcBA3DOn3QMqsGOolrEpyr0YBh99i-AUqw",
"yxOjWK-KjMEZ_BaHWqDJJpHiUPXN6JWqr7u9y65RIWM",
"3BgFazRpVlvreh5z9u4cNP_VeclXKSQfh-r3x2_bYx4"
],
complete() {
},
})
}
},
/**
* 取消排队
*/
async cancelTakeNumber() {
let res = await this.api.cancelTakeNumber({
queueId: dataform.queueInfo.id,
shopId: this.shopId,
})
if (res.code == 0) {
this.getQueueUpTablList();
this.getQueueUpState();
}
},
/**
* 切换桌型
*/
tableCut(item) {
dataform.callTableId = item.id;
},
/**
* 弹窗关闭监听
*/
close() {
this.phone = "";
if (tableList.value.length > 0) {
dataform.callTableId = tableList.value[0].id;
}
dataform.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>