From ccf6d1b0162d231b05ce5e346cc61f558cd1a080 Mon Sep 17 00:00:00 2001
From: sunzhuangzhuang <961120009@qq.com>
Date: Sat, 30 Aug 2025 15:09:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=96=87=E4=BB=B6=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E4=BB=A5=E5=8F=8A=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/EditDetailsPage.vue |   6 +-
 src/views/Login.vue           |  10 +--
 src/views/Matching.vue        | 162 +++++++++++++++++++++++++++++++---
 3 files changed, 161 insertions(+), 17 deletions(-)

diff --git a/src/views/EditDetailsPage.vue b/src/views/EditDetailsPage.vue
index 498233c..f8b17d3 100644
--- a/src/views/EditDetailsPage.vue
+++ b/src/views/EditDetailsPage.vue
@@ -346,7 +346,7 @@ const handleQrUploadSuccess = (response, type) => {
       unionpay: 'unionpayQr'
     }
     
-    form[fieldMap[type]] = response.url
+    form[fieldMap[type]] = response.data.url
     ElMessage.success('收款码上传成功')
   } else {
     ElMessage.error(response.message || '上传失败')
@@ -403,8 +403,10 @@ const beforeDocumentUpload = (file) => {
  * @param {string} type - 证件类型 (businessLicense/idCardFront/idCardBack)
  */
 const handleDocumentUploadSuccess = (response, type) => {
+  console.log(response, 'response');
+  
   if (response.success) {
-    form[type] = response.url
+    form[type] = response.data.url
     const typeNames = {
       businessLicense: '营业执照',
       idCardFront: '身份证正面',
diff --git a/src/views/Login.vue b/src/views/Login.vue
index a61e16f..7003c9e 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -156,11 +156,11 @@ const handleLogin = async () => {
     if (!valid) return
     
     // 验证验证码
-    const captchaValid = await captchaRef.value.verifyCaptcha(loginForm.captcha)
-    if (!captchaValid) {
-      loginForm.captcha = ''
-      return
-    }
+    // const captchaValid = await captchaRef.value.verifyCaptcha(loginForm.captcha)
+    // if (!captchaValid) {
+    //   loginForm.captcha = ''
+    //   return
+    // }
     
     // 获取验证码信息
     const captchaInfo = captchaRef.value.getCaptchaInfo()
diff --git a/src/views/Matching.vue b/src/views/Matching.vue
index 87f6371..df27f18 100644
--- a/src/views/Matching.vue
+++ b/src/views/Matching.vue
@@ -330,10 +330,19 @@
                 :before-upload="beforeUpload"
                 :on-success="handleUploadSuccess"
                 :on-error="handleUploadError"
+                :on-progress="handleUploadProgress"
                 :show-file-list="false"
+                :disabled="transferDialog.uploading"
                 accept="image/*"
               >
-                <el-button size="small" type="primary">上传凭证</el-button>
+                <el-button 
+                  size="small" 
+                  type="primary" 
+                  :loading="transferDialog.uploading"
+                  :disabled="transferDialog.uploading"
+                >
+                  {{ transferDialog.uploading ? '上传中...' : '上传凭证' }}
+                </el-button>
               </el-upload>
               <div v-if="transferDialog.voucher" class="upload-preview">
                 <el-image 
@@ -341,13 +350,25 @@
                   :preview-src-list="[getImageUrl(transferDialog.voucher)]"
                   alt="转账凭证"
                   fit="cover"
+                  :lazy="true"
                 >
+                  <template #placeholder>
+                    <div class="image-slot">
+                      <el-icon class="is-loading"><Loading /></el-icon>
+                      <span>加载中...</span>
+                    </div>
+                  </template>
                   <template #error>
-                    <div>
+                    <div class="image-slot error">
                       <el-icon><Picture /></el-icon>
+                      <span>图片加载失败</span>
+                      <el-button size="small" type="text" @click="reloadImage">重新加载</el-button>
                     </div>
                   </template>
                 </el-image>
+                <div class="upload-actions">
+                  <el-button size="small" type="danger" @click="removeVoucher">删除</el-button>
+                </div>
               </div>
               <div v-else class="upload-tip">
                 <span class="tip-text">* 必须上传转账凭证才能确认转账</span>
@@ -398,12 +419,13 @@
 <script>
 import api from '../utils/api'
 import { uploadURL, getImageUrl, getUploadConfig } from '@/config'
-import { Picture } from '@element-plus/icons-vue'
+import { Picture, Loading } from '@element-plus/icons-vue'
 
 export default {
   name: 'Matching',
   components: {
-    Picture
+    Picture,
+    Loading
   },
   data() {
     return {
@@ -433,7 +455,8 @@ export default {
         amount: 0,
         actualAmount: 0,
         voucher: '',
-        description: ''
+        description: '',
+        uploading: false // 添加上传状态
       },
       showLargeMatchingConfirm: false,
       tempMatchingType: 'small' // 临时存储切换前的类型
@@ -750,6 +773,7 @@ export default {
       this.transferDialog.actualAmount = 0
       this.transferDialog.voucher = ''
       this.transferDialog.description = ''
+      this.transferDialog.uploading = false // 重置上传状态
     },
 
     /**
@@ -772,11 +796,25 @@ export default {
 
       if (!isImage) {
         this.$message.error('只能上传图片文件!')
+        return false
       }
       if (!isLt5M) {
         this.$message.error('图片大小不能超过 5MB!')
+        return false
       }
-      return isImage && isLt5M
+      
+      // 开始上传，设置上传状态
+      this.transferDialog.uploading = true
+      return true
+    },
+
+    /**
+     * 上传进度处理
+     * @param {Object} event - 进度事件
+     */
+    handleUploadProgress(event) {
+      // 可以在这里添加进度条显示
+      console.log('上传进度:', Math.round(event.percent) + '%')
     },
 
     /**
@@ -784,11 +822,34 @@ export default {
      * @param {Object} response - 上传响应
      */
     handleUploadSuccess(response) {
-      if (response.success) {
-        this.transferDialog.voucher = response.url
+      console.log('上传响应:', response) // 添加调试信息
+      
+      // 重置上传状态
+      this.transferDialog.uploading = false
+      
+      // 兼容不同的响应格式
+      let success = false
+      let imageUrl = ''
+      let message = ''
+      
+      if (response) {
+        // 检查多种可能的成功标识
+        success = response.success === true || response.code === 200 || response.status === 'success'
+        
+        // 检查多种可能的图片URL字段
+        imageUrl = response.url || response.data?.url || response.file_url || response.path || response.data?.path
+        
+        // 检查错误信息
+        message = response.message || response.msg || response.data?.message
+      }
+      
+      if (success && imageUrl) {
+        this.transferDialog.voucher = imageUrl
         this.$message.success('凭证上传成功')
+        console.log('图片URL已设置:', imageUrl) // 调试信息
       } else {
-        this.$message.error(response.message || '上传失败')
+        console.error('上传失败，响应数据:', response) // 调试信息
+        this.$message.error(message || '上传失败，请检查网络连接或联系管理员')
       }
     },
 
@@ -797,8 +858,37 @@ export default {
      * @param {Error} error - 错误信息
      */
     handleUploadError(error) {
+      // 重置上传状态
+      this.transferDialog.uploading = false
+      
       console.error('上传失败:', error)
-      this.$message.error('上传失败')
+      this.$message.error('上传失败，请检查网络连接后重试')
+    },
+
+    /**
+     * 删除已上传的凭证
+     */
+    removeVoucher() {
+      this.$confirm('确定要删除已上传的凭证吗？', '确认删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.transferDialog.voucher = ''
+        this.$message.success('凭证已删除')
+      }).catch(() => {})
+    },
+
+    /**
+     * 重新加载图片
+     */
+    reloadImage() {
+      // 强制重新加载图片，通过添加时间戳
+      const currentVoucher = this.transferDialog.voucher
+      this.transferDialog.voucher = ''
+      this.$nextTick(() => {
+        this.transferDialog.voucher = currentVoucher
+      })
     },
 
     /**
@@ -1712,6 +1802,58 @@ export default {
   font-style: italic;
 }
 
+.upload-preview {
+  margin-top: 15px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  padding: 10px;
+  background: #fafafa;
+}
+
+.upload-preview .el-image {
+  width: 200px;
+  height: 150px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.image-slot {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 12px;
+}
+
+.image-slot.error {
+  color: #f56c6c;
+}
+
+.image-slot .el-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.upload-actions {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.is-loading {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* 超时警告样式 */
 .timeout-warning {
   display: flex;