更改文件上传以及登录
This commit is contained in:
@@ -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: '身份证正面',
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user