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
<!--
* @Date: 2026-01-08 13:01:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-20 14:02:24
* @LastEditTime: 2026-01-20 16:16:47
* @FilePath: /xyxBooking-weapp/src/pages/verificationResult/index.vue
* @Description: 核销结果页面
-->
......@@ -19,15 +19,42 @@
</view>
</view>
<view class="mt-4 rounded-2xl bg-white p-5 shadow-sm">
<!-- <view class="mt-4 rounded-2xl bg-white p-5 shadow-sm">
<view class="text-xs text-gray-500">核销权限</view>
<view class="mt-2 text-sm font-medium text-gray-900">{{ can_redeem_text }}</view>
</view>
</view> -->
<view class="mt-4 rounded-2xl bg-white p-5 shadow-sm">
<view class="text-xs text-gray-500">最近一次扫码内容</view>
<view v-if="verify_code" class="mt-2 break-all whitespace-pre-wrap text-sm font-medium text-gray-900">{{ verify_code }}</view>
<view v-else class="mt-2 text-sm text-gray-400">暂无扫码内容</view>
<view class="text-xs text-gray-500 mb-3">核销记录信息</view>
<template v-if="verify_info && Object.keys(verify_info).length > 0">
<view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
<view class="text-gray-500 text-sm">姓名</view>
<view class="text-gray-900 text-sm font-medium">{{ verify_info.person_name || '-' }}</view>
</view>
<view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
<view class="text-gray-500 text-sm">证件号码</view>
<view class="text-gray-900 text-sm font-medium">{{ formatIdNumber(verify_info.id_number) }}</view>
</view>
<view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
<view class="text-gray-500 text-sm">状态</view>
<view class="text-amber-600 text-sm font-medium">{{ verify_info.status || '-' }}</view>
</view>
<view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
<view class="text-gray-500 text-sm">预约开始</view>
<view class="text-gray-900 text-sm font-medium">{{ verify_info.begin_time || '-' }}</view>
</view>
<view class="flex justify-between items-center py-2 border-b border-gray-50 border-solid last:border-0">
<view class="text-gray-500 text-sm">预约结束</view>
<view class="text-gray-900 text-sm font-medium">{{ verify_info.end_time || '-' }}</view>
</view>
</template>
<view v-else-if="verify_code" class="mt-2 break-all whitespace-pre-wrap text-sm font-medium text-gray-900">{{ verify_code }}</view>
<view v-else class="mt-2 text-sm text-gray-400">暂无核销信息</view>
</view>
<view class="verify-footer">
......@@ -56,11 +83,25 @@ import { useReplace } from '@/hooks/useGo'
const router = useRouter()
const verify_code = ref('')
const verify_info = ref({}) // 新增：存储核销返回的详细信息
const verify_status = ref('idle')
const msg = ref('请点击下方按钮进行核销')
const store = mainStore()
const replace = useReplace()
// 身份证脱敏函数
const formatIdNumber = (id) => {
if (!id || id.length < 10) return id;
// 保留前6位和后4位，中间用*替换
// 或者根据需求：保留前3后4，中间4位？用户说“中间4位加*号”，通常指显示 110***1918 这种，或者 110101****1234
// 按照常见隐私保护：保留前6位（地区）+出生年（4位）+ 后4位？
// 用户原文："身份证号码需要中间4位加*号" -> 这通常指隐藏中间部分，或者只隐藏具体的中间4位。
// 标准脱敏通常是隐藏出生月日：1101011990****2918 (保留前10和后4)
// 或者隐藏更彻底：110101********2918
// 这里采用 110101********2918 (保留前6后4) 比较稳妥
return id.replace(/^(.{6})(?:\d+)(.{4})$/, "$1********$2");
}
const status_title = computed(() => {
if (verify_status.value === 'verifying') return '核销中'
if (verify_status.value === 'success') return '核销成功'
......@@ -105,13 +146,17 @@ const verify_ticket = async (code) => {
if (res?.code === 1) {
verify_status.value = 'success'
msg.value = res?.msg || '核销成功'
// 保存核销返回的详细信息
verify_info.value = res?.data || {}
return
}
verify_status.value = 'fail'
msg.value = res?.msg || '核销失败'
verify_info.value = {}
} catch (e) {
verify_status.value = 'fail'
msg.value = '核销失败'
verify_info.value = {}
Taro.showToast({ title: msg.value, icon: 'none' })
} finally {
Taro.hideLoading()
......