first commit
This commit is contained in:
376
src/components/RealNameAuthDialog.vue
Normal file
376
src/components/RealNameAuthDialog.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useDialogStore } from "@/stores/dialogStore";
|
||||
const router = useRouter();
|
||||
const dialogStore = useDialogStore();
|
||||
const agentStore = useAgentStore();
|
||||
const userStore = useUserStore();
|
||||
import { showToast } from "vant";
|
||||
// 表单数据
|
||||
const realName = ref("");
|
||||
const idCard = ref("");
|
||||
const phoneNumber = ref("");
|
||||
const verificationCode = ref("");
|
||||
const isAgreed = ref(false);
|
||||
|
||||
// 倒计时相关
|
||||
const isCountingDown = ref(false);
|
||||
const countdown = ref(60);
|
||||
let timer = null;
|
||||
|
||||
// 聚焦状态变量
|
||||
const nameFocused = ref(false);
|
||||
const idCardFocused = ref(false);
|
||||
const phoneFocused = ref(false);
|
||||
const codeFocused = ref(false);
|
||||
|
||||
// 表单验证
|
||||
const isPhoneNumberValid = computed(() => {
|
||||
return /^1[3-9]\d{9}$/.test(phoneNumber.value);
|
||||
});
|
||||
|
||||
const isIdCardValid = computed(() => {
|
||||
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCard.value);
|
||||
});
|
||||
|
||||
const isRealNameValid = computed(() => {
|
||||
return /^[\u4e00-\u9fa5]{2,}$/.test(realName.value);
|
||||
});
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return (
|
||||
isPhoneNumberValid.value &&
|
||||
isIdCardValid.value &&
|
||||
isRealNameValid.value &&
|
||||
verificationCode.value.length === 6 &&
|
||||
isAgreed.value
|
||||
);
|
||||
});
|
||||
|
||||
// 发送验证码
|
||||
async function sendVerificationCode() {
|
||||
if (isCountingDown.value || !isPhoneNumberValid.value) return;
|
||||
if (!isPhoneNumberValid.value) {
|
||||
showToast({ message: "请输入有效的手机号" });
|
||||
return;
|
||||
}
|
||||
const { data, error } = await useApiFetch("auth/sendSms")
|
||||
.post({ mobile: phoneNumber.value, actionType: "realName" })
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
showToast({ message: "获取成功" });
|
||||
startCountdown();
|
||||
} else {
|
||||
showToast(data.value.msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
isCountingDown.value = true;
|
||||
countdown.value = 60;
|
||||
timer = setInterval(() => {
|
||||
if (countdown.value > 0) {
|
||||
countdown.value--;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
isCountingDown.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 提交实名认证
|
||||
async function handleSubmit() {
|
||||
if (!isRealNameValid.value) {
|
||||
showToast({ message: "请输入有效的姓名" });
|
||||
return;
|
||||
}
|
||||
if (!isIdCardValid.value) {
|
||||
showToast({ message: "请输入有效的身份证号" });
|
||||
return;
|
||||
}
|
||||
if (!isPhoneNumberValid.value) {
|
||||
showToast({ message: "请输入有效的手机号" });
|
||||
return;
|
||||
}
|
||||
if (verificationCode.value.length !== 6) {
|
||||
showToast({ message: "请输入有效的验证码" });
|
||||
return;
|
||||
}
|
||||
if (!isAgreed.value) {
|
||||
showToast({ message: "请先同意用户协议" });
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await useApiFetch("/agent/real_name")
|
||||
.post({
|
||||
name: realName.value,
|
||||
id_card: idCard.value,
|
||||
mobile: phoneNumber.value,
|
||||
code: verificationCode.value,
|
||||
})
|
||||
.json();
|
||||
|
||||
if (data.value && !error.value) {
|
||||
if (data.value.code === 200) {
|
||||
showToast({ message: "认证成功" });
|
||||
// 更新实名状态
|
||||
agentStore.isRealName = true;
|
||||
// 刷新代理状态信息
|
||||
await agentStore.fetchAgentStatus();
|
||||
// 刷新用户信息
|
||||
await userStore.fetchUserInfo();
|
||||
closeDialog();
|
||||
} else {
|
||||
showToast(data.value.msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
dialogStore.closeRealNameAuth();
|
||||
// 重置表单
|
||||
realName.value = "";
|
||||
idCard.value = "";
|
||||
phoneNumber.value = "";
|
||||
verificationCode.value = "";
|
||||
isAgreed.value = false;
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}
|
||||
|
||||
function toUserAgreement() {
|
||||
closeDialog();
|
||||
router.push(`/userAgreement`);
|
||||
}
|
||||
|
||||
function toPrivacyPolicy() {
|
||||
closeDialog();
|
||||
router.push(`/privacyPolicy`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="dialogStore.showRealNameAuth" class="real-name-auth-dialog-box">
|
||||
<van-popup v-model:show="dialogStore.showRealNameAuth" round position="bottom" @close="closeDialog"
|
||||
:style="{ maxHeight: '90vh' }">
|
||||
<div class="real-name-auth-dialog"
|
||||
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.9));">
|
||||
<div class="title-bar">
|
||||
<div class="text-base sm:text-lg font-bold" style="color: var(--van-text-color);">实名认证</div>
|
||||
<van-icon name="cross" class="close-icon" style="color: var(--van-text-color-2);"
|
||||
@click="closeDialog" />
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<div class="px-4 sm:px-6 md:px-8 py-3 sm:py-4">
|
||||
<div class="auth-notice p-3 sm:p-4 rounded-lg mb-4 sm:mb-6"
|
||||
style="background-color: var(--van-theme-primary-light); border: 1px solid rgba(162, 37, 37, 0.2);">
|
||||
<div class="text-xs sm:text-sm space-y-1.5 sm:space-y-2"
|
||||
style="color: var(--van-text-color);">
|
||||
<p class="font-medium" style="color: var(--van-theme-primary);">
|
||||
实名认证说明：
|
||||
</p>
|
||||
<p>1. 实名认证是提现的必要条件</p>
|
||||
<p>2. 提现金额将转入您实名认证的银行卡账户</p>
|
||||
<p>3. 请确保填写的信息真实有效，否则将影响提现功能的使用</p>
|
||||
<p>4. 认证信息提交后将无法修改，请仔细核对</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 sm:space-y-4">
|
||||
<!-- 姓名输入 -->
|
||||
<div :class="[
|
||||
'input-container',
|
||||
nameFocused ? 'focused' : '',
|
||||
]"
|
||||
style="background-color: var(--van-theme-primary-light); border: 2px solid rgba(162, 37, 37, 0);">
|
||||
<input v-model="realName" class="input-field" type="text" placeholder="请输入真实姓名"
|
||||
style="color: var(--van-text-color);" @focus="nameFocused = true"
|
||||
@blur="nameFocused = false" />
|
||||
</div>
|
||||
|
||||
<!-- 身份证号输入 -->
|
||||
<div :class="[
|
||||
'input-container',
|
||||
idCardFocused ? 'focused' : '',
|
||||
]"
|
||||
style="background-color: var(--van-theme-primary-light); border: 2px solid rgba(162, 37, 37, 0);">
|
||||
<input v-model="idCard" class="input-field" type="text" placeholder="请输入身份证号"
|
||||
maxlength="18" style="color: var(--van-text-color);" @focus="idCardFocused = true"
|
||||
@blur="idCardFocused = false" />
|
||||
</div>
|
||||
|
||||
<!-- 手机号输入 -->
|
||||
<div :class="[
|
||||
'input-container',
|
||||
phoneFocused ? 'focused' : '',
|
||||
]"
|
||||
style="background-color: var(--van-theme-primary-light); border: 2px solid rgba(162, 37, 37, 0);">
|
||||
<input v-model="phoneNumber" class="input-field" type="tel" placeholder="请输入手机号"
|
||||
maxlength="11" style="color: var(--van-text-color);" @focus="phoneFocused = true"
|
||||
@blur="phoneFocused = false" />
|
||||
</div>
|
||||
|
||||
<!-- 验证码输入 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<div :class="[
|
||||
'input-container flex-1',
|
||||
codeFocused ? 'focused' : '',
|
||||
]"
|
||||
style="background-color: var(--van-theme-primary-light); border: 2px solid rgba(162, 37, 37, 0);">
|
||||
<input v-model="verificationCode" class="input-field" placeholder="请输入验证码"
|
||||
maxlength="6" style="color: var(--van-text-color);" @focus="codeFocused = true"
|
||||
@blur="codeFocused = false" />
|
||||
</div>
|
||||
<button
|
||||
class="verify-code-btn px-3 sm:px-4 py-2.5 sm:py-3 text-xs sm:text-sm font-bold flex-shrink-0 rounded-lg transition duration-300 whitespace-nowrap"
|
||||
:class="isCountingDown || !isPhoneNumberValid
|
||||
? 'cursor-not-allowed bg-gray-300 text-gray-500'
|
||||
: 'text-white hover:opacity-90'
|
||||
" :style="isCountingDown || !isPhoneNumberValid
|
||||
? ''
|
||||
: 'background-color: var(--van-theme-primary);'"
|
||||
@click="sendVerificationCode">
|
||||
{{
|
||||
isCountingDown
|
||||
? `${countdown}s`
|
||||
: "获取验证码"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 协议同意框 -->
|
||||
<div class="flex items-start gap-2">
|
||||
<input type="checkbox" v-model="isAgreed"
|
||||
class="mt-0.5 sm:mt-1 flex-shrink-0 accent-primary" />
|
||||
<span class="text-xs sm:text-sm leading-relaxed"
|
||||
style="color: var(--van-text-color-2);">
|
||||
我已阅读并同意
|
||||
<a class="cursor-pointer hover:underline" style="color: var(--van-theme-primary);"
|
||||
@click="toUserAgreement">《用户协议》</a>
|
||||
和
|
||||
<a class="cursor-pointer hover:underline" style="color: var(--van-theme-primary);"
|
||||
@click="toPrivacyPolicy">《隐私政策》</a>
|
||||
，并确认以上信息真实有效，将用于提现等资金操作
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="mb-6 sm:mb-8 mt-6 sm:mt-8 w-full py-2.5 sm:py-3 text-base sm:text-lg font-bold text-white rounded-full transition duration-300"
|
||||
:class="{ 'opacity-50 cursor-not-allowed': !canSubmit }"
|
||||
:style="canSubmit ? 'background-color: var(--van-theme-primary);' : 'background-color: var(--van-text-color-3);'"
|
||||
@click="handleSubmit">
|
||||
确认认证
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.real-name-auth-dialog {
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--van-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.close-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
border-radius: 0.75rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.input-container {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container.focused {
|
||||
border: 2px solid var(--van-theme-primary) !important;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.input-field {
|
||||
padding: 0.875rem 1rem;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.input-field {
|
||||
padding: 1rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-code-btn {
|
||||
min-width: 85px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.verify-code-btn {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 优化小屏幕上的间距 */
|
||||
@media (max-width: 375px) {
|
||||
.input-field {
|
||||
padding: 0.625rem;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.verify-code-btn {
|
||||
min-width: 75px;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保弹窗在键盘弹出时可以滚动 */
|
||||
.real-name-auth-dialog-box {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user