xfc_webview_V2/src/components/RealNameAuthDialog.vue

<script setup>
import { ref, computed } from "vue";
import { useDialogStore } from "@/stores/dialogStore";
import { useAliyunCaptcha } from "@/composables/useAliyunCaptcha";
const router = useRouter();
const dialogStore = useDialogStore();
const agentStore = useAgentStore();
const userStore = useUserStore();

const { runWithCaptcha } = useAliyunCaptcha();
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;
    }

    runWithCaptcha(
        (captchaVerifyParam) =>
            useApiFetch("auth/sendSms")
                .post({ mobile: phoneNumber.value, actionType: "realName", captchaVerifyParam })
                .json(),
        (res) => {
            if (res.code === 200) {
                showToast({ message: "获取成功" });
                startCountdown();
            } else {
                showToast(res.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>