feat:kyc状态显示问题修复

src/views/userInfo/kyc/index.vue

@@ -101,17 +101,40 @@ const getBase64 = (file: File): Promise<string> => {
 // 获取 KYC 状态
 const getKYCStatus = async () => {
   try {
-    const { data } = await fetchKYCStatus();
+    const response = await fetchKYCStatus();
-    if (data?.status) {
+    console.log('KYC Response:', response);
-      // 将状态转换为标准格式
+
-      const normalizedStatus = data.status.toUpperCase() as Api.KYC.KYCStatus;
+    // 检查响应数据结构
+    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 = {
-        ...data,
+            status: normalizedStatus,
-        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
           };
-    } else {
+          return; // 成功处理后直接返回
-      // 如果没有状态数据，设置为默认值
+        }
+      }
+    }
+
+    // 如果没有有效的状态数据，设置为默认值
+    console.warn('Invalid or missing KYC status data:', response);
     kycStatus.value = 'UNVERIFIED';
     kycInfo.value = {
       status: 'UNVERIFIED',
@@ -120,12 +143,11 @@ const getKYCStatus = async () => {
       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',
@@ -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>