增加身份认证
This commit is contained in:
parent
8c26691f58
commit
a6b5160c6a
@ -20,3 +20,29 @@ export function login(postData) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户认证信息
|
||||
* @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
|
||||
});
|
||||
}
|
||||
@ -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';
|
||||
|
||||
@ -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
226
src/views/UserAuth.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user