561 lines
15 KiB
Vue
561 lines
15 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
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();
|
|
|
|
// KYC 状态
|
|
const kycStatus = ref<Api.KYC.KYCStatus>('UNVERIFIED');
|
|
const kycInfo = ref<Partial<Api.KYC.KYCInfo>>({
|
|
status: 'UNVERIFIED',
|
|
fullName: '',
|
|
birthDate: '',
|
|
rejectReason: '',
|
|
verifiedTime: ''
|
|
});
|
|
|
|
// 证件类型选项
|
|
const idTypeOptions = [
|
|
{ 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') }
|
|
];
|
|
|
|
// 表单数据
|
|
interface FormData {
|
|
fullName: string;
|
|
birthDate: string;
|
|
idType: number; // 使用 number 类型
|
|
idCardFile?: string;
|
|
photoFile?: string;
|
|
}
|
|
|
|
// 表单数据
|
|
const formData = ref<FormData>({
|
|
fullName: '',
|
|
birthDate: '',
|
|
idType: 2, // 默认选择护照
|
|
idCardFile: undefined,
|
|
photoFile: undefined
|
|
});
|
|
|
|
// 文件对象存储
|
|
const idCardFileObj = ref<File>();
|
|
const photoFileObj = ref<File>();
|
|
|
|
// 上传状态
|
|
const idCardLoading = ref(false);
|
|
const photoLoading = ref(false);
|
|
|
|
// 文件列表状态
|
|
const idCardFileList = ref<any[]>([]);
|
|
const photoFileList = ref<any[]>([]);
|
|
|
|
// 添加图片预览状态
|
|
const previewVisible = ref(false);
|
|
const previewImage = ref('');
|
|
const previewTitle = ref('');
|
|
|
|
// 处理图片预览
|
|
const handlePreview = async (file: any) => {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj);
|
|
}
|
|
previewImage.value = file.url || file.preview;
|
|
previewVisible.value = true;
|
|
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
|
|
};
|
|
|
|
// 处理图片删除
|
|
const handleIdCardRemove = () => {
|
|
formData.value.idCardFile = undefined;
|
|
idCardFileObj.value = undefined;
|
|
idCardFileList.value = [];
|
|
};
|
|
|
|
const handlePhotoRemove = () => {
|
|
formData.value.photoFile = undefined;
|
|
photoFileObj.value = undefined;
|
|
photoFileList.value = [];
|
|
};
|
|
|
|
// 辅助函数：将文件转换为 base64
|
|
const getBase64 = (file: File): Promise<string> => {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
reader.onerror = error => reject(error);
|
|
});
|
|
};
|
|
|
|
// 获取 KYC 状态
|
|
const getKYCStatus = async () => {
|
|
try {
|
|
const { data } = await fetchKYCStatus();
|
|
if (data?.status) {
|
|
// 将状态转换为标准格式
|
|
const normalizedStatus = data.status.toUpperCase() as Api.KYC.KYCStatus;
|
|
kycStatus.value = normalizedStatus;
|
|
kycInfo.value = {
|
|
...data,
|
|
status: normalizedStatus
|
|
};
|
|
} else {
|
|
// 如果没有状态数据，设置为默认值
|
|
kycStatus.value = 'UNVERIFIED';
|
|
kycInfo.value = {
|
|
status: 'UNVERIFIED',
|
|
fullName: '',
|
|
birthDate: '',
|
|
rejectReason: '',
|
|
verifiedTime: ''
|
|
};
|
|
console.warn('No KYC status data received');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch KYC status:', error);
|
|
message.error(t('page.kyc.kycerror'));
|
|
// 发生错误时也设置默认值
|
|
kycStatus.value = 'UNVERIFIED';
|
|
kycInfo.value = {
|
|
status: 'UNVERIFIED',
|
|
fullName: '',
|
|
birthDate: '',
|
|
rejectReason: '',
|
|
verifiedTime: ''
|
|
};
|
|
}
|
|
};
|
|
|
|
// 处理文件上传
|
|
const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
|
|
const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
|
|
if (!isValidFormat) {
|
|
message.error(t('page.kyc.support'));
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt5M) {
|
|
message.error(t('page.kyc.file'));
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
|
|
try {
|
|
idCardLoading.value = true;
|
|
const { data, error } = await uploadFile(file);
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
if (data) {
|
|
formData.value.idCardFile = data.url; // 存储文件 URL
|
|
idCardFileObj.value = file; // 存储文件对象
|
|
message.success(t('page.kyc.picturesuc'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to upload ID card:', error);
|
|
message.error(t('page.kyc.picturefal'));
|
|
} finally {
|
|
idCardLoading.value = false;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
|
|
const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
|
|
if (!isValidFormat) {
|
|
message.error(t('page.kyc.support'));
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
|
if (!isLt5M) {
|
|
message.error(t('page.kyc.file'));
|
|
return Upload.LIST_IGNORE;
|
|
}
|
|
|
|
try {
|
|
photoLoading.value = true;
|
|
const { data, error } = await uploadFile(file);
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
if (data) {
|
|
formData.value.photoFile = data.url; // 存储文件 URL
|
|
photoFileObj.value = file; // 存储文件对象
|
|
message.success(t('page.kyc.picturesuc'));
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to upload photo:', error);
|
|
message.error(t('page.kyc.picturefal'));
|
|
} finally {
|
|
photoLoading.value = false;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// 提交 KYC 认证
|
|
const submitKYC = async () => {
|
|
try {
|
|
if (!formData.value.fullName || !formData.value.birthDate || !formData.value.idType) {
|
|
message.error(t('page.kyc.completeinfo'));
|
|
return;
|
|
}
|
|
if (!formData.value.idCardFile || !formData.value.photoFile) {
|
|
message.error(t('page.kyc.upload'));
|
|
return;
|
|
}
|
|
|
|
const formattedBirthDate = dayjs(formData.value.birthDate).format('YYYY-MM-DD');
|
|
|
|
await submitKYCVerification({
|
|
realName: formData.value.fullName,
|
|
birthDate: formattedBirthDate,
|
|
idType: formData.value.idType,
|
|
idFile: formData.value.idCardFile,
|
|
identifyPicture: formData.value.photoFile,
|
|
kycRequestStatus: 1
|
|
});
|
|
|
|
message.success(t('page.kyc.kycsubmit'));
|
|
await getKYCStatus();
|
|
} catch (error) {
|
|
console.error('Failed to submit KYC:', error);
|
|
message.error(t('page.kyc.submitfalse'));
|
|
}
|
|
};
|
|
|
|
// 修改日期禁用逻辑
|
|
const disabledDate = (current: Dayjs) => {
|
|
// 禁用今天之后的日期
|
|
return current && current.valueOf() > Date.now();
|
|
};
|
|
|
|
// 获取状态颜色
|
|
const getStatusColor = (status: Api.KYC.KYCStatus) => {
|
|
const normalizedStatus = status.toUpperCase();
|
|
switch (normalizedStatus) {
|
|
case 'UNVERIFIED':
|
|
return 'warning'; // 未认证：橙色警告
|
|
case 'PENDING':
|
|
return 'processing'; // 认证中：蓝色处理中
|
|
case 'VERIFIED':
|
|
return 'success'; // 已认证：绿色成功
|
|
case 'REJECTED':
|
|
return 'error'; // 已拒绝：红色错误
|
|
default:
|
|
return 'default';
|
|
}
|
|
};
|
|
|
|
// 获取状态文本
|
|
const getStatusText = (status: Api.KYC.KYCStatus) => {
|
|
const normalizedStatus = status.toUpperCase();
|
|
switch (normalizedStatus) {
|
|
case 'UNVERIFIED':
|
|
return t('page.kyc.nocertified');
|
|
case 'PENDING':
|
|
return t('page.kyc.certifing');
|
|
case 'VERIFIED':
|
|
return t('page.kyc.certified');
|
|
case 'REJECTED':
|
|
return t('page.kyc.rejected');
|
|
default:
|
|
return t('page.kyc.unstatus');
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
getKYCStatus();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="kyc-container responsive-container">
|
|
<!-- 标题部分 -->
|
|
<div class="page-header">
|
|
<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">{{ t('page.kyc.cerstatus') }}</span>
|
|
<a-tag
|
|
class="status-tag"
|
|
:color="getStatusColor(kycStatus)"
|
|
>
|
|
{{ getStatusText(kycStatus) }}
|
|
</a-tag>
|
|
</div>
|
|
|
|
<div v-if="kycStatus === 'VERIFIED'" class="verified-info">
|
|
<div class="info-item">
|
|
<span class="label">{{ t('page.kyc.cername') }}</span>
|
|
<span class="value">{{ kycInfo.fullName }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">{{ t('page.kyc.certime') }}</span>
|
|
<span class="value">{{ kycInfo.verifiedTime }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="kycInfo.rejectReason" class="reject-reason">
|
|
<a-alert
|
|
type="warning"
|
|
:message="kycInfo.rejectReason"
|
|
show-icon
|
|
banner
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 认证表单 -->
|
|
<div v-if="kycStatus === 'UNVERIFIED' || kycStatus === 'REJECTED'" class="form-card">
|
|
<div class="form-header">
|
|
<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">{{ t('page.kyc.baseinfo') }}</h3>
|
|
<div class="form-grid">
|
|
<a-form-item :label="t('page.kyc.realname')" required>
|
|
<a-input
|
|
v-model:value="formData.fullName"
|
|
:placeholder="t('page.kyc.realnameple')"
|
|
:maxLength="20"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="t('page.kyc.birthdate')" required>
|
|
<a-date-picker
|
|
v-model:value="formData.birthDate"
|
|
class="date-picker"
|
|
:disabledDate="disabledDate"
|
|
:placeholder="t('page.kyc.birthdateple')"
|
|
/>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 证件信息部分 -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">{{ t('page.kyc.idinfo') }}</h3>
|
|
<div class="form-grid">
|
|
<a-form-item :label="t('page.kyc.idtype')" required>
|
|
<a-select
|
|
v-model:value="formData.idType"
|
|
:placeholder="t('page.kyc.idtypeple')"
|
|
class="id-type-select"
|
|
:get-popup-container="(triggerNode) => triggerNode.parentNode"
|
|
>
|
|
<a-select-option
|
|
v-for="option in idTypeOptions"
|
|
:key="option.value"
|
|
:value="option.value"
|
|
>
|
|
{{ option.label }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div class="upload-section">
|
|
<div class="upload-item">
|
|
<a-form-item :label="t('page.kyc.idphoto')" required>
|
|
<a-upload
|
|
v-model:file-list="idCardFileList"
|
|
list-type="picture-card"
|
|
:show-upload-list="true"
|
|
:before-upload="handleIdCardUpload"
|
|
@preview="handlePreview"
|
|
@remove="handleIdCardRemove"
|
|
>
|
|
<div v-if="idCardFileList.length < 1">
|
|
<loading-outlined v-if="idCardLoading" />
|
|
<plus-outlined v-else />
|
|
<div class="upload-text">{{ t('page.kyc.uploadidphoto') }}</div>
|
|
</div>
|
|
</a-upload>
|
|
<div class="upload-tip">{{ t('page.kyc.format') }}</div>
|
|
</a-form-item>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<a-form-item :label="t('page.kyc.photopic')" required>
|
|
<a-upload
|
|
v-model:file-list="photoFileList"
|
|
list-type="picture-card"
|
|
:show-upload-list="true"
|
|
:before-upload="handlePhotoUpload"
|
|
@preview="handlePreview"
|
|
@remove="handlePhotoRemove"
|
|
>
|
|
<div v-if="photoFileList.length < 1">
|
|
<loading-outlined v-if="photoLoading" />
|
|
<plus-outlined v-else />
|
|
<div class="upload-text">{{ t('page.kyc.uploadphotopic') }}</div>
|
|
</div>
|
|
</a-upload>
|
|
<div class="upload-tip">{{ t('page.kyc.format') }}</div>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-footer">
|
|
<a-button
|
|
type="primary"
|
|
size="large"
|
|
:disabled="kycStatus === 'PENDING'"
|
|
@click="submitKYC"
|
|
class="submit-btn"
|
|
>
|
|
{{ t('page.kyc.submitcer') }}
|
|
</a-button>
|
|
</div>
|
|
</a-form>
|
|
</div>
|
|
|
|
<!-- 添加图片预览模态框 -->
|
|
<a-modal
|
|
:open="previewVisible"
|
|
:title="previewTitle"
|
|
:footer="null"
|
|
@cancel="previewVisible = false"
|
|
>
|
|
<img :alt="t('page.kyc.previewimage')" style="width: 100%" :src="previewImage" />
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 响应式容器 */
|
|
.responsive-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.status-card, .form-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
padding: clamp(16px, 4vw, 32px);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* 表单网格布局 */
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* 上传区域布局 */
|
|
.upload-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: clamp(16px, 3vw, 24px);
|
|
}
|
|
|
|
/* 响应式标题 */
|
|
.page-title {
|
|
font-size: clamp(20px, 4vw, 24px);
|
|
font-weight: 600;
|
|
margin-bottom: clamp(8px, 2vw, 16px);
|
|
}
|
|
|
|
/* 响应式描述文本 */
|
|
.page-desc {
|
|
font-size: clamp(14px, 2vw, 16px);
|
|
color: #86909c;
|
|
}
|
|
|
|
/* 响应式表单项 */
|
|
:deep .ant-form-item {
|
|
margin-bottom: clamp(16px, 3vw, 24px);
|
|
}
|
|
|
|
/* 响应式上传组件 */
|
|
:deep .ant-upload-select,
|
|
:deep .ant-upload-list-picture-card-container {
|
|
width: 100% !important;
|
|
height: clamp(140px, 30vw, 180px) !important;
|
|
}
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
.responsive-container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.status-card, .form-card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.upload-section {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-footer {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.submit-btn {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/* 平板适配 */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.responsive-container {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.upload-section {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* 大屏适配 */
|
|
@media (min-width: 1025px) {
|
|
.responsive-container {
|
|
padding: 32px;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
</style>
|