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

48
src/locales/langs/en-us.ts
View File

@@ -545,7 +545,7 @@ const local: any = {
Rechargeamount:'Recharge amount',
Customization:'Customize',
price:'price',
money:' yuan',
money:' ¥',
truemoney:'Please select or enter the correct recharge amount',
falseorder:'Failed to create an order, please try again!',
setprice:'Please enter the amount',
@@ -707,7 +707,51 @@ const local: any = {
selectPayment:'Payment',
alipay:'Alipay',
wxpay:'WeChat Pay'
}
},
kyc:{
drive:'Driving license',
pass:'Passport',
idcard:'ID card/Residence permit',
stu:'Student ID',
health:'Medical insurance card',
birth:'Birth certificate',
kycerror:'Failed to obtain certification status.',
support:'Only JPG/PNG/PDF format files are supported!',
file:'The file size must not exceed 5MB!',
picturesuc:'Upload successful!',
picturefal:'Upload failed, please try again!',
completeinfo:'Please fill in the complete information!',
upload:'Please upload the required documents!',
kycsubmit:'KYC certification application submitted successfully!',
submitfalse:'Submission failed, please try again!',
nocertified:'Unverified',
certifing:'Pending',
certified:'Verified',
rejected:'Rejected',
unstatus:'Unknown status',
kyctitle:'KYC real-name verification',
service:'According to the requirements of relevant laws and regulations, real-name authentication is required before using the service',
cerstatus:'Certification status',
cername:'Certified Name:',
certime:'Certification time:',
cerinfo:'Certification Information',
cerinfoservice:'Please fill in the real personal information, all information is only used for identity verification',
baseinfo:'Basic Information',
realname:'Real name',
realnameple:'Please enter your real name',
birthdate:'Date of Birth',
birthdateple:'Please select your date of birth.',
idinfo:'Document information',
idtype:'Document type',
idtypeple:'Please select the type of document.',
idphoto:'Identification photo',
uploadidphoto:'Upload the document photo.',
format:'It supports JPG/PNG/PDF format and is up to 5MB in size',
photopic:'Facial photograph',
uploadphotopic:'Upload facial photo.',
submitcer:'Submit for certification.',
previewimage:'Preview image',
},
},
form: {
required: 'Cannot be empty',

47
src/locales/langs/zh-cn.ts
View File

@@ -710,9 +710,50 @@ const local:any = {
alipay:'支付宝支付',
wxpay:'微信支付'
},
package:{
}
kyc:{
drive:'驾驶证',
pass:'护照',
idcard:'身份证/居住证',
stu:'学生证',
health:'医保卡',
birth:'出生证明',
kycerror:'获取认证状态失败',
support:'只支持 JPG/PNG/PDF 格式文件！',
file:'文件大小不能超过 5MB！',
picturesuc:'上传成功！',
picturefal:'上传失败，请重试！',
completeinfo:'请填写完整信息！',
upload:'请上传所需文件！',
kycsubmit:'KYC 认证申请提交成功！',
submitfalse:'提交失败，请重试！',
nocertified:'未认证',
certifing:'认证中',
certified:'已认证',
rejected:'已拒绝',
unstatus:'未知状态',
kyctitle:'KYC 实名认证',
service:'根据相关法规要求，使用服务前需要完成实名认证',
cerstatus:'认证状态',
cername:'认证姓名：',
certime:'认证时间：',
cerinfo:'认证信息',
cerinfoservice:'请填写真实的个人信息，所有信息仅用于身份认证',
baseinfo:'基本信息',
realname:'真实姓名',
realnameple:'请输入真实姓名',
birthdate:'出生日期',
birthdateple:'请选择出生日期',
idinfo:'证件信息',
idtype:'证件类型',
idtypeple:'请选择证件类型',
idphoto:'证件照片',
uploadidphoto:'上传证件照片',
format:'支持 JPG/PNG/PDF 格式，大小不超过 5MB',
photopic:'面部照片',
uploadphotopic:'上传面部照片',
submitcer:'提交认证',
previewimage:'预览图片',
},
},
form: {
required: '不能为空',

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>