改完后的transfers（没有解决按钮问题）

src/views/Transfers.vue

@@ -206,13 +206,13 @@
                 </div>
                 <!-- 确认收款操作按钮 -->
                 <div 
-                  v-if="transfer.status === 'confirmed' && transfer.to_user_id === userStore.user.id" 
+                  v-if="transfer.status === 'confirmed' && transfer.to_user_id !== userStore.user.id" 
                   class="transfer-actions"
                 >
                   <el-button 
                     type="success" 
                     size="small"
-                    @click="confirmReceived(transfer.id)"
+                    @click="showVoucherConfirmDialog(transfer)"
                     :loading="confirmLoading"
                   >
                     确认收款
@@ -237,8 +237,115 @@
       </el-card>
     </div>
 
-    <!-- 其余对话框保持不变 -->
+    <!-- 转账凭证查看对话框 -->
-    <!-- ... -->
+    <el-dialog 
+      v-model="showVoucherDialog" 
+      title="确认收款" 
+      width="90%"
+      :style="{ maxWidth: '600px' }"
+    >
+      <div class="voucher-dialog-content">
+        <div class="transfer-info">
+          <h4>转账信息</h4>
+          <div class="info-row">
+            <span class="label">转账金额：</span>
+            <span class="value amount">¥{{ currentTransfer.amount }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">转账说明：</span>
+            <span class="value">{{ currentTransfer.description }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">转账时间：</span>
+            <span class="value">{{ formatTime(currentTransfer.created_at) }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">转账类型：</span>
+            <span class="value">{{ getTransferTypeText(currentTransfer.transfer_type) }}</span>
+          </div>
+        </div>
+        
+        <div class="voucher-section" v-if="currentTransfer.voucher_url">
+          <h4>转账凭证</h4>
+          <div class="voucher-image-container">
+            <el-image 
+              :src="formatImageUrl(currentTransfer.voucher_url)" 
+              :preview-src-list="[formatImageUrl(currentTransfer.voucher_url)]"
+              class="voucher-preview"
+              fit="contain"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><Picture /></el-icon>
+                  <p>凭证加载失败</p>
+                </div>
+              </template>
+            </el-image>
+          </div>
+        </div>
+        
+        <div v-else class="no-voucher">
+          <el-icon><Picture /></el-icon>
+          <p>暂无转账凭证</p>
+        </div>
+      </div>
+      
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showVoucherDialog = false">取消</el-button>
+          <el-button 
+            type="success" 
+            @click="doConfirmReceived"
+            :loading="confirmLoading"
+          >
+            确认收款
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 回款确认对话框 -->
+    <el-dialog
+      v-model="showReturnDialog"
+      title="确认回款"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form :model="returnForm" label-width="100px">
+        <el-form-item label="回款金额">
+          <el-input
+            v-model="returnForm.returnAmount"
+            type="number"
+            placeholder="请输入回款金额"
+            :disabled="true"
+          >
+            <template #append>元</template>
+          </el-input>
+        </el-form-item>
+        
+        <el-form-item label="备注说明">
+          <el-input
+            v-model="returnForm.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注说明"
+          />
+        </el-form-item>
+      </el-form>
+      
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showReturnDialog = false">取消</el-button>
+          <el-button 
+            type="success" 
+            @click="confirmReturn"
+            :loading="confirmLoading"
+          >
+            确认回款
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -264,6 +371,20 @@ const showReturnDialog = ref(false)
 const statusFilter = ref('')
 const currentTransfer = ref({})
 const currentAllocation = ref({})
+const confirmFormRef = ref(null)
+
+const confirmForm = reactive({
+  confirmedAmount: '',
+  remarks: ''
+})
+
+const confirmRules = {
+  confirmedAmount: [
+    { required: true, message: '请输入实际收到的金额', trigger: 'blur' },
+    { type: 'number', min: 0, message: '金额必须大于0', trigger: 'blur' }
+  ]
+}
+
 const returnForm = reactive({
   returnAmount: '',
   description: ''
@@ -529,46 +650,45 @@ const confirmReturn = async () => {
   }
 }
 
-const confirmReceived = async (transferId) => {
+const showVoucherConfirmDialog = (transfer) => {
-  try {
+  currentTransfer.value = transfer
-    const transfer = allTransferHistory.value.find(t => t.id === transferId);
+  showVoucherDialog.value = true
-    if (!transfer) {
+}
-      ElMessage.error('转账记录不存在');
-      return;
-    }
 
+const doConfirmReceived = async () => {
+  try {
     await ElMessageBox.confirm(
-      '请确认已收到款项并核对凭证，确定要确认收款吗？',
+      `确定已收到¥${currentTransfer.value.amount}款项吗？`,
       '确认收款',
       {
-        confirmButtonText: '确认收款',
+        confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'warning'
       }
-    );
+    )
     
-    confirmLoading.value = true;
+    confirmLoading.value = true
     
-    // 使用 transferAPI.confirmReceived 方法
+    const response = await transferAPI.confirmReceived(currentTransfer.value.id)
-    const response = await transferAPI.confirmReceived(transferId);
     
     if (response.data.success) {
-      ElMessage.success('收款确认成功');
+      ElMessage.success('收款确认成功')
-      await loadTransferHistory();
+      showVoucherDialog.value = false
-      await loadPendingTransfers();
+      await loadTransferHistory()
+      await loadPendingTransfers()
     }
   } catch (error) {
     if (error !== 'cancel') {
-      console.error('确认收款失败:', error);
+      console.error('确认收款失败:', error)
       const errorMsg = error.response?.data?.message || 
                       error.response?.data?.error?.message || 
-                      '确认收款失败';
+                      '确认收款失败'
-      ElMessage.error(errorMsg);
+      ElMessage.error(errorMsg)
     }
   } finally {
-    confirmLoading.value = false;
+    confirmLoading.value = false
   }
-};
+}
 
 const confirmNotReceived = async (transferId) => {
   try {
@@ -580,30 +700,29 @@ const confirmNotReceived = async (transferId) => {
         cancelButtonText: '取消',
         type: 'warning'
       }
-    );
+    )
     
-    confirmLoading.value = true;
+    confirmLoading.value = true
     
-    // 使用 transferAPI.confirmNotReceived 方法
+    const response = await transferAPI.confirmNotReceived(transferId)
-    const response = await transferAPI.confirmNotReceived(transferId);
     
     if (response.data.success) {
-      ElMessage.success(response.data.message || '操作成功');
+      ElMessage.success(response.data.message || '操作成功')
-      await loadTransferHistory();
+      await loadTransferHistory()
-      await loadPendingTransfers();
+      await loadPendingTransfers()
     }
   } catch (error) {
     if (error !== 'cancel') {
-      console.error('确认未收款失败:', error);
+      console.error('确认未收款失败:', error)
       const errorMsg = error.response?.data?.message || 
                       error.response?.data?.error?.message || 
-                      '操作失败';
+                      '操作失败'
-      ElMessage.error(errorMsg);
+      ElMessage.error(errorMsg)
     }
   } finally {
-    confirmLoading.value = false;
+    confirmLoading.value = false
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
@@ -884,6 +1003,100 @@ const confirmNotReceived = async (transferId) => {
   padding: 40px;
 }
 
+/* 凭证对话框样式 */
+.voucher-dialog-content {
+  .transfer-info {
+    margin-bottom: 20px;
+    padding: 16px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    
+    h4 {
+      margin: 0 0 12px 0;
+      color: #303133;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    
+    .info-row {
+      display: flex;
+      margin-bottom: 8px;
+      
+      .label {
+        min-width: 80px;
+        color: #606266;
+        font-weight: 500;
+      }
+      
+      .value {
+        color: #303133;
+        flex: 1;
+        
+        &.amount {
+          color: #e6a23c;
+          font-weight: 600;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  
+  .voucher-section {
+    h4 {
+      margin: 0 0 12px 0;
+      color: #303133;
+      font-size: 16px;
+      font-weight: 600;
+    }
+    
+    .voucher-image-container {
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      background-color: #f8f9fa;
+      border-radius: 8px;
+      border: 2px dashed #dcdfe6;
+      
+      .voucher-preview {
+        max-width: 100%;
+        max-height: 400px;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+  
+  .no-voucher {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 2px dashed #dcdfe6;
+    color: #909399;
+    
+    .el-icon {
+      font-size: 48px;
+      margin-bottom: 12px;
+    }
+    
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+  }
+}
+  
+.confirm-form {
+  margin-top: 20px;
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+
 @media (max-width: 768px) {
   .status-filter-nav {
     overflow-x: auto;