增加身份认证
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>
|
<span>银行卡管理</span>
|
||||||
</a-menu-item>
|
</a-menu-item>
|
||||||
</a-sub-menu>
|
</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-menu>
|
||||||
</a-layout-sider>
|
</a-layout-sider>
|
||||||
|
|
||||||
@ -95,7 +100,8 @@ import {
|
|||||||
HomeOutlined,
|
HomeOutlined,
|
||||||
DollarOutlined,
|
DollarOutlined,
|
||||||
CreditCardOutlined,
|
CreditCardOutlined,
|
||||||
WalletOutlined
|
WalletOutlined,
|
||||||
|
UserOutlined
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -105,7 +111,8 @@ export default {
|
|||||||
HomeOutlined,
|
HomeOutlined,
|
||||||
DollarOutlined,
|
DollarOutlined,
|
||||||
CreditCardOutlined,
|
CreditCardOutlined,
|
||||||
WalletOutlined
|
WalletOutlined,
|
||||||
|
UserOutlined
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
@ -133,6 +140,9 @@ export default {
|
|||||||
// 如果是财务管理的子路由
|
// 如果是财务管理的子路由
|
||||||
selectedKeys.value = [`finance-${pathParts[2]}`];
|
selectedKeys.value = [`finance-${pathParts[2]}`];
|
||||||
openKeys.value = ['finance'];
|
openKeys.value = ['finance'];
|
||||||
|
} else if (pathParts.length >= 3 && pathParts[1] === 'user') {
|
||||||
|
// 如果是用户相关的子路由
|
||||||
|
selectedKeys.value = [`user-${pathParts[2]}`];
|
||||||
} else {
|
} else {
|
||||||
// 如果是顶级路由
|
// 如果是顶级路由
|
||||||
const key = pathParts[1] || 'dashboard';
|
const key = pathParts[1] || 'dashboard';
|
||||||
|
|||||||
@ -46,6 +46,12 @@ const routes = [
|
|||||||
component: () => import('../views/BankCard.vue'),
|
component: () => import('../views/BankCard.vue'),
|
||||||
meta: { title: '银行卡管理', icon: 'credit-card' },
|
meta: { title: '银行卡管理', icon: 'credit-card' },
|
||||||
hidden: true
|
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