|
|
<!-- pages/queue/business-select.vue -->
|
|
|
<template>
|
|
|
<view class="business-container">
|
|
|
<!-- 头部信息 -->
|
|
|
<!-- <view class="user-info">
|
|
|
<text class="info-title">您好，{{ userName }}</text>
|
|
|
<text class="info-subtitle">请选择需要办理的业务类型</text> -->
|
|
|
|
|
|
<view class="top-div">
|
|
|
<view></view>
|
|
|
<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="goBack">
|
|
|
<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
|
|
|
</tn-button>
|
|
|
</view>
|
|
|
<!-- </view> -->
|
|
|
|
|
|
<!-- 业务列表 -->
|
|
|
<scroll-view class="business-list" scroll-y>
|
|
|
<view class="business-grid">
|
|
|
<view v-for="(item, index) in businessList" :key="index" class="business-item"
|
|
|
:class="{ 'selected': selectedBusiness === item.value }" @click="selectBusiness(item)">
|
|
|
<view class="business-icon">{{ item.icon }}</view>
|
|
|
<view class="business-content">
|
|
|
<text class="business-name">{{ item.name }}</text>
|
|
|
<text class="business-desc">{{ item.description }}</text>
|
|
|
</view>
|
|
|
<view class="business-check" v-if="selectedBusiness === item.value">
|
|
|
<text>✓</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
<view class="action-buttons">
|
|
|
<button class="btn-back" @click="goBack">返回修改</button>
|
|
|
<button class="btn-confirm" :disabled="!selectedBusiness" @click="handleConfirm">
|
|
|
确认取号
|
|
|
</button>
|
|
|
</view>
|
|
|
|
|
|
<!-- 取号结果弹窗 -->
|
|
|
<uni-popup ref="resultPopup" type="center" :is-mask-click="false">
|
|
|
<view class="result-popup">
|
|
|
<view class="result-header">
|
|
|
<view class="result-close" @click="closeResultPopup">×</view>
|
|
|
<text class="result-icon">✅</text>
|
|
|
<text class="result-title">取号成功</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="result-content">
|
|
|
<view class="ticket-info">
|
|
|
<text class="ticket-label">您的排队号码</text>
|
|
|
<text class="ticket-number">{{ ticketInfo.ticketNumber }}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="ticket-details">
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">业务类型</text>
|
|
|
<text class="detail-value">{{ ticketInfo.businessName }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">取号时间</text>
|
|
|
<text class="detail-value">{{ ticketInfo.tktDate + ' ' + ticketInfo.tktTime }}</text>
|
|
|
</view>
|
|
|
<view class="detail-item">
|
|
|
<text class="detail-label">前方等候</text>
|
|
|
<text class="detail-value">{{ ticketInfo.waitingCount }}位</text>
|
|
|
</view>
|
|
|
<!-- <view class="detail-item">
|
|
|
<text class="detail-label">预计等候</text>
|
|
|
<text class="detail-value">{{ ticketInfo.waitingTime }}分钟</text>
|
|
|
</view> -->
|
|
|
<!-- <view class="detail-item">
|
|
|
<text class="detail-label">办理窗口：</text>
|
|
|
<text class="detail-value">{{ ticketInfo.serviceWindow }}</text>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="result-actions">
|
|
|
<!-- <button class="btn-print" @click="handlePrint">打印小票</button>
|
|
|
<button class="btn-notify" @click="handleNotify">推送消息</button> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from 'vue';
|
|
|
import { onLoad, onReady } from '@dcloudio/uni-app'
|
|
|
import { getBizList } from '@/api/index.js'
|
|
|
import { takeTicket } from '@/api/ticket.js'
|
|
|
|
|
|
const userName = ref('');
|
|
|
const selectedBusiness = ref('');
|
|
|
const businessList = ref([]);
|
|
|
const ticketInfo = ref({});
|
|
|
const resultPopup = ref(null);
|
|
|
|
|
|
// 通过接口获取业务列表
|
|
|
const loadBusinessList = async () => {
|
|
|
try {
|
|
|
const res = await getBizList()
|
|
|
console.log(res)
|
|
|
// 兼容后端多种字段命名，并为前端展示结构做一次映射
|
|
|
const list = Array.isArray(res) ? res : []
|
|
|
businessList.value = list.map((item, index) => ({
|
|
|
icon: item.icon || '🧾',
|
|
|
name: item.name || item.bizName || '',
|
|
|
value: item.value || item.uid || item.id || String(index),
|
|
|
prefix: item.prefix || item.remark || ''
|
|
|
}))
|
|
|
} catch (error) {
|
|
|
console.error('获取业务列表失败:', error)
|
|
|
uni.showToast({
|
|
|
title: '获取业务列表失败',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
// 如果接口失败，保留空列表或按需补充本地兜底数据
|
|
|
businessList.value = []
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 获取页面参数
|
|
|
onLoad((options) => {
|
|
|
userName.value = decodeURIComponent(options.name || '');
|
|
|
loadBusinessList()
|
|
|
});
|
|
|
|
|
|
// 选择业务
|
|
|
const selectBusiness = (item) => {
|
|
|
selectedBusiness.value = item.value;
|
|
|
};
|
|
|
|
|
|
// 返回修改
|
|
|
const goBack = () => {
|
|
|
uni.navigateBack();
|
|
|
};
|
|
|
|
|
|
// 确认取号
|
|
|
const handleConfirm = async () => {
|
|
|
try {
|
|
|
// 调用取号接口
|
|
|
const result = await takeTicket({
|
|
|
bizUid: selectedBusiness.value,
|
|
|
idCard: '412827199805026017',
|
|
|
rankUserName:'尹朋虎',
|
|
|
rankUserPhone:'15382312786'
|
|
|
});
|
|
|
|
|
|
// 根据 tktId 是否存在且非空判断是否取号成功
|
|
|
if (result && result.tktId && String(result.tktId).trim()) {
|
|
|
const currentBiz = businessList.value.find(b => b.value === selectedBusiness.value)
|
|
|
ticketInfo.value = {
|
|
|
ticketNumber: result.tktId,
|
|
|
businessName: result.bizName || currentBiz?.name || '',
|
|
|
waitingTime: result.estimatedWaitMinutes ?? result.waitingCount ?? 0,
|
|
|
serviceWindow: result.windowNames || '请等候叫号',
|
|
|
waitingCount: result.waitingCount,
|
|
|
tktDate:result.tktDate,
|
|
|
tktTime:result.tktTime
|
|
|
};
|
|
|
|
|
|
// 显示取号结果
|
|
|
resultPopup.value.open();
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '取号失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
console.log(result)
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
title: error.message || '业务获取失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 打印小票
|
|
|
const handlePrint = async () => {
|
|
|
uni.showLoading({
|
|
|
title: '正在取号...'
|
|
|
});
|
|
|
|
|
|
try {
|
|
|
const result = await takeTicket({
|
|
|
businessType: selectedBusiness.value
|
|
|
});
|
|
|
|
|
|
// request 封装已处理业务码，能进入这里通常即成功
|
|
|
if (result) {
|
|
|
uni.showToast({
|
|
|
title: '取号成功',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
title: error.message || '取号失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
} finally {
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 推送消息
|
|
|
const handleNotify = async () => {
|
|
|
uni.showLoading({
|
|
|
title: '正在推送...'
|
|
|
});
|
|
|
|
|
|
try {
|
|
|
const result = await sendNotification(ticketInfo.value);
|
|
|
|
|
|
if (result.code === 200) {
|
|
|
uni.showToast({
|
|
|
title: '消息已推送到手机',
|
|
|
icon: 'success'
|
|
|
});
|
|
|
}
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
title: error.message || '推送失败',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
} finally {
|
|
|
uni.hideLoading();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 关闭结果弹窗
|
|
|
const closeResultPopup = () => {
|
|
|
resultPopup.value?.close();
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.business-container {
|
|
|
padding: 40rpx 32rpx;
|
|
|
min-height: 100vh;
|
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
|
}
|
|
|
|
|
|
.user-info {
|
|
|
text-align: center;
|
|
|
margin-bottom: 40rpx;
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.top-div {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
background-color: #fff;
|
|
|
padding: 6vh 20px 10px 20px;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
z-index: 100;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.info-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
color: #1a1a1a;
|
|
|
display: block;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
|
|
|
.info-subtitle {
|
|
|
font-size: 26rpx;
|
|
|
color: #666;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.business-list {
|
|
|
height: 80vh;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
|
|
|
.business-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.business-item {
|
|
|
background: white;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 32rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
border: 2rpx solid #e0e0e0;
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
.business-item.selected {
|
|
|
border-color: #007AFF;
|
|
|
background: #f0f7ff;
|
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.15);
|
|
|
}
|
|
|
|
|
|
.business-icon {
|
|
|
font-size: 48rpx;
|
|
|
margin-right: 24rpx;
|
|
|
}
|
|
|
|
|
|
.business-content {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.business-name {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
display: block;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
.business-desc {
|
|
|
font-size: 24rpx;
|
|
|
color: #666;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.business-check {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
background: #007AFF;
|
|
|
border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
color: white;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
.action-buttons {
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.action-buttons button {
|
|
|
flex: 1;
|
|
|
height: 88rpx;
|
|
|
border-radius: 16rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
.btn-back {
|
|
|
background: #f0f0f0;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.btn-confirm {
|
|
|
background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-confirm:disabled {
|
|
|
background: #cccccc;
|
|
|
opacity: 0.6;
|
|
|
}
|
|
|
|
|
|
/* 取号结果弹窗 */
|
|
|
.result-popup {
|
|
|
width: 650rpx;
|
|
|
max-width: 90vw;
|
|
|
background: white;
|
|
|
border-radius: 24rpx;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.result-header {
|
|
|
position: relative;
|
|
|
padding: 40rpx 40rpx 20rpx;
|
|
|
text-align: center;
|
|
|
background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.result-close {
|
|
|
position: absolute;
|
|
|
right: 24rpx;
|
|
|
top: 20rpx;
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
border-radius: 50%;
|
|
|
line-height: 48rpx;
|
|
|
text-align: center;
|
|
|
font-size: 40rpx;
|
|
|
color: #fff;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
}
|
|
|
|
|
|
.result-icon {
|
|
|
font-size: 80rpx;
|
|
|
display: block;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.result-title {
|
|
|
font-size: 36rpx;
|
|
|
font-weight: bold;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.result-content {
|
|
|
padding: 40rpx;
|
|
|
}
|
|
|
|
|
|
.ticket-info {
|
|
|
text-align: center;
|
|
|
margin-bottom: 40rpx;
|
|
|
padding-bottom: 40rpx;
|
|
|
border-bottom: 2rpx dashed #e0e0e0;
|
|
|
}
|
|
|
|
|
|
.ticket-label {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
display: block;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
|
|
|
.ticket-number {
|
|
|
font-size: 72rpx;
|
|
|
font-weight: bold;
|
|
|
color: #007AFF;
|
|
|
display: block;
|
|
|
letter-spacing: 4rpx;
|
|
|
}
|
|
|
|
|
|
.ticket-details {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
|
|
|
.detail-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.detail-label {
|
|
|
font-size: 28rpx;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.detail-value {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.result-actions {
|
|
|
display: flex;
|
|
|
gap: 20rpx;
|
|
|
padding: 0 40rpx 40rpx;
|
|
|
}
|
|
|
|
|
|
.result-actions button {
|
|
|
flex: 1;
|
|
|
height: 80rpx;
|
|
|
border-radius: 12rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
.btn-print {
|
|
|
background: #4CAF50;
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-notify {
|
|
|
background: #2196F3;
|
|
|
color: white;
|
|
|
}
|
|
|
</style> |
