更改表格样式

src/views/Transfers.vue

@@ -93,21 +93,14 @@
         style="width: 100%"
       >
         <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column label="转账类型" width="120">
-          <template #default="{ row }">
-            <el-tag :type="getTypeTagType(row.transfer_type)">
-              {{ getTypeText(row.transfer_type) }}
-            </el-tag>
-          </template>
-        </el-table-column>
         <el-table-column label="转出用户" width="150">
           <template #default="{ row }">
             <div>
               <div>{{ row.from_username || '系统' }}</div>
-              <div v-if="row.from_real_name" class="real-name">{{ row.from_real_name }}</div>
+              <div v-if="row.from_real_name">{{ row.from_real_name }}</div>
             </div>
             <div>
-              <div>{{row.from_district}}</div>
+              <div class="real-name">{{row.from_district}}</div>
               <div class="real-name">{{row.from_province}}-{{row.from_city}}</div>
             </div>
           </template>
@@ -116,14 +109,20 @@
           <template #default="{ row }">
             <div>
               <div>{{ row.to_username }}</div>
-              <div v-if="row.to_real_name" class="real-name">{{ row.to_real_name }}</div>
+              <div v-if="row.to_real_name">{{ row.to_real_name }}</div>
             </div>
             <div>
-              <div>{{row.to_district}}</div>
+              <div class="real-name">{{row.to_district}}</div>
               <div class="real-name">{{row.to_province}} -{{row.to_city}}</div>
             </div>
           </template>
         </el-table-column>
+        <el-table-column label="预收款余额变化" width="150">
+          <template #default="{ row }">
+            <div class="amount-red">转出用户：¥{{ row.from_balance }}</div>
+            <div class="amount">转入用户：¥{{ row.to_balance }}</div>
+          </template>
+        </el-table-column>
         <el-table-column label="金额" width="100">
           <template #default="{ row }">
             <span class="amount">¥{{ row.amount }}</span>
@@ -147,17 +146,25 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="凭证" width="100">
+        <el-table-column label="凭证" width="100" align="center">
           <template #default="{ row }">
-            <el-button
+            <el-image
+              v-if="row.voucher_url"
+              class="avatar"
+              :src="getImageUrl(row.voucher_url)" 
+              fit="contain" 
+              :preview-src-list="[getImageUrl(row.voucher_url)]"
+              preview-teleported
+            >
+            </el-image>
+            <!-- <el-button
               v-if="row.voucher_url"
               type="primary"
               size="small"
               @click="viewProof(row.voucher_url)"
             >
               查看
-            </el-button>
-            <span v-else>无</span>
+            </el-button> -->
           </template>
         </el-table-column>
         <el-table-column prop="created_at" label="创建时间" width="180">
@@ -237,15 +244,6 @@
     </el-card>
     </div>
 
-
-
-    <!-- 凭证查看对话框 -->
-    <el-dialog v-model="proofDialog.visible" title="转账凭证" width="700px" height="1000px">
-      <div class="proof-container">
-        <img :src="getImageUrl(proofDialog.imageUrl)" alt="转账凭证" class="proof-image" />
-      </div>
-    </el-dialog>
-
     <!-- 创建转账对话框 -->
     <el-dialog v-model="createDialog.visible" title="分配转账" width="500px">
       <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="100px">
@@ -466,11 +464,6 @@ const pagination = ref({
   total: 0
 });
 
-const proofDialog = ref({
-  visible: false,
-  imageUrl: ''
-});
-
 const detailDialog = ref({
   visible: false,
   transfer: null
@@ -760,11 +753,6 @@ const confirmForceChange = async () => {
   }
 }
 
-const viewProof = (imageUrl) => {
-  proofDialog.value.imageUrl = imageUrl
-  proofDialog.value.visible = true
-}
-
 const viewDetails = (transfer) => {
   detailDialog.value.transfer = transfer
   detailDialog.value.visible = true
@@ -1072,6 +1060,11 @@ onMounted(async () => {
   color: #67c23a;
 }
 
+.amount-red {
+  font-weight: bold;
+  color: #ff4949;
+}
+
 .pagination-container {
   margin-top: 20px;
   text-align: right;
@@ -1118,6 +1111,13 @@ onMounted(async () => {
   text-decoration: underline;
 }
 
+.avatar {
+  width: 100px;
+  height: 100px;
+  display: block;
+  object-fit: cover;
+}
+
 .pay-detail-text {
   white-space: pre-line;
   word-break: break-word;