优化样式

deploy.js

@@ -7,9 +7,9 @@ const log = console.log
 
 const client = new OSS({
   region: 'oss-cn-beijing',
-  accessKeyId: 'LTAIOTuuLTaWoGJj',
-  accessKeySecret: 'dE5tTGm2lh35eItct2krW2DeH2lf2I',
-  bucket: 'webapp-pub'
+  accessKeyId: 'LTAI5t6yKc2m47ZUZTBbUBuP',
+  accessKeySecret: 'mhuPVC43NAkzBaheHyWGjREiIrLax0',
+  bucket: 'webapp-pub',
 })
 
 async function uploadTarget(src, dist) {

src/assets/css/base.css

@@ -3,7 +3,6 @@
   padding: 0;
 }
 .tableDetail {
-  border: 1px solid #ebeef5;
   width: 100%;
   border-collapse: collapse;
 }

src/modules/payment/components/Confirmed.vue

@@ -2,7 +2,11 @@
 <template>
   <app-list v-bind="tableOptions" ref="list">
     <template v-slot:payment_voucher_filename="{ row }">
-      <el-image v-for="(item, index) in row.payment_voucher_filename" :key="index" :src="item"></el-image>
+      <el-image
+        v-for="(item, index) in row.payment_voucher_filename"
+        :key="index"
+        :src="item"
+        :preview-src-list="row.payment_voucher_filename"></el-image>
     </template>
     <template v-slot:table-x="{ row }">
       <el-button @click="toPayDetail(row)">查看</el-button>
@@ -17,8 +21,8 @@ import { payCancel } from '../api'
 export default {
   props: {
     dealList: {
-      type: Object
-    }
+      type: Object,
+    },
   },
   data() {
     return {}
@@ -35,32 +39,32 @@ export default {
             prop: 'payment_voucher_filename',
             slots: 'payment_voucher_filename',
             align: 'center',
-            minWidth: 100
+            minWidth: 100,
           },
           {
             label: '支付人姓名',
             prop: 'payer_name',
             align: 'center',
-            minWidth: 100
+            minWidth: 100,
           },
           { label: '支付金额', prop: 'amount', align: 'center', minWidth: 100 },
           { label: '支付类型', prop: 'stages_type_name', align: 'center', minWidth: 100 },
-          { label: '支付时间', prop: 'payment_time', align: 'center', minWidth: 300 },
+          { label: '支付时间', prop: 'payment_time', align: 'center', minWidth: 160 },
           { label: '支付方式', prop: 'payment_method', align: 'center', minWidth: 100 },
           { label: '其他支付方式', prop: 'payment_method_others', align: 'center', minWidth: 100 },
-          { label: '交易流水号', prop: 'txn_id', align: 'center', minWidth: 300 },
+          { label: '交易流水号', prop: 'txn_id', align: 'center', minWidth: 200 },
           { label: '支付状态', prop: 'payment_status', align: 'center', minWidth: 100 },
-          { label: '创建日期', prop: 'created_time', align: 'center', minWidth: 300 },
-          { slots: 'table-x', align: 'center', minWidth: 230 }
-        ]
+          { label: '创建日期', prop: 'created_time', align: 'center', minWidth: 160 },
+          { slots: 'table-x', align: 'center', minWidth: 180, fixed: 'right' },
+        ],
       }
-    }
+    },
   },
   methods: {
     // 取消到账
     cancelReceive(row) {
       const params = { id: row.id }
-      payCancel(params).then(res => {
+      payCancel(params).then((res) => {
         if (res.code === 0) {
           this.$parent.$parent.fetchTicketDetail()
         }
@@ -74,10 +78,10 @@ export default {
         name: 'paydetail',
         query: {
           row: row,
-          dealList: dealList
-        }
+          dealList: dealList,
+        },
       })
-    }
-  }
+    },
+  },
 }
 </script>

src/modules/payment/components/Toconfirm.vue

@@ -2,7 +2,11 @@
 <template>
   <app-list v-bind="tableOptions" ref="list">
     <template v-slot:payment_voucher_filename="{ row }">
-      <el-image v-for="(item, index) in row.payment_voucher_filename" :key="index" :src="item"></el-image>
+      <el-image
+        v-for="(item, index) in row.payment_voucher_filename"
+        :key="index"
+        :src="item"
+        :preview-src-list="row.payment_voucher_filename"></el-image>
     </template>
     <template v-slot:table-x="{ row }">
       <el-button @click="toDeal(row)">处理</el-button>
@@ -14,8 +18,8 @@
 export default {
   props: {
     dealList: {
-      type: Object
-    }
+      type: Object,
+    },
   },
   computed: {
     // 列表配置
@@ -27,7 +31,7 @@ export default {
           {
             label: '支付凭证',
             prop: 'payment_voucher_filename',
-            slots: 'payment_voucher_filename'
+            slots: 'payment_voucher_filename',
           },
           { label: '支付人姓名', prop: 'payer_name', align: 'center', minWidth: 150 },
           { label: '支付金额', prop: 'amount', align: 'center', minWidth: 100 },
@@ -38,10 +42,10 @@ export default {
           { label: '交易流水号', prop: 'txn_id', align: 'center', minWidth: 150 },
           { label: '支付状态', prop: 'payment_status', align: 'center', minWidth: 100 },
           { label: '创建日期', prop: 'created_time', align: 'center', minWidth: 100 },
-          { slots: 'table-x', align: 'center', minWidth: 100 }
-        ]
+          { slots: 'table-x', align: 'center', minWidth: 100, fixed: 'right' },
+        ],
       }
-    }
+    },
   },
   methods: {
     toDeal(row) {
@@ -51,10 +55,10 @@ export default {
         name: 'deal',
         query: {
           dealList: dealList,
-          row: row
-        }
+          row: row,
+        },
       })
-    }
-  }
+    },
+  },
 }
 </script>

src/modules/payment/views/Deal.vue

@@ -25,11 +25,14 @@
           <td colspan="7">{{ row.stages_type_name }}</td>
         </tr>
         <tr>
-          <td></td>
+          <th>支付凭证</th>
           <td colspan="7">
-            <div v-for="(item, index) in row.payment_voucher_filename" :key="index">
-              <img :src="item" alt="" />
-            </div>
+            <el-image
+              v-for="(item, index) in row.payment_voucher_filename"
+              :key="index"
+              :src="item"
+              :preview-src-list="row.payment_voucher_filename"
+              style="max-width: 200px; max-height: 300px"></el-image>
           </td>
         </tr>
         <tr>
@@ -112,11 +115,11 @@ export default {
         payment_status: '21',
         receiving_time: row.payment_time,
         comment: '',
-        receiving_voucher_filename: []
+        receiving_voucher_filename: [],
       },
       rules: {
-        payment_status: [{ required: true, message: '请选择支付状态', trigger: 'change' }]
-      }
+        payment_status: [{ required: true, message: '请选择支付状态', trigger: 'change' }],
+      },
     }
   },
   mounted() {
@@ -142,7 +145,7 @@ export default {
           history.go(-1)
         })
       })
-    }
-  }
+    },
+  },
 }
 </script>

src/modules/payment/views/Detail.vue

 <template>
-  <div>
+  <div v-loading="loading">
     <!-- 财务 -->
     <el-button
       type="danger"
@@ -65,7 +65,8 @@ export default {
   data() {
     return {
       id: '',
-      dealList: {}
+      dealList: {},
+      loading: false,
     }
   },
   computed: {
@@ -101,7 +102,7 @@ export default {
       } else if (this.dealList.business_confirm_status === 1 && this.dealList.payment_status === '80') {
         return '业务取消足额支付'
       }
-    }
+    },
   },
   beforeMount() {
     this.id = this.$route.params.id // 详情列表
@@ -112,20 +113,24 @@ export default {
   methods: {
     fetchTicketDetail() {
       const params = { id: this.id }
+      this.loading = true
       payDetail(params)
-        .then(res => {
+        .then((res) => {
           this.dealList = res.data.list[0]
           console.log(this.dealList, '----')
         })
-        .catch(error => {
+        .catch((error) => {
           this.$message.error(error.message)
         })
+        .finally(() => {
+          this.loading = false
+        })
     },
     // 财务(业务)确认(取消)支付
     fetchToTicketDetail(val) {
       const params = {
         confirm_type: val,
-        id: this.id
+        id: this.id,
       }
       if (this.dealList.payment_status === '70') {
         // 确认
@@ -138,7 +143,7 @@ export default {
           this.fetchTicketDetail()
         })
       }
-    }
-  }
+    },
+  },
 }
 </script>