|
|
@@ -0,0 +1,497 @@
|
|
|
+<template>
|
|
|
+ <div class="real-name-page">
|
|
|
+ <!-- 头部区域 -->
|
|
|
+ <div class="header-section">
|
|
|
+ <div class="header-content">
|
|
|
+ <div class="shop-info">
|
|
|
+ <el-image :src="homeIcon" class="homeIcon" />
|
|
|
+ <span class="shop-name">每天汪汪的店铺</span>
|
|
|
+ </div>
|
|
|
+ <div class="auth-status">
|
|
|
+ <span class="status-badge">未认证</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 标签导航栏 -->
|
|
|
+ <div class="tabs-section">
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="实名认证" name="realName" />
|
|
|
+ <el-tab-pane label="提现密码" name="withdrawPassword" />
|
|
|
+ <el-tab-pane label="收款账户" name="receivingAccount" />
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 实名认证 -->
|
|
|
+ <div class="content-section" v-if="activeTab === 'realName'">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <el-button type="primary" class="auth-button" @click="handleGoAuth"> 去实名认证 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 提现密码 -->
|
|
|
+ <div class="content-section" v-if="activeTab === 'withdrawPassword'">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <!-- <div class="password-form-wrapper">
|
|
|
+ <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="120px" label-position="left">
|
|
|
+ <el-form-item label="设置提现密码" prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="passwordForm.password"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入6位提现密码"
|
|
|
+ clearable
|
|
|
+ maxlength="6"
|
|
|
+ show-password
|
|
|
+ class="password-input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="请确认密码" prop="confirmPassword">
|
|
|
+ <el-input
|
|
|
+ v-model="passwordForm.confirmPassword"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入6位提现密码"
|
|
|
+ clearable
|
|
|
+ maxlength="6"
|
|
|
+ show-password
|
|
|
+ class="password-input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" class="submit-button" :loading="passwordLoading" @click="handlePasswordSubmit">
|
|
|
+ 确认
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div> -->
|
|
|
+ <div class="password-form-wrapper-step">
|
|
|
+ <el-steps :active="currentStep" style="max-width: 600px">
|
|
|
+ <el-step v-for="(item, index) in passList" :key="index">
|
|
|
+ <template #title>
|
|
|
+ <div class="step-title-wrapper">
|
|
|
+ <span class="step-title">{{ item.title }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-step>
|
|
|
+ </el-steps>
|
|
|
+ <el-form
|
|
|
+ ref="passwordFormRef"
|
|
|
+ :model="passwordForm"
|
|
|
+ :rules="passwordRules"
|
|
|
+ label-width="100px"
|
|
|
+ label-position="left"
|
|
|
+ class="form-wrapper"
|
|
|
+ >
|
|
|
+ <el-form-item label="验证原密码" prop="password">
|
|
|
+ <el-input
|
|
|
+ v-model="passwordForm.password"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入6位提现密码"
|
|
|
+ clearable
|
|
|
+ maxlength="6"
|
|
|
+ show-password
|
|
|
+ class="password-input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="forget-password">忘记密码</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 忘记密码对话框 -->
|
|
|
+ <el-dialog v-model="forgotPasswordVisible" title="忘记密码" width="500px" draggable :close-on-click-modal="false">
|
|
|
+ <el-form
|
|
|
+ ref="forgotPasswordFormRef"
|
|
|
+ :model="forgotPasswordForm"
|
|
|
+ :rules="forgotPasswordRules"
|
|
|
+ label-width="100px"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-form-item label="手机号码">
|
|
|
+ <span>{{ maskedPhone }}</span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="" prop="verificationCode">
|
|
|
+ <div style="display: flex; gap: 12px; width: 100%">
|
|
|
+ <el-input v-model="forgotPasswordForm.verificationCode" placeholder="请输入" clearable style="flex: 1" />
|
|
|
+ <el-button type="primary" :disabled="codeCountdown > 0" @click="sendLoginCode">
|
|
|
+ {{ codeCountdown > 0 ? `${codeCountdown}秒后重新获取` : "获取验证码" }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="输入新密码" prop="newPassword">
|
|
|
+ <el-input
|
|
|
+ v-model="forgotPasswordForm.newPassword"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入6-16位的密码,包含字母和数字"
|
|
|
+ show-password
|
|
|
+ clearable
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 实名认证对话框 -->
|
|
|
+ <el-dialog v-model="dialogVisible" title="实名认证" width="500px" :close-on-click-modal="false">
|
|
|
+ <el-form ref="authFormRef" :model="authForm" :rules="authRules" label-width="100px" label-position="left">
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="authForm.name" placeholder="请输入姓名" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="身份证号码" prop="idCard">
|
|
|
+ <el-input v-model="authForm.idCard" placeholder="请输入身份证号码" clearable maxlength="18" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="handleCancel">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="loading" @click="handleConfirm">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
|
|
+import { localGet } from "@/utils/index";
|
|
|
+import homeIcon from "../../assets/images/home-icon.png";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const activeTab = ref("realName");
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const loading = ref(false);
|
|
|
+const authFormRef = ref<FormInstance>();
|
|
|
+const passwordFormRef = ref<FormInstance>();
|
|
|
+const passwordLoading = ref(false);
|
|
|
+const currentStep = ref(0);
|
|
|
+const forgotPasswordVisible = ref(false);
|
|
|
+const forgotPasswordFormRef = ref<FormInstance>();
|
|
|
+const forgotPasswordForm = reactive({
|
|
|
+ verificationCode: "",
|
|
|
+ newPassword: ""
|
|
|
+});
|
|
|
+// 忘记密码表单验证规则
|
|
|
+const forgotPasswordRules: FormRules = {
|
|
|
+ verificationCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
|
|
|
+};
|
|
|
+const passList = [
|
|
|
+ {
|
|
|
+ title: "验证原密码"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设置新密码"
|
|
|
+ }
|
|
|
+];
|
|
|
+// 获取用户手机号
|
|
|
+const userPhone = computed(() => {
|
|
|
+ return localGet("iphone") || localGet("geeker-user")?.userInfo?.phone || "";
|
|
|
+});
|
|
|
+// 掩码显示手机号
|
|
|
+const maskedPhone = computed(() => {
|
|
|
+ if (!userPhone.value || userPhone.value.length !== 11) {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ return userPhone.value.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
|
|
+});
|
|
|
+// 实名认证表单数据
|
|
|
+const authForm = reactive({
|
|
|
+ name: "",
|
|
|
+ idCard: ""
|
|
|
+});
|
|
|
+
|
|
|
+// 提现密码表单数据
|
|
|
+const passwordForm = reactive({
|
|
|
+ password: "",
|
|
|
+ confirmPassword: ""
|
|
|
+});
|
|
|
+
|
|
|
+// 实名认证表单验证规则
|
|
|
+const authRules = reactive<FormRules>({
|
|
|
+ name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
|
+ idCard: [
|
|
|
+ { required: true, message: "请输入身份证号码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
|
|
|
+ message: "请输入正确的身份证号码",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+// 提现密码表单验证规则
|
|
|
+const passwordRules = reactive<FormRules>({
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入6位提现密码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern: /^\d{6}$/,
|
|
|
+ message: "请输入6位数字密码",
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ confirmPassword: [
|
|
|
+ { required: true, message: "请确认密码", trigger: "blur" },
|
|
|
+ {
|
|
|
+ validator: (rule: any, value: any, callback: any) => {
|
|
|
+ if (value !== passwordForm.password) {
|
|
|
+ callback(new Error("两次输入的密码不一致"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+
|
|
|
+const handleTabClick = (tab: any) => {
|
|
|
+ // 根据不同的标签页可以跳转到不同的页面或显示不同的内容
|
|
|
+ console.log("切换到标签:", tab.props.name);
|
|
|
+ // 这里可以根据需要实现路由跳转或内容切换
|
|
|
+};
|
|
|
+
|
|
|
+const handleGoAuth = () => {
|
|
|
+ // 打开实名认证对话框
|
|
|
+ dialogVisible.value = true;
|
|
|
+ // 重置表单
|
|
|
+ if (authFormRef.value) {
|
|
|
+ authFormRef.value.resetFields();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ // 重置表单
|
|
|
+ if (authFormRef.value) {
|
|
|
+ authFormRef.value.resetFields();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleConfirm = async () => {
|
|
|
+ if (!authFormRef.value) return;
|
|
|
+
|
|
|
+ // 表单验证
|
|
|
+ await authFormRef.value.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ loading.value = true;
|
|
|
+ // 这里可以调用API提交实名认证信息
|
|
|
+ // 模拟API调用
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ ElMessage.success("实名认证提交成功");
|
|
|
+ dialogVisible.value = false;
|
|
|
+ // 重置表单
|
|
|
+ authFormRef.value?.resetFields();
|
|
|
+ // 这里可以更新认证状态或刷新页面数据
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handlePasswordSubmit = async () => {
|
|
|
+ if (!passwordFormRef.value) return;
|
|
|
+
|
|
|
+ // 表单验证
|
|
|
+ await passwordFormRef.value.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ passwordLoading.value = true;
|
|
|
+ // 这里可以调用API设置提现密码
|
|
|
+ // 模拟API调用
|
|
|
+ setTimeout(() => {
|
|
|
+ passwordLoading.value = false;
|
|
|
+ ElMessage.success("提现密码设置成功");
|
|
|
+ // 重置表单
|
|
|
+ passwordFormRef.value?.resetFields();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.real-name-page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: calc(100vh - 100px);
|
|
|
+ background-color: #f5f7fa;
|
|
|
+}
|
|
|
+
|
|
|
+// 头部区域
|
|
|
+.header-section {
|
|
|
+ padding: 16px 24px;
|
|
|
+ background: linear-gradient(90deg, #6c8ff8 0%, rgb(255 255 255 / 0%) 100%);
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ border-radius: 10px;
|
|
|
+ .header-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .shop-info {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ .homeIcon {
|
|
|
+ width: 76px;
|
|
|
+ height: 76px;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ .shop-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
|
|
|
+ }
|
|
|
+ .shop-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .auth-status {
|
|
|
+ .status-badge {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 3px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #f81515;
|
|
|
+ border-radius: 39px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 标签导航栏
|
|
|
+.tabs-section {
|
|
|
+ padding: 0 24px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1px solid #e4e7ed;
|
|
|
+ :deep(.el-tabs) {
|
|
|
+ max-width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ .el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ height: 1px;
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ }
|
|
|
+ .el-tabs__item {
|
|
|
+ height: 48px;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #606266;
|
|
|
+ &.is-active {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #409eff;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ width: 40px;
|
|
|
+ height: 3px;
|
|
|
+ content: "";
|
|
|
+ background-color: #409eff;
|
|
|
+ border-radius: 2px 2px 0 0;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 主内容区
|
|
|
+.content-section {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 400px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ .content-wrapper {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 40px 24px;
|
|
|
+ .auth-button {
|
|
|
+ padding: 22px 35px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #6c8ff8;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .password-form-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 500px;
|
|
|
+ padding: 40px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border: 1px solid red;
|
|
|
+ border-radius: 8px;
|
|
|
+ .password-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .submit-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 12px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #6c8ff8;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ :deep(.el-form-item__label) {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .password-form-wrapper-step {
|
|
|
+ width: 600px;
|
|
|
+ .form-wrapper {
|
|
|
+ width: 600px;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ .forget-password {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6c8ff8;
|
|
|
+ text-align: right;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ :deep(.el-step__head.is-process .el-step__icon) {
|
|
|
+ color: #909399;
|
|
|
+ border-color: #909399 !important; /* 设置圆圈边框为灰色 */
|
|
|
+ }
|
|
|
+ :deep(.el-steps) {
|
|
|
+ .el-step__head {
|
|
|
+ .el-step__icon {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
congxuesong
