|
|
@@ -24,16 +24,41 @@
|
|
|
|
|
|
<!-- 实名认证 -->
|
|
|
<div class="content-section" v-if="activeTab === 'realName'">
|
|
|
- <div class="content-wrapper">
|
|
|
- <el-button type="primary" class="auth-button" @click="handleGoAuth"> 去实名认证 </el-button>
|
|
|
+ <div class="content-wrapper-realName">
|
|
|
+ <div class="goAuthBtn" v-if="goAuth">
|
|
|
+ <el-button type="primary" class="auth-button" @click="handleGoAuth">
|
|
|
+ <el-icon><CirclePlus /></el-icon> 去实名认证
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="auth-div" v-if="!goAuth">
|
|
|
+ <el-row class="auth-row">
|
|
|
+ <el-col :span="2"> 姓名 </el-col>
|
|
|
+ <el-col :span="12"> 王* </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="auth-row">
|
|
|
+ <el-col :span="2"> 身份证号 </el-col>
|
|
|
+ <el-col :span="12"> 2315************9966 </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="auth-row">
|
|
|
+ <el-col :span="2"> 认证时间 </el-col>
|
|
|
+ <el-col :span="12"> 2025/11/19 </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
</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">
|
|
|
+ <div class="password-form-wrapper" v-if="withdrawPass">
|
|
|
+ <el-form
|
|
|
+ ref="passwordFormRef"
|
|
|
+ :model="passwordForm"
|
|
|
+ :rules="passwordRules"
|
|
|
+ label-width="120px"
|
|
|
+ label-position="left"
|
|
|
+ class="form-wrapper"
|
|
|
+ >
|
|
|
<el-form-item label="设置提现密码" prop="password">
|
|
|
<el-input
|
|
|
v-model="passwordForm.password"
|
|
|
@@ -62,8 +87,9 @@
|
|
|
</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- </div> -->
|
|
|
- <div class="password-form-wrapper-step">
|
|
|
+ </div>
|
|
|
+ <!---第二次进入此页面--->
|
|
|
+ <div class="password-form-wrapper-step" v-if="twoEnterPage">
|
|
|
<el-steps :active="currentStep" style="max-width: 600px">
|
|
|
<el-step v-for="(item, index) in passList" :key="index">
|
|
|
<template #title>
|
|
|
@@ -80,6 +106,7 @@
|
|
|
label-width="100px"
|
|
|
label-position="left"
|
|
|
class="form-wrapper"
|
|
|
+ v-if="currentStep == 1"
|
|
|
>
|
|
|
<el-form-item label="验证原密码" prop="password">
|
|
|
<el-input
|
|
|
@@ -92,8 +119,65 @@
|
|
|
class="password-input"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <div class="forget-password">忘记密码</div>
|
|
|
+ <el-button type="primary" class="submit-button" @click="nextStept"> 下一步 </el-button>
|
|
|
+ </el-form>
|
|
|
+ <el-form
|
|
|
+ ref="passwordFormRef"
|
|
|
+ :model="passwordForm"
|
|
|
+ :rules="passwordRules"
|
|
|
+ label-width="120px"
|
|
|
+ label-position="left"
|
|
|
+ class="form-wrapper"
|
|
|
+ v-if="currentStep == 2"
|
|
|
+ >
|
|
|
+ <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 class="forget-password">忘记密码</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--收款账户-->
|
|
|
+ <div class="content-section" v-if="activeTab === 'receivingAccount'">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <!-- <el-button type="primary" class="auth-button" @click="handleGoZFB"> 添加支付宝账号 </el-button> -->
|
|
|
+ <div class="zfb-wrapper">
|
|
|
+ <div class="zfb-left">
|
|
|
+ <el-image :src="zfbIcon" class="zfbIcon" />
|
|
|
+ <div>
|
|
|
+ <div>支付宝</div>
|
|
|
+ <div>130******111</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operate">
|
|
|
+ <div @click="getEditZfb">编辑</div>
|
|
|
+ <div @click="getDelZfb">删除</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -149,68 +233,48 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!--添加支付宝账号--->
|
|
|
+ <el-dialog v-model="dialogVisibleZFB" 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.zfbName" placeholder="请输入支付宝账号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="handleCancel">取消</el-button>
|
|
|
+ <el-button type="primary" :loading="loading" @click="handleConfirmZFB">确认</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive } from "vue";
|
|
|
+import { ref, reactive, computed } 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";
|
|
|
+import zfbIcon from "../../assets/financial/zfb-icon.png";
|
|
|
|
|
|
const router = useRouter();
|
|
|
const activeTab = ref("realName");
|
|
|
const dialogVisible = ref(false);
|
|
|
const loading = ref(false);
|
|
|
+//实名认证
|
|
|
+const goAuth = ref(true);
|
|
|
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: ""
|
|
|
+ idCard: "",
|
|
|
+ zfbName: ""
|
|
|
});
|
|
|
-
|
|
|
-// 提现密码表单数据
|
|
|
-const passwordForm = reactive({
|
|
|
- password: "",
|
|
|
- confirmPassword: ""
|
|
|
-});
|
|
|
-
|
|
|
// 实名认证表单验证规则
|
|
|
const authRules = reactive<FormRules>({
|
|
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
|
+ zfbName: [{ required: true, message: "请输入支付宝账号", trigger: "blur" }],
|
|
|
idCard: [
|
|
|
{ required: true, message: "请输入身份证号码", trigger: "blur" },
|
|
|
{
|
|
|
@@ -220,7 +284,36 @@ const authRules = reactive<FormRules>({
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
+//实名认证 确认
|
|
|
+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;
|
|
|
+ goAuth.value = false;
|
|
|
+ // 重置表单
|
|
|
+ authFormRef.value?.resetFields();
|
|
|
+ // 这里可以更新认证状态或刷新页面数据
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
+//提现密码
|
|
|
+const withdrawPass = ref(true);
|
|
|
+const passwordFormRef = ref<FormInstance>();
|
|
|
+const passwordForm = reactive({
|
|
|
+ password: "",
|
|
|
+ confirmPassword: ""
|
|
|
+});
|
|
|
// 提现密码表单验证规则
|
|
|
const passwordRules = reactive<FormRules>({
|
|
|
password: [
|
|
|
@@ -245,6 +338,75 @@ const passwordRules = reactive<FormRules>({
|
|
|
}
|
|
|
]
|
|
|
});
|
|
|
+//提现密码 确认
|
|
|
+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);
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+//二次进入显示
|
|
|
+const twoEnterPage = ref(false);
|
|
|
+//提现密码 验证原密码
|
|
|
+const currentStep = ref(1);
|
|
|
+const passList = [
|
|
|
+ {
|
|
|
+ title: "验证原密码"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "设置新密码"
|
|
|
+ }
|
|
|
+];
|
|
|
+//下一步
|
|
|
+const nextStept = async () => {
|
|
|
+ currentStep.value = 2;
|
|
|
+};
|
|
|
+
|
|
|
+//收款账户
|
|
|
+const dialogVisibleZFB = ref(false);
|
|
|
+const handleGoZFB = async () => {
|
|
|
+ dialogVisibleZFB.value = true;
|
|
|
+};
|
|
|
+const handleConfirmZFB = async () => {
|
|
|
+ dialogVisibleZFB.value = false;
|
|
|
+};
|
|
|
+const getEditZfb = async () => {};
|
|
|
+const getDelZfb = async () => {};
|
|
|
+
|
|
|
+const passwordLoading = ref(false);
|
|
|
+const forgotPasswordVisible = ref(false);
|
|
|
+const forgotPasswordFormRef = ref<FormInstance>();
|
|
|
+const forgotPasswordForm = reactive({
|
|
|
+ verificationCode: "",
|
|
|
+ newPassword: ""
|
|
|
+});
|
|
|
+// 忘记密码表单验证规则
|
|
|
+const forgotPasswordRules: FormRules = {
|
|
|
+ verificationCode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
|
|
|
+};
|
|
|
+// 获取用户手机号
|
|
|
+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 handleTabClick = (tab: any) => {
|
|
|
// 根据不同的标签页可以跳转到不同的页面或显示不同的内容
|
|
|
@@ -268,46 +430,6 @@ const handleCancel = () => {
|
|
|
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">
|
|
|
@@ -414,62 +536,103 @@ const handlePasswordSubmit = async () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.auth-button {
|
|
|
+ padding: 22px 35px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #6c8ff8;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
|
|
|
// 主内容区
|
|
|
.content-section {
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
-
|
|
|
- // align-items: center;
|
|
|
justify-content: center;
|
|
|
min-height: 400px;
|
|
|
background-color: #ffffff;
|
|
|
+ .content-wrapper-realName {
|
|
|
+ width: 100%;
|
|
|
+ border: 1px solid red;
|
|
|
+ .goAuthBtn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 180px 0 0;
|
|
|
+ }
|
|
|
+ .auth-div {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 41px;
|
|
|
+ border: 1px solid red;
|
|
|
+ .auth-row {
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.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;
|
|
|
+ .zfb-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 800px;
|
|
|
+ height: 80px;
|
|
|
+ padding: 0 20px;
|
|
|
+ border: 1px solid #aaaaaa;
|
|
|
+ border-radius: 8px;
|
|
|
+ .operate {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #6c8ff8;
|
|
|
+ div {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zfb-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .zfbIcon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.password-form-wrapper {
|
|
|
width: 100%;
|
|
|
- max-width: 500px;
|
|
|
- padding: 40px;
|
|
|
+ padding-left: 15px;
|
|
|
background-color: #ffffff;
|
|
|
- border: 1px solid red;
|
|
|
border-radius: 8px;
|
|
|
+ .form-wrapper {
|
|
|
+ width: 400px;
|
|
|
+ margin: 30px auto;
|
|
|
+ }
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
+ .submit-button {
|
|
|
+ width: 100%;
|
|
|
+ padding: 22px 35px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ background-color: #6c8ff8;
|
|
|
+ border: none;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
.password-form-wrapper-step {
|
|
|
- width: 600px;
|
|
|
+ width: 480px;
|
|
|
.form-wrapper {
|
|
|
- width: 600px;
|
|
|
+ width: 400px;
|
|
|
margin-top: 40px;
|
|
|
}
|
|
|
.forget-password {
|