409 lines
10 KiB
Vue
409 lines
10 KiB
Vue
|
<script setup>
|
|||
|
|
import { computed, onUnmounted, ref } from 'vue'
|
|||
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const dialogStore = useDialogStore()
|
|||
|
|
const agentStore = useAgentStore()
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
// 表单数据
|
|||
|
|
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
|
|||
|
|
function showToast(options) {
|
|||
|
|
const message = typeof options === 'string' ? options : (options?.message || options?.title || '')
|
|||
|
|
if (!message)
|
|||
|
|
return
|
|||
|
|
uni.showToast({
|
|||
|
|
title: message,
|
|||
|
|
icon: options?.type === 'success' ? 'success' : 'none',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单验证
|
|||
|
|
const isPhoneNumberValid = computed(() => {
|
|||
|
|
return /^1[3-9]\d{9}$/.test(phoneNumber.value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const isIdCardValid = computed(() => {
|
|||
|
|
return /^(?:\d{15}|\d{17}[\dXx])$/.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', captchaVerifyParam: '' })
|
|||
|
|
.json()
|
|||
|
|
if (!error.value && 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)
|
|||
|
|
timer = null
|
|||
|
|
}
|
|||
|
|
isCountingDown.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toUserAgreement() {
|
|||
|
|
closeDialog()
|
|||
|
|
router.push(`/userAgreement`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toPrivacyPolicy() {
|
|||
|
|
closeDialog()
|
|||
|
|
router.push(`/privacyPolicy`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
if (timer) {
|
|||
|
|
clearInterval(timer)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view v-if="dialogStore.showRealNameAuth" class="real-name-auth-dialog-box">
|
|||
|
|
<wd-popup
|
|||
|
|
v-model="dialogStore.showRealNameAuth"
|
|||
|
|
round
|
|||
|
|
position="bottom"
|
|||
|
|
:style="{ maxHeight: '90vh' }"
|
|||
|
|
@close="closeDialog"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
class="real-name-auth-dialog"
|
|||
|
|
style="background: linear-gradient(135deg, var(--van-theme-primary-light), rgba(255,255,255,0.9));"
|
|||
|
|
>
|
|||
|
|
<view class="title-bar">
|
|||
|
|
<view class="text-base font-bold sm:text-lg" style="color: var(--van-text-color);">
|
|||
|
|
实名认证
|
|||
|
|
</view>
|
|||
|
|
<wd-icon name="cross" class="close-icon" style="color: var(--van-text-color-2);" @click="closeDialog" />
|
|||
|
|
</view>
|
|||
|
|
<view class="dialog-content">
|
|||
|
|
<view class="dialog-inner px-4 pb-4 pt-2">
|
|||
|
|
<view
|
|||
|
|
class="auth-notice mb-4 rounded-xl p-3 sm:p-4"
|
|||
|
|
style="background-color: var(--van-theme-primary-light); border: 1px solid rgba(162, 37, 37, 0.2);"
|
|||
|
|
>
|
|||
|
|
<view class="text-xs space-y-1.5 sm:text-sm sm:space-y-2" style="color: var(--van-text-color);">
|
|||
|
|
<text class="font-medium" style="color: var(--van-theme-primary);">
|
|||
|
|
实名认证说明：
|
|||
|
|
</text>
|
|||
|
|
<text>1. 实名认证是提现的必要条件</text>
|
|||
|
|
<text>2. 提现金额将转入您实名认证的银行卡账户</text>
|
|||
|
|
<text>3. 请确保填写的信息真实有效，否则将影响提现功能的使用</text>
|
|||
|
|
<text>4. 认证信息提交后将无法修改，请仔细核对</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="real-name-form">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">
|
|||
|
|
姓名
|
|||
|
|
</text>
|
|||
|
|
<wd-input
|
|||
|
|
v-model="realName"
|
|||
|
|
class="field-wd-input"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="请输入真实姓名"
|
|||
|
|
no-border
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">
|
|||
|
|
身份证
|
|||
|
|
</text>
|
|||
|
|
<wd-input
|
|||
|
|
v-model="idCard"
|
|||
|
|
class="field-wd-input"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="请输入身份证号"
|
|||
|
|
maxlength="18"
|
|||
|
|
no-border
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">
|
|||
|
|
手机号
|
|||
|
|
</text>
|
|||
|
|
<wd-input
|
|||
|
|
v-model="phoneNumber"
|
|||
|
|
class="field-wd-input"
|
|||
|
|
type="number"
|
|||
|
|
placeholder="请输入手机号"
|
|||
|
|
maxlength="11"
|
|||
|
|
no-border
|
|||
|
|
clearable
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="form-label">
|
|||
|
|
验证码
|
|||
|
|
</text>
|
|||
|
|
<view class="verification-input-wrapper">
|
|||
|
|
<wd-input
|
|||
|
|
v-model="verificationCode"
|
|||
|
|
class="verification-wd-input"
|
|||
|
|
placeholder="请输入验证码"
|
|||
|
|
maxlength="6"
|
|||
|
|
no-border
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<template #suffix>
|
|||
|
|
<wd-button
|
|||
|
|
size="small"
|
|||
|
|
type="primary"
|
|||
|
|
plain
|
|||
|
|
:disabled="isCountingDown || !isPhoneNumberValid"
|
|||
|
|
@click="sendVerificationCode"
|
|||
|
|
>
|
|||
|
|
{{ isCountingDown ? `${countdown}s` : '获取验证码' }}
|
|||
|
|
</wd-button>
|
|||
|
|
</template>
|
|||
|
|
</wd-input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="agreement-wrapper">
|
|||
|
|
<wd-checkbox v-model="isAgreed" shape="square" size="18px" />
|
|||
|
|
<text class="agreement-text">
|
|||
|
|
我已阅读并同意
|
|||
|
|
<text class="agreement-link" @click="toUserAgreement">
|
|||
|
|
《用户协议》
|
|||
|
|
</text>
|
|||
|
|
和
|
|||
|
|
<text class="agreement-link" @click="toPrivacyPolicy">
|
|||
|
|
《隐私政策》
|
|||
|
|
</text>
|
|||
|
|
，并确认以上信息真实有效，将用于提现等资金操作
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<wd-button
|
|||
|
|
class="submit-wd-btn"
|
|||
|
|
block
|
|||
|
|
type="primary"
|
|||
|
|
:disabled="!canSubmit"
|
|||
|
|
@click="handleSubmit"
|
|||
|
|
>
|
|||
|
|
确认认证
|
|||
|
|
</wd-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</wd-popup>
|
|||
|
|
</view>
|
|||
|
|
</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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 与登录页 login.vue 表单卡片一致 */
|
|||
|
|
.real-name-form {
|
|||
|
|
border-radius: 16px;
|
|||
|
|
background-color: rgba(255, 255, 255, 0.96);
|
|||
|
|
box-shadow: 0 8px 28px rgba(63, 63, 63, 0.08);
|
|||
|
|
padding: 1.25rem 1rem 1.5rem;
|
|||
|
|
backdrop-filter: blur(4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-item {
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 0 0.75rem;
|
|||
|
|
min-height: 48px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-label {
|
|||
|
|
font-size: 0.9375rem;
|
|||
|
|
color: #111827;
|
|||
|
|
margin-right: 0.75rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
min-width: 3.25rem;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-wd-input {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verification-input-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.verification-wd-input {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-top: 1rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: #6b7280;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-left: 0.5rem;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-link {
|
|||
|
|
color: #2563eb;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.submit-wd-btn {
|
|||
|
|
margin-top: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.real-name-auth-dialog-box {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
</style>
|