IDQueryPage.vue
3.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<template>
<div class="id-query-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
<!-- Starry Background -->
<StarryBackground :bg-image="bgImg" />
<!-- Main Content Card -->
<div class="w-full px-6 mt-20 z-10">
<FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
<!-- Illustration -->
<div class="flex justify-center mb-2">
<!-- Placeholder for the illustration -->
<img :src="emptyStateImg" class="w-32 h-32 object-contain" alt="No Data" />
</div>
<!-- Description Text -->
<p class="text-[#FFDD01] text-center text-sm mb-6 leading-relaxed tracking-wide">
时光机没有找到您的历史活动信息，<br />
试试输入活动报名时登记的身份证号吧~
</p>
<!-- Dashed Separator -->
<div class="w-full h-[1px] border-t border-dashed border-white/30 my-8"></div>
<!-- ID Card Input Section -->
<div class="space-y-4">
<label class="block text-white font-bold text-lg tracking-wide">身份证号</label>
<van-field
v-model="idCard"
placeholder="请输入您的身份证号"
class="custom-input rounded-lg !bg-white/10 !text-white !border-[1px] !border-solid !border-[rgba(255,255,255,0.57)] !p-3"
:border="false"
clearable
/>
<!-- Notes -->
<div class="space-y-4" style="margin-top: 2rem;">
<!-- Note 1 -->
<div class="flex items-start gap-2">
<img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
<p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
时光机为该身份证号找到的历史数据，收集到的星球币都将计入您的账号中，请谨慎如实填写
</p>
</div>
<!-- Note 2 -->
<div class="flex items-start gap-2">
<img :src="starImg" class="w-3 h-3 mt-0.5 shrink-0" alt="star" />
<p class="text-xs text-white/90 leading-relaxed tracking-wide text-justify">
时光机为每个身份证号找到的历史数据，只能参与一次（即一个账号的）星球币累积
</p>
</div>
</div>
</div>
</FrostedGlass>
</div>
<!-- Confirm Button -->
<div class="w-full px-6 mt-auto z-10 mb-8">
<van-button block
class="submit-btn !rounded-lg !bg-transparent !border-[#FFDD01] !text-[#FFDD01] !font-bold !text-lg !h-[48px]"
@click="handleConfirm">
确认
</van-button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTitle } from '@vueuse/core'
import { showToast } from 'vant'
// Assets
import bgImg from '@/assets/images/recall/bg01@2x.png'
import starImg from '@/assets/images/recall/xing@2x.png'
import emptyStateImg from '@/assets/images/recall/no@2x.png'
const route = useRoute()
const router = useRouter()
useTitle('身份证号查询')
const idCard = ref('')
// ID Card Validation
const validateIdCard = (id) => {
// 15 or 18 digit validation
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
return reg.test(id)
}
const handleConfirm = () => {
if (!idCard.value) {
showToast('请输入身份证号')
return
}
if (!validateIdCard(idCard.value)) {
showToast('请输入正确的身份证号')
return
}
// TODO: Submit logic
showToast('验证通过')
// router.push(...)
}
</script>
<style lang="less" scoped>
.custom-input {
::v-deep(.van-field__control) {
color: #fff;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
}
</style>