优化提现相关页面。

src/views/finance/WithdrawList.vue

@@ -83,14 +83,81 @@
               复制
             </a-button>
           </template>
+          <!-- 操作列 -->
+          <template v-if="column.key === 'action'">
+            <a-space>
+              <a-button
+                v-if="record.status === 'PENDING'"
+                type="primary"
+                size="small"
+                @click="showApproveModal(record)"
+              >
+                审核通过
+              </a-button>
+              <a-button
+                v-if="record.status === 'PENDING'"
+                type="danger"
+                size="small"
+                @click="showRejectModal(record)"
+              >
+                拒绝提现
+              </a-button>
+            </a-space>
+          </template>
         </template>
       </a-table>
+
+      <!-- 审核模态框 -->
+      <a-modal
+        v-model:visible="approveModalVisible"
+        title="审核提现"
+        :confirmLoading="approveLoading"
+        @ok="handleApprove"
+      >
+        <a-form layout="vertical">
+          <a-form-item
+            label="银行流水号"
+            required
+            extra="请输入银行转账流水号"
+          >
+            <a-input
+              v-model:value="transactionId"
+              placeholder="请输入银行流水号"
+              :maxLength="50"
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
+      
+      <!-- 拒绝模态框 -->
+      <a-modal
+        v-model:visible="rejectModalVisible"
+        title="拒绝提现"
+        :confirmLoading="rejectLoading"
+        @ok="handleReject"
+      >
+        <a-form layout="vertical">
+          <a-form-item
+            label="拒绝原因"
+            required
+            extra="请输入拒绝提现的原因"
+          >
+            <a-textarea
+              v-model:value="rejectRemark"
+              placeholder="请输入拒绝原因"
+              :maxLength="200"
+              :rows="4"
+              show-count
+            />
+          </a-form-item>
+        </a-form>
+      </a-modal>
     </div>
   </page-container>
 </template>
 
 <script>
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, h } from 'vue'
 import { message } from 'ant-design-vue'
 import PageContainer from '@/components/PageContainer.vue'
 import request from '@/utils/request'
@@ -123,6 +190,16 @@ export default defineComponent({
         width: 80,
         align: 'center'
       },
+      {
+        title: '提现金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        width: 120,
+        align: 'right',
+        customRender: ({ text }) => {
+          return `¥${Number(text || 0).toFixed(2)}`
+        }
+      },
       {
         title: '姓名',
         dataIndex: 'name',
@@ -153,6 +230,12 @@ export default defineComponent({
         dataIndex: 'create_time',
         key: 'create_time',
         width: 180
+      },
+      {
+        title: '操作',
+        key: 'action',
+        width: 200,
+        align: 'center'
       }
     ]
 
@@ -251,6 +334,81 @@ export default defineComponent({
       }
     }
 
+    // 添加审核相关的状态和函数
+    const approveModalVisible = ref(false)
+    const approveLoading = ref(false)
+    const currentRecord = ref(null)
+    const transactionId = ref('')
+    
+    const showApproveModal = (record) => {
+      currentRecord.value = record
+      transactionId.value = ''
+      approveModalVisible.value = true
+    }
+    
+    const handleApprove = async () => {
+      if (!transactionId.value) {
+        message.error('请输入银行流水号')
+        return
+      }
+      
+      try {
+        approveLoading.value = true
+        const res = await request.post(`/api/withdraw/${currentRecord.value.id}/approve`, {
+          transaction_id: transactionId.value
+        })
+        
+        if (res.code === 200) {
+          message.success('审核通过成功')
+          approveModalVisible.value = false
+          fetchData()
+        } else {
+          throw new Error(res.message || '审核失败')
+        }
+      } catch (error) {
+        message.error(error.message || '审核失败')
+      } finally {
+        approveLoading.value = false
+      }
+    }
+    
+    // 添加拒绝相关的状态和函数
+    const rejectModalVisible = ref(false)
+    const rejectLoading = ref(false)
+    const rejectRemark = ref('')
+    
+    const showRejectModal = (record) => {
+      currentRecord.value = record
+      rejectRemark.value = ''
+      rejectModalVisible.value = true
+    }
+    
+    const handleReject = async () => {
+      if (!rejectRemark.value) {
+        message.error('请输入拒绝原因')
+        return
+      }
+      
+      try {
+        rejectLoading.value = true
+        const res = await request.post(`/api/withdraw/${currentRecord.value.id}/reject`, {
+          remark: rejectRemark.value
+        })
+        
+        if (res.code === 200) {
+          message.success('已拒绝提现申请')
+          rejectModalVisible.value = false
+          fetchData()
+        } else {
+          throw new Error(res.message || '操作失败')
+        }
+      } catch (error) {
+        message.error(error.message || '操作失败')
+      } finally {
+        rejectLoading.value = false
+      }
+    }
+
     onMounted(() => {
       fetchData()
     })
@@ -267,7 +425,17 @@ export default defineComponent({
       handleReset,
       getStatusText,
       getStatusColor,
-      copyText
+      copyText,
+      approveModalVisible,
+      approveLoading,
+      transactionId,
+      showApproveModal,
+      handleApprove,
+      rejectModalVisible,
+      rejectLoading,
+      rejectRemark,
+      showRejectModal,
+      handleReject
     }
   }
 })