增加身份认证

This commit is contained in:
aaron 2025-03-10 11:04:09 +08:00
parent 8c26691f58
commit a6b5160c6a
4 changed files with 270 additions and 2 deletions

View File

@ -19,4 +19,30 @@ export function login(postData) {
role: 'partner'
}
});
}
/**
* 获取用户认证信息
* @returns {Promise} - 返回用户认证信息
*/
export function getUserAuth() {
return request({
url: '/api/user/auth',
method: 'get'
});
}
/**
* 提交用户认证
* @param {Object} data - 认证信息
* @param {string} data.name - 真实姓名
* @param {string} data.id_number - 身份证号
* @returns {Promise} - 返回认证结果
*/
export function submitUserAuth(data) {
return request({
url: '/api/user/auth',
method: 'post',
data
});
}

View File

@ -32,6 +32,11 @@
<span>银行卡管理</span>
</a-menu-item>
</a-sub-menu>
<a-menu-item key="user-auth" @click="() => $router.push('/user/auth')">
<template #icon><user-outlined /></template>
<span>实名认证</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
@ -95,7 +100,8 @@ import {
HomeOutlined,
DollarOutlined,
CreditCardOutlined,
WalletOutlined
WalletOutlined,
UserOutlined
} from '@ant-design/icons-vue';
export default {
@ -105,7 +111,8 @@ export default {
HomeOutlined,
DollarOutlined,
CreditCardOutlined,
WalletOutlined
WalletOutlined,
UserOutlined
},
setup() {
const store = useStore();
@ -133,6 +140,9 @@ export default {
//
selectedKeys.value = [`finance-${pathParts[2]}`];
openKeys.value = ['finance'];
} else if (pathParts.length >= 3 && pathParts[1] === 'user') {
//
selectedKeys.value = [`user-${pathParts[2]}`];
} else {
//
const key = pathParts[1] || 'dashboard';

View File

@ -46,6 +46,12 @@ const routes = [
component: () => import('../views/BankCard.vue'),
meta: { title: '银行卡管理', icon: 'credit-card' },
hidden: true
},
{
path: 'user/auth',
name: 'UserAuth',
component: () => import('../views/UserAuth.vue'),
meta: { title: '实名认证', icon: 'user' }
}
]
},

226
src/views/UserAuth.vue Normal file
View File

@ -0,0 +1,226 @@
<template>
<div class="user-auth-container">
<a-card title="实名认证" :bordered="false">
<a-spin :spinning="loading">
<!-- 已认证状态 -->
<div v-if="isAuthenticated" class="auth-success">
<a-result
status="success"
title="您已完成实名认证"
sub-title="您的身份信息已经过验证,可以正常使用平台功能"
>
<template #extra>
<div class="auth-info">
<p><strong>认证姓名</strong>{{ authInfo.name }}</p>
<p><strong>身份证号</strong>{{ authInfo.id_number }}</p>
<p><strong>认证时间</strong>{{ authInfo.create_time }}</p>
</div>
</template>
</a-result>
</div>
<!-- 未认证状态 -->
<div v-else class="auth-form">
<div class="auth-tips">
<a-alert
message="请完成实名认证"
description="根据相关法律法规要求,您需要完成实名认证才能使用平台的全部功能。请填写真实的身份信息进行认证。"
type="info"
show-icon
style="margin-bottom: 24px"
/>
</div>
<a-form
:model="authForm"
:rules="authRules"
ref="authFormRef"
layout="vertical"
>
<a-form-item name="name" label="真实姓名">
<a-input
v-model:value="authForm.name"
placeholder="请输入您的真实姓名"
:maxLength="20"
/>
</a-form-item>
<a-form-item name="id_number" label="身份证号">
<a-input
v-model:value="authForm.id_number"
placeholder="请输入您的身份证号码"
:maxLength="18"
/>
</a-form-item>
<a-form-item>
<a-button type="primary" :loading="submitting" @click="handleSubmit">
提交认证
</a-button>
</a-form-item>
</a-form>
<div class="auth-notice">
<p>注意事项</p>
<ol>
<li>请确保填写的是您本人的真实身份信息</li>
<li>身份信息一经认证无法修改请仔细核对</li>
<li>我们将严格保护您的个人信息安全</li>
</ol>
</div>
</div>
</a-spin>
</a-card>
</div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getUserAuth, submitUserAuth } from '../api/user';
export default {
name: 'UserAuth',
setup() {
//
const loading = ref(false);
//
const submitting = ref(false);
//
const isAuthenticated = ref(false);
//
const authInfo = ref({});
//
const authForm = reactive({
name: '',
id_number: ''
});
//
const authFormRef = ref(null);
//
const authRules = {
name: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
{ min: 2, message: '姓名长度不能少于2个字符', trigger: 'blur' }
],
id_number: [
{ required: true, message: '请输入身份证号', trigger: 'blur' },
{
pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '请输入正确的身份证号码',
trigger: 'blur'
}
]
};
//
const fetchAuthStatus = async () => {
loading.value = true;
try {
const data = await getUserAuth();
if (data) {
isAuthenticated.value = true;
authInfo.value = data;
} else {
isAuthenticated.value = false;
}
} catch (error) {
console.error('获取认证状态失败:', error);
isAuthenticated.value = false;
} finally {
loading.value = false;
}
};
//
const handleSubmit = async () => {
try {
await authFormRef.value.validate();
submitting.value = true;
await submitUserAuth(authForm);
message.success('认证提交成功');
//
await fetchAuthStatus();
} catch (error) {
if (error.errorFields) {
//
return;
}
console.error('认证提交失败:', error);
message.error('认证提交失败,请稍后重试');
} finally {
submitting.value = false;
}
};
onMounted(() => {
fetchAuthStatus();
});
return {
loading,
submitting,
isAuthenticated,
authInfo,
authForm,
authRules,
authFormRef,
handleSubmit
};
}
};
</script>
<style scoped>
.user-auth-container {
padding: 0;
}
.auth-success {
padding: 24px 0;
}
.auth-info {
text-align: center;
background-color: #f9f9f9;
padding: 16px;
border-radius: 4px;
max-width: 400px;
margin: 0 auto;
}
.auth-info p {
margin-bottom: 8px;
}
.auth-form {
max-width: 500px;
margin: 0 auto;
padding: 24px 0;
}
.auth-notice {
margin-top: 24px;
background-color: #f9f9f9;
padding: 16px;
border-radius: 4px;
color: rgba(0, 0, 0, 0.65);
}
.auth-notice p {
font-weight: 500;
margin-bottom: 8px;
}
.auth-notice ol {
padding-left: 20px;
margin: 0;
}
.auth-notice li {
margin-bottom: 4px;
}
</style>