fix: 拖拽上传
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 4m30s

This commit is contained in:
sexygoat
2026-05-18 13:11:40 +08:00
parent 894aea0e74
commit 14832f5c6f
9 changed files with 232 additions and 10 deletions

View File

@@ -176,7 +176,7 @@
</div>
</template>
</ElTableColumn>
<ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip/>
<ElTableColumn prop="msisdn" label="MSISDN" min-width="150" showOverflowTooltip />
<ElTableColumn prop="carrier_name" label="运营商" min-width="120" showOverflowTooltip />
<ElTableColumn prop="slot_position" label="卡槽位置" width="130">

View File

@@ -85,14 +85,19 @@
>
<ElUpload
ref="uploadRef"
class="payment-voucher-upload"
drag
:auto-upload="false"
:on-change="handleVoucherFileChange"
:on-remove="handleRemoveVoucher"
accept="image/*"
list-type="picture-card"
list-type="picture"
:limit="1"
>
<el-icon><Plus /></el-icon>
<el-icon class="payment-voucher-upload__icon"><UploadFilled /></el-icon>
<div class="payment-voucher-upload__text">
将支付凭证拖到此处<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">支持 jpgpng 格式文件大小不超过 5MB</div>
</template>
@@ -129,7 +134,7 @@
ElTag,
ElUpload
} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, UploadFile, UploadInstance } from 'element-plus'
import { OrderService, PackageManageService, StorageService } from '@/api/modules'
import type { CreateOrderRequest, PackageResponse } from '@/types/api'
@@ -457,4 +462,34 @@
justify-content: flex-end;
gap: 12px;
}
.payment-voucher-upload {
width: 100%;
:deep(.el-upload) {
width: 100%;
}
:deep(.el-upload-dragger) {
width: 100%;
padding: 24px 16px;
border-radius: 8px;
}
&__icon {
margin-bottom: 12px;
font-size: 28px;
color: var(--el-color-primary);
}
&__text {
font-size: 14px;
color: var(--el-text-color-regular);
em {
color: var(--el-color-primary);
font-style: normal;
}
}
}
</style>

View File

@@ -98,14 +98,19 @@
>
<ElUpload
ref="uploadRef"
class="payment-voucher-upload"
drag
:auto-upload="false"
:on-change="handleVoucherFileChange"
:on-remove="handleRemoveVoucher"
accept="image/*"
list-type="picture-card"
list-type="picture"
:limit="1"
>
<el-icon><Plus /></el-icon>
<el-icon class="payment-voucher-upload__icon"><UploadFilled /></el-icon>
<div class="payment-voucher-upload__text">
将支付凭证拖到此处<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">支持 jpgpng 格式文件大小不超过 5MB</div>
</template>
@@ -185,7 +190,7 @@
ElOption,
ElUpload
} from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import type {
AgentRecharge,
@@ -849,4 +854,34 @@
.agent-recharge-page {
height: 100%;
}
.payment-voucher-upload {
width: 100%;
:deep(.el-upload) {
width: 100%;
}
:deep(.el-upload-dragger) {
width: 100%;
padding: 24px 16px;
border-radius: 8px;
}
&__icon {
margin-bottom: 12px;
font-size: 28px;
color: var(--el-color-primary);
}
&__text {
font-size: 14px;
color: var(--el-text-color-regular);
em {
color: var(--el-color-primary);
font-style: normal;
}
}
}
</style>

View File

@@ -198,14 +198,19 @@
>
<ElUpload
ref="uploadRef"
class="payment-voucher-upload"
drag
:auto-upload="false"
:on-change="handleVoucherFileChange"
:on-remove="handleRemoveVoucher"
accept="image/*"
list-type="picture-card"
list-type="picture"
:limit="1"
>
<el-icon><Plus /></el-icon>
<el-icon class="payment-voucher-upload__icon"><UploadFilled /></el-icon>
<div class="payment-voucher-upload__text">
将支付凭证拖到此处<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">支持 jpgpng 格式文件大小不超过 5MB</div>
</template>
@@ -249,7 +254,7 @@
ShopService
} from '@/api/modules'
import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { UploadFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, UploadInstance, UploadFile } from 'element-plus'
import type {
Order,
@@ -1346,6 +1351,36 @@
height: 100%;
}
.payment-voucher-upload {
width: 100%;
:deep(.el-upload) {
width: 100%;
}
:deep(.el-upload-dragger) {
width: 100%;
padding: 24px 16px;
border-radius: 8px;
}
&__icon {
margin-bottom: 12px;
font-size: 28px;
color: var(--el-color-primary);
}
&__text {
font-size: 14px;
color: var(--el-text-color-regular);
em {
color: var(--el-color-primary);
font-style: normal;
}
}
}
:deep(.el-table__row.table-row-with-context-menu) {
cursor: pointer;
}