新增转账详情

src/views/Transfers.vue

@@ -145,6 +145,17 @@
             <span class="amount">¥{{ row.amount }}</span>
           </template>
         </el-table-column>
+
+        <el-table-column label="转账详情" width="175">
+          <template #default="{ row }">
+            <div v-if="row.status === 'confirmed'" class="detail-container">
+              <div class="amount" style="text-align: center;">实际支付：¥{{ row.near_payment }}</div>
+              <el-tag :type="getPayTagType(row.pay_method)">{{ row.pay_method }}</el-tag>
+              <div @click="showPayDetail(row)" class="detail-buttom">识别结果</div>
+            </div>
+          </template>
+        </el-table-column>
+
         <el-table-column label="状态" width="100">
           <template #default="{ row }">
             <el-tag :type="getStatusTagType(row.status)">
@@ -175,7 +186,7 @@
             {{ row.confirmed_at ? formatDate(row.confirmed_at) : '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="280" fixed="right">
+        <el-table-column label="操作" width="220" fixed="right">
           <template #default="{ row }">
             <template v-if="row.transfer_type === 'user_to_user'">
               <template v-if="row.status === 'confirmed'">
@@ -255,7 +266,7 @@
     <el-dialog v-model="createDialog.visible" title="分配转账" width="500px">
       <el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="100px">
         <el-form-item label="转出用户" prop="from_user_id">
-          <el-select v-model="createForm.from_user_id" placeholder="选择转出用户" @change="onFromUserChange">
+          <el-select v-model="createForm.from_user_id" placeholder="选择转出用户" @change="onFromUserChange" filterable>
             <el-option
               v-for="user in users"
               :key="user.id"
@@ -412,6 +423,17 @@
         </span>
       </template>
     </el-dialog>
+
+    <!-- 支付详情对话框 -->
+    <el-dialog
+      v-model="payDetailDialog.visible"
+      title="支付详情"
+      width="500px"
+    >
+      <div class="pay-detail-text">
+        {{ payDetailDialog.text }}
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -526,6 +548,11 @@ const forceChangeRules = {
   ]
 }
 
+const payDetailDialog = ref({
+  visible: false,
+  text: ''
+})
+
 // 方法
 /**
  * 获取转账记录列表
@@ -861,6 +888,14 @@ const getStatusTagType = (status) => {
   return statusMap[status] || ''
 }
 
+const getPayTagType = (payMethod) => {
+  const payMap = {
+    '信用卡': 'danger',
+    '花呗': 'danger'
+  }
+  return payMap[payMethod] || 'info'
+}
+
 const formatDate = (dateString) => {
   if (!dateString) return '-'
   return new Date(dateString).toLocaleString('zh-CN')
@@ -950,6 +985,11 @@ const createTransfer = async () => {
   }
 }
 
+const showPayDetail = (transfer) => {
+  payDetailDialog.value.visible = true
+  payDetailDialog.value.text = transfer.describe_orc
+}
+
 
 
 
@@ -1062,10 +1102,6 @@ onMounted(async () => {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.detail-container {
-  padding: 20px 0;
-}
-
 .proof-section {
   margin-top: 20px;
 }
@@ -1082,6 +1118,31 @@ onMounted(async () => {
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
 }
 
+.detail-container {
+  display: grid;
+  place-items: center;
+}
+
+.detail-buttom {
+  color: #409eff;
+  cursor: pointer;
+  font-size: 10px;
+}
+
+.detail-buttom:hover {
+  text-decoration: underline;
+}
+
+.pay-detail-text {
+  white-space: pre-line;
+  word-break: break-word;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  border-left: 3px solid #409eff;
+  font-size: large;
+}
+
 .user-balance-info {
   margin-top: 5px;
   padding: 5px 10px;