充值审核详情

src/views/platinum/platinum_recharge_withdrawal_review/list/recharge/compoments/common-detail/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <Des :list="desList" />
+    <Des :list="desList"
+         @onClick="imgClick" />
+    <a-modal :visible="previewVisible"
+             :footer="null"
+             @cancel="cancelImg">
+      <img alt="预览附件"
+           style="width: 100%"
+           :src="previewImage" />
+    </a-modal>
   </div>
 
 </template>
@@ -8,8 +16,9 @@
 <script lang="ts">
 import { defineComponent, PropType, watchEffect } from 'vue';
 import { formatValue } from '@/common/methods';
-import { Des, handleDesList } from '@/common/components/commonDes';
+import { Des, DescriptionsList, handleDesList } from '@/common/components/commonDes';
 import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
+import { handlePreviewImg } from '@/common/setup/upload';
 
 export default defineComponent({
     name: 'custom-detail-desc',
@@ -23,7 +32,14 @@ export default defineComponent({
     setup(props) {
         const { desList, getDesList } = handleDesList();
         // 预览附件
-
+        const { previewVisible, previewImage, cancelImg, previewImg, getImgName } = handlePreviewImg();
+        function imgClick({ label }: DescriptionsList) {
+            switch (label) {
+                case '凭证':
+                    previewImg(props.selectedRow.certificatephotourl);
+                    break;
+            }
+        }
         watchEffect(() => {
             if (props.selectedRow.exchticket) {
                 const data = props.selectedRow;
@@ -32,7 +48,7 @@ export default defineComponent({
                     { label: '名称', value: formatValue(data.accountname) },
                     { label: '账户类型', value: data.userinfotype === 1 ? '个人' : '企业' },
                     { label: '充值金额', value: formatValue(data.amount) },
-                    { label: '凭证', value: formatValue(data.certificatephotourl) },
+                    { label: '凭证', value: formatValue(getImgName(data.certificatephotourl)), className: 'blue' },
                     { label: '申请时间', value: formatValue(data.updatetime) },
                 ];
                 getDesList(list);
@@ -40,6 +56,10 @@ export default defineComponent({
         });
         return {
             desList,
+            previewVisible,
+            previewImage,
+            cancelImg,
+            imgClick,
         };
     },
 });