396 lines
9.0 KiB
Vue
396 lines
9.0 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="取号详情" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff'
|
|
title-size='36' height='36' id="navbar">
|
|
</u-navbar>
|
|
<view class="container" v-if="ewmflag == false">
|
|
<view class="success-card">
|
|
<!-- 顶部装饰边框 -->
|
|
<view class="top-border"></view>
|
|
<!-- 成功标题 -->
|
|
<view class="success-header">
|
|
<view class="success-title">排队成功</view>
|
|
<view class="success-subtitle">您的卡座由门店安排!</view>
|
|
<view class="menu-dots" @click="btnsx">
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uCoMmvJBs6ZxTEV70231" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- 排队信息 -->
|
|
<view class="queue-info">
|
|
<view class="info-item">
|
|
<text class="label">我的号码</text>
|
|
<text class="value highlight">{{queueData.number}}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">号码状态</text>
|
|
<text class="value highlight" v-if="queueData.status == 1">待叫号</text>
|
|
<text class="value highlight" v-if="queueData.status == 2">叫号中</text>
|
|
<text class="value highlight" v-if="queueData.status == 3">已核销</text>
|
|
<text class="value highlight" v-if="queueData.status == 4">已过号</text>
|
|
<text class="value highlight" v-if="queueData.status == 5">已失效</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">还需等待</text>
|
|
<text class="value">{{queueData.totalWaitCount == undefined ? '--' : queueData.totalWaitCount}}桌</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">预估等待</text>
|
|
<text class="value">{{queueData.totalWaitTime == undefined ? '--' : queueData.totalWaitTime}}分钟</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">取号时间</text>
|
|
<text class="value">{{queueData.createTime}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 底部按钮 -->
|
|
<view class="bottom-buttons">
|
|
<button class="btn btn-share" @click="cancelQueue">
|
|
取消排队
|
|
</button>
|
|
<button class="btn btn-verify" @click="verifyQueue">
|
|
核销排队
|
|
</button>
|
|
</view>
|
|
<!-- <button class="notify-btn" @click="openNotify">开启消息通知</button> -->
|
|
</view>
|
|
</view>
|
|
<view class="imgewm" v-if="ewmflag == true">
|
|
<view class="" style="width: 100%;text-align: center;font-size: 30rpx;color: #fff;margin-bottom: 50rpx;">
|
|
请出示核销码给商户核销
|
|
</view>
|
|
<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
|
|
<!-- <view class="" style="width: 100%;text-align: center;margin-top: 20rpx;color: #fff;">
|
|
核销码:{{hxma}}
|
|
</view> -->
|
|
<view class="btn"
|
|
@click="ewmflag = false">
|
|
关闭
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uQRCode from '@/common/uqrcode.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#000",
|
|
},
|
|
queueData: {},
|
|
id:'',
|
|
ewmflag:false,
|
|
hxma:''
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.id = option.id
|
|
this.getQueueInfo()
|
|
this.gethx()
|
|
},
|
|
methods: {
|
|
// 开启消息通知（订阅消息授权）
|
|
openNotify() {
|
|
try {
|
|
wx.requestSubscribeMessage({
|
|
tmplIds: ['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'],
|
|
success: (res) => {
|
|
console.log('subscribe success:', res)
|
|
uni.showToast({ title: '已提交授权', icon: 'none' })
|
|
},
|
|
fail: (err) => {
|
|
console.log('subscribe fail:', err)
|
|
uni.showToast({ title: '授权失败，请稍后重试', icon: 'none' })
|
|
}
|
|
})
|
|
} catch (e) {
|
|
console.log('subscribe error:', e)
|
|
uni.showToast({ title: '当前环境不支持订阅消息', icon: 'none' })
|
|
}
|
|
},
|
|
// 获取核销码
|
|
gethx(){
|
|
this.$u.post(`/app/queueUser/generateCode/${this.id}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.hxma = res.data.verificationCode
|
|
}
|
|
})
|
|
},
|
|
// 获取排队信息
|
|
getQueueInfo(queueId) {
|
|
this.$u.get(`/app/queueUser/getDetail?storeId=${this.$store.state.storeId}&id=${this.id}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.queueData = res.data
|
|
}
|
|
})
|
|
},
|
|
// 点击刷新
|
|
btnsx(){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
this.$u.get(`/app/queueUser/getDetail?storeId=${this.$store.state.storeId}&id=${this.id}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.queueData = res.data
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '刷新成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 取消排号
|
|
cancelQueue() {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要取消排号吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
that.$u.post(`/app/queueUser/cancelQueue/${this.id}`).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '取消成功',
|
|
icon: 'success'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 分享给好友
|
|
shareToFriends() {
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
});
|
|
},
|
|
|
|
// 核销排队
|
|
verifyQueue() {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '核销确认',
|
|
content: '确定要核销当前排队吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
that.ewmflag = true
|
|
that.qrFun()
|
|
}
|
|
}
|
|
});
|
|
},
|
|
qrFun: function() {
|
|
this.ewmflag = true
|
|
uQRCode.make({
|
|
canvasId: 'qrcode',
|
|
text: 'https://wx.ccttiot.com/b/v?h=' + this.hxma + '&id=' + this.id,
|
|
size: 300,
|
|
margin: 0,
|
|
backgroundColor: '#ffffff',
|
|
foregroundColor: '#000000',
|
|
fileType: 'jpg',
|
|
errorCorrectLevel: uQRCode.errorCorrectLevel.H,
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #0c0c0c;
|
|
}
|
|
.notify-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: transparent;
|
|
color: #FF8998;
|
|
border: 2rpx solid #FF8998;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
.btn{
|
|
width:300rpx;
|
|
height: 94rpx;
|
|
background: #FF8998;
|
|
border-radius: 47rpx 47rpx 47rpx 47rpx;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin: auto;
|
|
line-height: 94rpx;
|
|
}
|
|
.imgewm {
|
|
width: 700rpx;
|
|
height:800rpx;
|
|
margin: auto;
|
|
margin-top: 104rpx;
|
|
z-index: 2;
|
|
background-color: #1C1C1E;
|
|
padding-top: 50rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
.container {
|
|
padding: 20rpx;
|
|
height: 91vh;
|
|
background: #000;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.success-card {
|
|
background: #1a1a1a;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx 30rpx;
|
|
margin: 20rpx;
|
|
position: relative;
|
|
min-height: 50vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.top-border {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 8rpx;
|
|
background: #FF8998;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
}
|
|
|
|
.success-header {
|
|
position: relative;
|
|
margin-bottom: 60rpx;
|
|
|
|
.success-title {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.success-subtitle {
|
|
font-size: 28rpx;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
|
|
.menu-dots {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rpx;
|
|
image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
.dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
background: #FF8998;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.queue-info {
|
|
flex: 1;
|
|
margin-bottom: 60rpx;
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid rgba(255,255,255,0.1);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.value {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
|
|
&.highlight {
|
|
color: #FF8998;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.cancel-link {
|
|
text-align: center;
|
|
color: rgba(255,255,255,0.8);
|
|
font-size: 28rpx;
|
|
text-decoration: underline;
|
|
margin-bottom: 60rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.bottom-buttons {
|
|
display: flex;
|
|
gap: 30rpx;
|
|
margin-top: auto;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
margin-top: 30rpx;
|
|
&.btn-share {
|
|
background: transparent;
|
|
color: #fff;
|
|
border: 2rpx solid #fff;
|
|
}
|
|
|
|
&.btn-verify {
|
|
background: #FF8998;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
</style> |