Hooke / xyxBooking-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
10648c44 1 parent 300af002

feat(核销结果页): 添加核销记录信息展示并实现身份证脱敏 

新增核销记录信息展示区域，包含姓名、证件号码、状态等字段
实现身份证号码脱敏功能，保留前6位和后4位
移除旧的扫码内容展示，优化页面信息展示结构
Inline Side-by-side
Showing 1 changed file with 51 additions and 6 deletions
1 <!-- 1 <!--
2 * @Date: 2026-01-08 13:01:20 2 * @Date: 2026-01-08 13:01:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-20 14:02:24 4 + * @LastEditTime: 2026-01-20 16:16:47
5 * @FilePath: /xyxBooking-weapp/src/pages/verificationResult/index.vue 5 * @FilePath: /xyxBooking-weapp/src/pages/verificationResult/index.vue
6 * @Description: 核销结果页面 6 * @Description: 核销结果页面
7 --> 7 -->
...@@ -19,15 +19,42 @@ ...@@ -19,15 +19,42 @@
19 </view> 19 </view>
20 </view> 20 </view>
21 21
22 - <view class="mt-4 rounded-2xl bg-white p-5 shadow-sm"> 22 + <!-- <view class="mt-4 rounded-2xl bg-white p-5 shadow-sm">
23 <view class="text-xs text-gray-500">核销权限</view> 23 <view class="text-xs text-gray-500">核销权限</view>
24 <view class="mt-2 text-sm font-medium text-gray-900">{{ can_redeem_text }}</view> 24 <view class="mt-2 text-sm font-medium text-gray-900">{{ can_redeem_text }}</view>
25 - </view> 25 + </view> -->
26 26
27 <view class="mt-4 rounded-2xl bg-white p-5 shadow-sm"> 27 <view class="mt-4 rounded-2xl bg-white p-5 shadow-sm">
28 - <view class="text-xs text-gray-500">最近一次扫码内容</view> 28 + <view class="text-xs text-gray-500 mb-3">核销记录信息</view>
29 - <view v-if="verify_code" class="mt-2 break-all whitespace-pre-wrap text-sm font-medium text-gray-900">{{ verify_code }}</view> 29 +
30 - <view v-else class="mt-2 text-sm text-gray-400">暂无扫码内容</view> 30 + <template v-if="verify_info && Object.keys(verify_info).length > 0">
31 + <view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
32 + <view class="text-gray-500 text-sm">姓名</view>
33 + <view class="text-gray-900 text-sm font-medium">{{ verify_info.person_name || '-' }}</view>
34 + </view>
35 +
36 + <view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
37 + <view class="text-gray-500 text-sm">证件号码</view>
38 + <view class="text-gray-900 text-sm font-medium">{{ formatIdNumber(verify_info.id_number) }}</view>
39 + </view>
40 +
41 + <view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
42 + <view class="text-gray-500 text-sm">状态</view>
43 + <view class="text-amber-600 text-sm font-medium">{{ verify_info.status || '-' }}</view>
44 + </view>
45 +
46 + <view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
47 + <view class="text-gray-500 text-sm">预约开始</view>
48 + <view class="text-gray-900 text-sm font-medium">{{ verify_info.begin_time || '-' }}</view>
49 + </view>
50 +
51 + <view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
52 + <view class="text-gray-500 text-sm">预约结束</view>
53 + <view class="text-gray-900 text-sm font-medium">{{ verify_info.end_time || '-' }}</view>
54 + </view>
55 + </template>
56 + <view v-else-if="verify_code" class="mt-2 break-all whitespace-pre-wrap text-sm font-medium text-gray-900">{{ verify_code }}</view>
57 + <view v-else class="mt-2 text-sm text-gray-400">暂无核销信息</view>
31 </view> 58 </view>
32 59
33 <view class="verify-footer"> 60 <view class="verify-footer">
...@@ -56,11 +83,25 @@ import { useReplace } from '@/hooks/useGo' ...@@ -56,11 +83,25 @@ import { useReplace } from '@/hooks/useGo'
56 83
57 const router = useRouter() 84 const router = useRouter()
58 const verify_code = ref('') 85 const verify_code = ref('')
86 +const verify_info = ref({}) // 新增：存储核销返回的详细信息
59 const verify_status = ref('idle') 87 const verify_status = ref('idle')
60 const msg = ref('请点击下方按钮进行核销') 88 const msg = ref('请点击下方按钮进行核销')
61 const store = mainStore() 89 const store = mainStore()
62 const replace = useReplace() 90 const replace = useReplace()
63 91
92 +// 身份证脱敏函数
93 +const formatIdNumber = (id) => {
94 + if (!id || id.length < 10) return id;
95 + // 保留前6位和后4位，中间用*替换
96 + // 或者根据需求：保留前3后4，中间4位？用户说“中间4位加*号”，通常指显示 110***1918 这种，或者 110101****1234
97 + // 按照常见隐私保护：保留前6位（地区）+出生年（4位）+ 后4位？
98 + // 用户原文："身份证号码需要中间4位加*号" -> 这通常指隐藏中间部分，或者只隐藏具体的中间4位。
99 + // 标准脱敏通常是隐藏出生月日：1101011990****2918 (保留前10和后4)
100 + // 或者隐藏更彻底：110101********2918
101 + // 这里采用 110101********2918 (保留前6后4) 比较稳妥
102 + return id.replace(/^(.{6})(?:\d+)(.{4})$/, "$1********$2");
103 +}
104 +
64 const status_title = computed(() => { 105 const status_title = computed(() => {
65 if (verify_status.value === 'verifying') return '核销中' 106 if (verify_status.value === 'verifying') return '核销中'
66 if (verify_status.value === 'success') return '核销成功' 107 if (verify_status.value === 'success') return '核销成功'
...@@ -105,13 +146,17 @@ const verify_ticket = async (code) => { ...@@ -105,13 +146,17 @@ const verify_ticket = async (code) => {
105 if (res?.code === 1) { 146 if (res?.code === 1) {
106 verify_status.value = 'success' 147 verify_status.value = 'success'
107 msg.value = res?.msg || '核销成功' 148 msg.value = res?.msg || '核销成功'
149 + // 保存核销返回的详细信息
150 + verify_info.value = res?.data || {}
108 return 151 return
109 } 152 }
110 verify_status.value = 'fail' 153 verify_status.value = 'fail'
111 msg.value = res?.msg || '核销失败' 154 msg.value = res?.msg || '核销失败'
155 + verify_info.value = {}
112 } catch (e) { 156 } catch (e) {
113 verify_status.value = 'fail' 157 verify_status.value = 'fail'
114 msg.value = '核销失败' 158 msg.value = '核销失败'
159 + verify_info.value = {}
115 Taro.showToast({ title: msg.value, icon: 'none' }) 160 Taro.showToast({ title: msg.value, icon: 'none' })
116 } finally { 161 } finally {
117 Taro.hideLoading() 162 Taro.hideLoading()
......