WFC/fe.wfc.user
2
0
Fork 0
Code Activity

feat:kyc认证界面中英适配

Browse Source
This commit is contained in:
zhongzm
2025-01-24 19:19:15 +08:00
parent 67e4f85a4e
commit 900382b0c7
3 changed files with 142 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/views/userInfo/kyc/index.vue
View File

@@ -1,14 +1,14 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// import { useI18n } from 'vue-i18n';
import { message, Upload } from 'ant-design-vue';
import type { UploadProps } from 'ant-design-vue';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import type { Dayjs } from 'dayjs';
import { fetchKYCStatus, submitKYCVerification, uploadFile } from '@/service/api/auth';
import dayjs from 'dayjs'; // 导入 dayjs
import { useI18n } from 'vue-i18n';
// const { t } = useI18n();
const { t } = useI18n();
// KYC 状态
const kycStatus = ref<Api.KYC.KYCStatus>('UNVERIFIED');
@@ -22,12 +22,12 @@ const kycInfo = ref<Partial<Api.KYC.KYCInfo>>({
// 证件类型选项
const idTypeOptions = [
{ value: 1, label: '驾驶证' },
{ value: 2, label: '护照' },
{ value: 3, label: '身份证/居住证' },
{ value: 4, label: '学生证' },
{ value: 5, label: '医保卡' },
{ value: 6, label: '出生证明' }
{ value: 1, label: t('page.kyc.drive') },
{ value: 2, label: t('page.kyc.pass') },
{ value: 3, label: t('page.kyc.idcard') },
{ value: 4, label: t('page.kyc.stu') },
{ value: 5, label: t('page.kyc.health') },
{ value: 6, label: t('page.kyc.birth') }
];
// 表单数据
@@ -124,7 +124,7 @@ const getKYCStatus = async () => {
}
} catch (error) {
console.error('Failed to fetch KYC status:', error);
message.error('获取认证状态失败');
message.error(t('page.kyc.kycerror'));
// 发生错误时也设置默认值
kycStatus.value = 'UNVERIFIED';
kycInfo.value = {
@@ -141,12 +141,12 @@ const getKYCStatus = async () => {
const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
if (!isValidFormat) {
message.error('只支持 JPG/PNG/PDF 格式文件！');
message.error(t('page.kyc.support'));
return Upload.LIST_IGNORE;
}
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
message.error('文件大小不能超过 5MB！');
message.error(t('page.kyc.file'));
return Upload.LIST_IGNORE;
}
@@ -159,11 +159,11 @@ const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
if (data) {
formData.value.idCardFile = data.url; // 存储文件 URL
idCardFileObj.value = file; // 存储文件对象
message.success('证件照片上传成功！');
message.success(t('page.kyc.picturesuc'));
}
} catch (error) {
console.error('Failed to upload ID card:', error);
message.error('证件照片上传失败，请重试！');
message.error(t('page.kyc.picturefal'));
} finally {
idCardLoading.value = false;
}
@@ -171,14 +171,14 @@ const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
};
const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png';
const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
if (!isValidFormat) {
message.error('只支持 JPG/PNG 格式图片！');
message.error(t('page.kyc.support'));
return Upload.LIST_IGNORE;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图片大小不能超过 2MB！');
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
message.error(t('page.kyc.file'));
return Upload.LIST_IGNORE;
}
@@ -191,11 +191,11 @@ const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
if (data) {
formData.value.photoFile = data.url; // 存储文件 URL
photoFileObj.value = file; // 存储文件对象
message.success('面部照片上传成功！');
message.success(t('page.kyc.picturesuc'));
}
} catch (error) {
console.error('Failed to upload photo:', error);
message.error('面部照片上传失败，请重试！');
message.error(t('page.kyc.picturefal'));
} finally {
photoLoading.value = false;
}
@@ -206,11 +206,11 @@ const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
const submitKYC = async () => {
try {
if (!formData.value.fullName || !formData.value.birthDate || !formData.value.idType) {
message.error('请填写完整信息！');
message.error(t('page.kyc.completeinfo'));
return;
}
if (!formData.value.idCardFile || !formData.value.photoFile) {
message.error('请上传所需文件！');
message.error(t('page.kyc.upload'));
return;
}
@@ -225,11 +225,11 @@ const submitKYC = async () => {
kycRequestStatus: 1
});
message.success('KYC 认证申请提交成功！');
message.success(t('page.kyc.kycsubmit'));
await getKYCStatus();
} catch (error) {
console.error('Failed to submit KYC:', error);
message.error('提交失败，请重试！');
message.error(t('page.kyc.submitfalse'));
}
};
@@ -261,15 +261,15 @@ const getStatusText = (status: Api.KYC.KYCStatus) => {
const normalizedStatus = status.toUpperCase();
switch (normalizedStatus) {
case 'UNVERIFIED':
return '未认证';
return t('page.kyc.nocertified');
case 'PENDING':
return '认证中';
return t('page.kyc.certifing');
case 'VERIFIED':
return '已认证';
return t('page.kyc.certified');
case 'REJECTED':
return '已拒绝';
return t('page.kyc.rejected');
default:
return '未知状态';
return t('page.kyc.unstatus');
}
};
@@ -282,14 +282,14 @@ onMounted(() => {
<div class="kyc-container responsive-container">
<!-- 标题部分 -->
<div class="page-header">
<h1 class="page-title">KYC 实名认证</h1>
<p class="page-desc">根据相关法规要求，使用服务前需要完成实名认证</p>
<h1 class="page-title">{{ t('page.kyc.kyctitle') }}</h1>
<p class="page-desc">{{ t('page.kyc.service') }}</p>
</div>
<!-- 状态卡片 -->
<div class="status-card">
<div class="status-header">
<span class="status-title">认证状态</span>
<span class="status-title">{{ t('page.kyc.cerstatus') }}</span>
<a-tag
class="status-tag"
:color="getStatusColor(kycStatus)"
@@ -300,11 +300,11 @@ onMounted(() => {
<div v-if="kycStatus === 'VERIFIED'" class="verified-info">
<div class="info-item">
<span class="label">认证姓名：</span>
<span class="label">{{ t('page.kyc.cername') }}</span>
<span class="value">{{ kycInfo.fullName }}</span>
</div>
<div class="info-item">
<span class="label">认证时间：</span>
<span class="label">{{ t('page.kyc.certime') }}</span>
<span class="value">{{ kycInfo.verifiedTime }}</span>
</div>
</div>
@@ -322,29 +322,29 @@ onMounted(() => {
<!-- 认证表单 -->
<div v-if="kycStatus === 'UNVERIFIED' || kycStatus === 'REJECTED'" class="form-card">
<div class="form-header">
<h2 class="form-title">认证信息</h2>
<p class="form-desc">请填写真实的个人信息，所有信息仅用于身份认证</p>
<h2 class="form-title">{{ t('page.kyc.cerinfo') }}</h2>
<p class="form-desc">{{ t('page.kyc.cerinfoservice') }}</p>
</div>
<a-form layout="vertical" class="kyc-form">
<!-- 基本信息部分 -->
<div class="form-section">
<h3 class="section-title">基本信息</h3>
<h3 class="section-title">{{ t('page.kyc.baseinfo') }}</h3>
<div class="form-grid">
<a-form-item label="真实姓名" required>
<a-form-item :label="t('page.kyc.realname')" required>
<a-input
v-model:value="formData.fullName"
placeholder="请输入真实姓名"
:placeholder="t('page.kyc.realnameple')"
:maxLength="20"
/>
</a-form-item>
<a-form-item label="出生日期" required>
<a-form-item :label="t('page.kyc.birthdate')" required>
<a-date-picker
v-model:value="formData.birthDate"
class="date-picker"
:disabledDate="disabledDate"
placeholder="请选择出生日期"
:placeholder="t('page.kyc.birthdateple')"
/>
</a-form-item>
</div>
@@ -352,12 +352,12 @@ onMounted(() => {
<!-- 证件信息部分 -->
<div class="form-section">
<h3 class="section-title">证件信息</h3>
<h3 class="section-title">{{ t('page.kyc.idinfo') }}</h3>
<div class="form-grid">
<a-form-item label="证件类型" required>
<a-form-item :label="t('page.kyc.idtype')" required>
<a-select
v-model:value="formData.idType"
placeholder="请选择证件类型"
:placeholder="t('page.kyc.idtypeple')"
class="id-type-select"
:get-popup-container="(triggerNode) => triggerNode.parentNode"
>
@@ -374,7 +374,7 @@ onMounted(() => {
<div class="upload-section">
<div class="upload-item">
<a-form-item label="证件照片" required>
<a-form-item :label="t('page.kyc.idphoto')" required>
<a-upload
v-model:file-list="idCardFileList"
list-type="picture-card"
@@ -386,15 +386,15 @@ onMounted(() => {
<div v-if="idCardFileList.length < 1">
<loading-outlined v-if="idCardLoading" />
<plus-outlined v-else />
<div class="upload-text">上传证件照片</div>
<div class="upload-text">{{ t('page.kyc.uploadidphoto') }}</div>
</div>
</a-upload>
<div class="upload-tip">支持 JPG/PNG/PDF 格式，大小不超过 5MB</div>
<div class="upload-tip">{{ t('page.kyc.format') }}</div>
</a-form-item>
</div>
<div class="upload-item">
<a-form-item label="面部照片" required>
<a-form-item :label="t('page.kyc.photopic')" required>
<a-upload
v-model:file-list="photoFileList"
list-type="picture-card"
@@ -406,10 +406,10 @@ onMounted(() => {
<div v-if="photoFileList.length < 1">
<loading-outlined v-if="photoLoading" />
<plus-outlined v-else />
<div class="upload-text">上传面部照片</div>
<div class="upload-text">{{ t('page.kyc.uploadphotopic') }}</div>
</div>
</a-upload>
<div class="upload-tip">支持 JPG/PNG 格式，大小不超过 2MB</div>
<div class="upload-tip">{{ t('page.kyc.format') }}</div>
</a-form-item>
</div>
</div>
@@ -423,7 +423,7 @@ onMounted(() => {
@click="submitKYC"
class="submit-btn"
>
提交认证
{{ t('page.kyc.submitcer') }}
</a-button>
</div>
</a-form>
@@ -436,7 +436,7 @@ onMounted(() => {
:footer="null"
@cancel="previewVisible = false"
>
<img alt="预览图片" style="width: 100%" :src="previewImage" />
<img :alt="t('page.kyc.previewimage')" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>