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

feat:kyc状态显示问题修复

Browse Source
This commit is contained in:
zhongzm
2025-02-12 10:52:27 +08:00
parent 59533750c6
commit a6d944f98f
1 changed files with 147 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,31 +101,53 @@ const getBase64 = (file: File): Promise<string> => {
// 获取 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');
const response = await fetchKYCStatus();
console.log('KYC Response:', response);
// 检查响应数据结构
if (response?.data?.rows && Array.isArray(response.data.rows) && response.data.rows.length > 0) {
// 获取第一条记录
const kycData = response.data.rows[0];
console.log('KYC Data:', kycData);
if (kycData && kycData.status) {
// 将状态转换为标准格式，不区分大小写
const normalizedStatus = kycData.status.toUpperCase() as Api.KYC.KYCStatus;
console.log('Normalized status:', normalizedStatus);
// 确保状态值有效
if (['UNVERIFIED', 'PENDING', 'VERIFIED', 'REJECTED'].includes(normalizedStatus)) {
kycStatus.value = normalizedStatus;
kycInfo.value = {
status: normalizedStatus,
fullName: kycData.realName || '',
birthDate: kycData.birthDate || '',
rejectReason: kycData.description || '',
verifiedTime: kycData.updateTime || kycData.createTime || '',
idType: kycData.idType,
idFile: kycData.idFile,
identifyPicture: kycData.identifyPicture
};
return; // 成功处理后直接返回
}
}
}
// 如果没有有效的状态数据，设置为默认值
console.warn('Invalid or missing KYC status data:', response);
kycStatus.value = 'UNVERIFIED';
kycInfo.value = {
status: 'UNVERIFIED',
fullName: '',
birthDate: '',
rejectReason: '',
verifiedTime: ''
};
} catch (error) {
console.error('Failed to fetch KYC status:', error);
message.error(t('page.kyc.kycerror'));
// 发生错误时也设置默认值
// 发生错误时设置默认值
kycStatus.value = 'UNVERIFIED';
kycInfo.value = {
status: 'UNVERIFIED',
@@ -273,6 +295,21 @@ const getStatusText = (status: Api.KYC.KYCStatus) => {
}
};
// 获取证件类型标签
const getIdTypeLabel = (idType: number | string | undefined) => {
if (!idType) return '';
const option = idTypeOptions.value.find(opt => opt.value === Number(idType));
return option ? option.label : '';
};
// 处理已认证状态下的图片预览
const handleVerifiedImagePreview = (imageUrl: string | undefined) => {
if (!imageUrl) return;
previewImage.value = imageUrl;
previewVisible.value = true;
previewTitle.value = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);
};
onMounted(() => {
getKYCStatus();
});
@@ -298,17 +335,40 @@ onMounted(() => {
</a-tag>
</div>
<!-- 当状态为 VERIFIED 时显示认证信息 -->
<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.birthdate') }}</span>
<span class="value">{{ kycInfo.birthDate }}</span>
</div>
<div class="info-item">
<span class="label">{{ t('page.kyc.idtype') }}</span>
<span class="value">{{ getIdTypeLabel(kycInfo.idType) }}</span>
</div>
<div class="info-item">
<span class="label">{{ t('page.kyc.certime') }}</span>
<span class="value">{{ kycInfo.verifiedTime }}</span>
</div>
<!-- 添加证件照片预览 -->
<div class="info-item">
<span class="label">{{ t('page.kyc.idphoto') }}</span>
<div class="image-preview" @click="() => handleVerifiedImagePreview(kycInfo.idFile)">
<img :src="kycInfo.idFile" :alt="t('page.kyc.idphoto')" />
</div>
</div>
<div class="info-item">
<span class="label">{{ t('page.kyc.photopic') }}</span>
<div class="image-preview" @click="() => handleVerifiedImagePreview(kycInfo.identifyPicture)">
<img :src="kycInfo.identifyPicture" :alt="t('page.kyc.photopic')" />
</div>
</div>
</div>
<!-- 如果有拒绝原因，显示拒绝信息 -->
<div v-if="kycInfo.rejectReason" class="reject-reason">
<a-alert
type="warning"
@@ -436,7 +496,7 @@ onMounted(() => {
:footer="null"
@cancel="previewVisible = false"
>
<img :alt="t('page.kyc.previewimage')" style="width: 100%" :src="previewImage" />
<img :alt="previewTitle" style="width: 100%" :src="previewImage" />
</a-modal>
</div>
</template>
@@ -533,6 +593,20 @@ onMounted(() => {
width: 100%;
max-width: none;
}
.info-item {
flex-direction: column;
}
.info-item .label {
width: 100%;
margin-bottom: 8px;
}
.image-preview {
width: 100%;
height: 200px;
}
}
/* 平板适配 */
@@ -557,4 +631,55 @@ onMounted(() => {
}
}
.verified-info {
margin-top: 24px;
padding: 16px;
background: #f8f8f8;
border-radius: 8px;
}
.info-item {
display: flex;
margin-bottom: 16px;
align-items: flex-start;
}
.info-item .label {
width: 120px;
color: #666;
font-size: 14px;
}
.info-item .value {
flex: 1;
color: #333;
font-size: 14px;
word-break: break-all;
}
.image-preview {
width: 120px;
height: 120px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 1px solid #e8e8e8;
transition: all 0.3s;
}
.image-preview:hover {
border-color: #1890ff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reject-reason {
margin-top: 16px;
}
</style>