312 lines
7.0 KiB
Vue
312 lines
7.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">
|
|
<!-- 提示信息区域 -->
|
|
<view class="tips-section">
|
|
<view class="tip-item">
|
|
<view class="tip-icon">!</view>
|
|
<text class="tip-text">取号后请留意微信消息提醒</text>
|
|
</view>
|
|
<view class="tip-item">
|
|
<view class="tip-icon">!</view>
|
|
<text class="tip-text">听到叫号请尽快进场,过号10分钟后自动取消排队</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 桌型选择区域 -->
|
|
<view class="table-selection">
|
|
<view class="section-title">请选择卡座类型</view>
|
|
<view class="table-cards">
|
|
<view
|
|
v-for="(item,index) in tableData" :key="index"
|
|
class="table-card"
|
|
:class="{ 'selected': selectedTable === index }"
|
|
@click="selectTable(item,index)">
|
|
<view class="table-info">
|
|
<view class="table-name">{{item.name}}</view>
|
|
<view class="table-desc">可取号时间：{{item.startTime + '~' + item.endTime}}</view>
|
|
<view class="table-desc" style="flex-wrap: wrap;width: 400rpx;">{{item.description == null ? '--' : item.description}}</view>
|
|
</view>
|
|
<view class="wait-info">
|
|
<view class="wait-text">等待{{item.totalWaitCount}}桌,约{{item.totalWaitTime}}分钟</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 取号按钮 -->
|
|
<view class="action-section">
|
|
<button class="get-number-btn" @click="getNumber">立即取号</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: "#010000",
|
|
},
|
|
selectedTable: '-1', // 默认选中大桌
|
|
tableData: [],
|
|
itemobj:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.getlist()
|
|
},
|
|
methods: {
|
|
|
|
// 请求排队队伍列表
|
|
getlist(){
|
|
this.$u.get(`/app/queueTeam/list?storeId=${this.$store.state.storeId}`).then(res => {
|
|
if (res.code == 200) {
|
|
this.tableData = res.data
|
|
}else if(res.code == 401){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '你还未登录，是否去登录？',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定')
|
|
uni.reLaunch({
|
|
url:'/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消')
|
|
uni.switchTab({
|
|
url:'/pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
selectTable(item,index) {
|
|
this.selectedTable = index
|
|
this.itemobj = item
|
|
},
|
|
getNumber() {
|
|
if (this.selectedTable == '-1') {
|
|
uni.showToast({
|
|
title: '请选择桌型',
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
return
|
|
}
|
|
|
|
// 先请求通知权限，权限获取成功后再取号
|
|
this.requestNotifyPermission()
|
|
},
|
|
|
|
// 请求通知权限
|
|
requestNotifyPermission() {
|
|
try {
|
|
wx.requestSubscribeMessage({
|
|
tmplIds: ['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'],
|
|
success: (res) => {
|
|
console.log('subscribe success:', res)
|
|
if (res['SIDHHiiYNogQWa8JUj-RYXsIccqHfPY9cJYm9vKGfic'] === 'accept') {
|
|
uni.showToast({ title: '通知权限获取成功', icon: 'success' })
|
|
// 权限获取成功后直接执行取号流程
|
|
setTimeout(() => {
|
|
this.proceedWithGetNumber()
|
|
}, 1000)
|
|
} else {
|
|
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' })
|
|
}
|
|
},
|
|
|
|
// 执行取号流程
|
|
proceedWithGetNumber() {
|
|
let that = this
|
|
uni.showModal({
|
|
title: '确认取号',
|
|
content: `您选择了${that.itemobj.name}，是否确认取号？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
let data = {
|
|
storeId:that.$store.state.storeId,
|
|
queueTeamId:that.itemobj.id
|
|
}
|
|
this.$u.post(`/app/queueUser/takeNumber`,data).then(res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '取号成功',
|
|
icon: 'success',
|
|
duration:3000
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateTo({
|
|
url:'/page_shanghu/paidui/hexiao?id=' + res.data
|
|
})
|
|
},1500)
|
|
}else{
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration:3000
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #010000;
|
|
}
|
|
|
|
.container {
|
|
padding: 20rpx;
|
|
// min-height: 100vh;
|
|
}
|
|
|
|
.tips-section {
|
|
margin-bottom: 40rpx;
|
|
|
|
.tip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.tip-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 50%;
|
|
background: #FF8998;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20rpx;
|
|
font-weight: bold;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tip-text {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-selection {
|
|
margin-bottom: 60rpx;
|
|
|
|
.section-title {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.table-cards {
|
|
.table-card {
|
|
background: #2a2f3f;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&.selected {
|
|
background: #FF8998;
|
|
}
|
|
|
|
.table-info {
|
|
.table-name {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.table-desc {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.wait-info {
|
|
.wait-text {
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-section {
|
|
position: fixed;
|
|
bottom: 40rpx;
|
|
left: 20rpx;
|
|
right: 20rpx;
|
|
|
|
.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;
|
|
}
|
|
|
|
.get-number-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: #FF8998;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: darken(#FF8998, 10%);
|
|
}
|
|
}
|
|
}
|
|
</style> |