CompleteInfoPage.vue
4.46 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
<div class="complete-info-page w-full min-h-screen relative overflow-hidden flex flex-col items-center">
<!-- Starry Background Effect -->
<StarryBackground :bg-image="bgImg" />
<!-- Header Section -->
<div class="mt-16 flex flex-col items-center z-10 w-full px-8 text-center">
<h1 class="text-white text-3xl font-bold tracking-wider mb-3 drop-shadow-lg">完善信息</h1>
<p class="text-white/80 text-sm tracking-wide font-medium">请确认和补全您的个人信息</p>
</div>
<!-- Form Card -->
<div class="w-full px-6 mt-10 z-10">
<FrostedGlass class="p-6 !rounded-2xl !border-white/20 !shadow-none" :bg-opacity="10" blur-level="md">
<div class="space-y-6">
<!-- Name Input -->
<div class="form-item">
<label class="block text-white font-bold text-base mb-2 tracking-wide">姓名</label>
<van-field
v-model="form.name"
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"
/>
</div>
<!-- Phone Input -->
<div class="form-item">
<label class="block text-white font-bold text-base mb-2 tracking-wide">手机号</label>
<van-field
v-model="form.phone"
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"
type="tel"
maxlength="11"
/>
</div>
<!-- ID Card Input -->
<div class="form-item">
<label class="block text-white font-bold text-base mb-2 tracking-wide">身份证号</label>
<van-field
v-model="form.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"
/>
</div>
<!-- Note -->
<div class="flex items-start gap-2 mt-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>
</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, reactive } 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'
// Route
const route = useRoute()
const router = useRouter()
useTitle(route.meta.title || '完善信息')
// Form Data
const form = reactive({
name: '张开心', // Mock initial data as per design
phone: '15658666022', // Mock initial data as per design
idCard: ''
})
// Actions
const handleConfirm = () => {
if (!form.name) {
showToast('请输入姓名')
return
}
if (!form.phone) {
showToast('请输入手机号')
return
}
if (!form.idCard) {
showToast('请输入身份证号')
return
}
// 身份证号正则校验 (15位或18位)
const idCardRegex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
if (!idCardRegex.test(form.idCard)) {
showToast('请输入正确的身份证号')
return
}
// Validation passed
showToast('提交成功')
// Navigate to next step or handle submission logic here
}
</script>
<style lang="less" scoped>
.submit-btn {
background: linear-gradient(180deg, rgba(249, 243, 157, 0.19) 0%, rgba(219, 243, 48, 0.3) 100%) !important;
backdrop-filter: blur(4px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
&:active {
transform: scale(0.99);
}
}
:deep(.van-field__control) {
color: white !important;
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
}
</style>