From 72343da4324b1b94d6bbce84d9c4de51b120b6cf Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 12 Feb 2025 11:32:00 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Akyc=E7=95=8C=E9=9D=A2=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=BA=A2=E5=87=BA=E5=AE=B9=E5=99=A8=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user-center/kyc/index.vue | 86 +++++++++++++++++------------
 1 file changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/views/user-center/kyc/index.vue b/src/views/user-center/kyc/index.vue
index bd06f04..9dad118 100644
--- a/src/views/user-center/kyc/index.vue
+++ b/src/views/user-center/kyc/index.vue
@@ -42,16 +42,28 @@
               </ATag>
             </template>
             <template v-if="column.key === 'idFile'">
-              <a-image
-                :width="200"
-                :src="parseFile(record.idFile)"
-              />
+              <div class="table-image-wrapper">
+                <a-image
+                  class="kyc-image"
+                  :src="parseFile(record.idFile)"
+                  :preview="{
+                    src: parseFile(record.idFile),
+                    mask: t('common.clickToPreview')
+                  }"
+                />
+              </div>
             </template>
             <template v-if="column.key === 'identifyPicture'">
-              <a-image
-                :width="200"
-                :src="parseFile(record.identifyPicture)"
-              />
+              <div class="table-image-wrapper">
+                <a-image
+                  class="kyc-image"
+                  :src="parseFile(record.identifyPicture)"
+                  :preview="{
+                    src: parseFile(record.identifyPicture),
+                    mask: t('common.clickToPreview')
+                  }"
+                />
+              </div>
             </template>
 
             <template v-else-if="column.key === 'operate'">
@@ -175,21 +187,21 @@ const {
       dataIndex: 'userName',
       title: t('page.kyc.username'),
       align: 'center',
-      width: 150
+      width: 120
     },
     {
       key: 'realName',
       dataIndex: 'realName',
       title: t('page.kyc.realname'),
       align: 'center',
-      width: 150
+      width: 120
     },
     {
       key: 'idType',
       dataIndex: 'idType',
       title: t('page.kyc.type'),
       align: 'center',
-      width: 150
+      width: 100
     },
     {
       key: 'idFile',
@@ -197,17 +209,6 @@ const {
       title: t('page.kyc.file'),
       align: 'center',
       width: 150,
-      // customRender: ({ text }) => h('div', { class: 'image-wrapper' }, [
-      //   h(AImage, {
-      //     src: text || '',
-      //     alt: '证件照片',
-      //     height: 80,
-      //     width: 120,
-      //     style: { objectFit: 'cover' },
-      //     fallback: '/src/assets/images/image-error.png',
-      //     preview: true
-      //   })
-      // ])
     },
     {
       key: 'identifyPicture',
@@ -215,17 +216,6 @@ const {
       title: t('page.kyc.picture'),
       align: 'center',
       width: 150,
-    //   customRender: ({ text }) => h('div', { class: 'image-wrapper' }, [
-    //     h(AImage, {
-    //       src: text || '',
-    //       alt: '面部照片',
-    //       height: 80,
-    //       width: 120,
-    //       style: { objectFit: 'cover' },
-    //       fallback: '/src/assets/images/image-error.png',
-    //       preview: true
-    //     })
-    //   ])
     },
     {
       key: 'status',
@@ -239,7 +229,7 @@ const {
       dataIndex: 'createTime',
       title: t('page.kyc.createtime'),
       align: 'center',
-      width: 180
+      width: 150
     },
     {
       key: 'operate',
@@ -332,4 +322,32 @@ const handleReject = (record: Api.Kyc.KycInfo) => {
   overflow: hidden;
   cursor: pointer;
 }
+
+.table-image-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  width: 100%;
+  height: 100%;
+  min-height: 80px;
+}
+
+:deep(.kyc-image) {
+  width: 90%;
+  max-width: 140px;
+  aspect-ratio: 3/2;
+  border-radius: 4px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+:deep(.ant-image-mask) {
+  border-radius: 4px;
+}
 </style>