This commit is contained in:
@@ -297,8 +297,8 @@
|
||||
v-model="usedDataForm.data_usage"
|
||||
:min="0"
|
||||
:max="usedDataMaxValue"
|
||||
:precision="usedDataForm.unit === 'MB' ? 0 : 3"
|
||||
:step="usedDataForm.unit === 'MB' ? 1 : 0.1"
|
||||
:precision="3"
|
||||
:step="0.1"
|
||||
class="used-data-input__number"
|
||||
placeholder="请输入新的套餐真实已用量"
|
||||
/>
|
||||
@@ -447,8 +447,8 @@
|
||||
return
|
||||
}
|
||||
|
||||
if (dataUsageMb === undefined || dataUsageMb < 0 || !Number.isInteger(dataUsageMb)) {
|
||||
callback(new Error('请输入可换算为非负整数 MB 的已用量'))
|
||||
if (dataUsageMb === undefined || dataUsageMb < 0) {
|
||||
callback(new Error('请输入可换算为非负数字 MB 的已用量'))
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
@@ -44,7 +44,6 @@
|
||||
/>
|
||||
<ElButton type="primary" @click="handleQuery">查询</ElButton>
|
||||
<ElButton @click="handleReset()">重置</ElButton>
|
||||
<ElTag type="info" size="small">共 {{ total }} 条</ElTag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -66,6 +65,14 @@
|
||||
|
||||
<div v-else v-loading="loading" class="wallet-table-wrapper">
|
||||
<ElTable v-if="hasTransactions" :data="transactionList" class="wallet-table" border>
|
||||
<ElTableColumn prop="reference_no" label="业务编号">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.reference_no" class="reference-no-link">
|
||||
{{ scope.row.reference_no }}
|
||||
</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="交易类型" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<ElTag :type="getTransactionTypeTag(scope.row.transaction_type)" size="small">
|
||||
@@ -103,14 +110,6 @@
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="reference_no" label="业务编号" min-width="180" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.reference_no" class="reference-no-link">
|
||||
{{ scope.row.reference_no }}
|
||||
</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="remark" label="备注" min-width="150" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
{{ scope.row.remark || '-' }}
|
||||
|
||||
@@ -44,17 +44,17 @@
|
||||
</ElOption>
|
||||
</ElSelect>
|
||||
<template v-if="noSeriesId">
|
||||
<div style=" margin-top: 4px; font-size: 12px;color: var(--el-text-color-warning)">
|
||||
<div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-warning)">
|
||||
该设备未关联套餐系列,无法购买套餐
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="packagesEmptyWithSeriesId">
|
||||
<div style=" margin-top: 4px; font-size: 12px;color: var(--el-text-color-info)">
|
||||
<div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-info)">
|
||||
该系列暂无可用套餐
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="selectedPackageIsGift">
|
||||
<div style=" margin-top: 4px; font-size: 12px;color: var(--el-color-warning)">
|
||||
<div style="margin-top: 4px; font-size: 12px; color: var(--el-color-warning)">
|
||||
提示: 赠送套餐只能使用线下支付方式,且必须上传支付凭证
|
||||
</div>
|
||||
</template>
|
||||
@@ -83,23 +83,13 @@
|
||||
label="支付凭证"
|
||||
prop="payment_voucher_key"
|
||||
>
|
||||
<ElUpload
|
||||
<VoucherUpload
|
||||
ref="uploadRef"
|
||||
class="payment-voucher-upload"
|
||||
drag
|
||||
:auto-upload="false"
|
||||
:on-change="handleVoucherFileChange"
|
||||
:on-remove="handleRemoveVoucher"
|
||||
accept="image/*"
|
||||
list-type="picture"
|
||||
:limit="1"
|
||||
>
|
||||
<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">支持 jpg、png 格式,文件大小不超过 5MB</div>
|
||||
</template>
|
||||
</ElUpload>
|
||||
v-model="form.payment_voucher_key"
|
||||
voucher-name="支付凭证"
|
||||
@uploading-change="voucherUploading = $event"
|
||||
@change="formRef?.validateField('payment_voucher_key')"
|
||||
/>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
@@ -111,7 +101,7 @@
|
||||
:loading="loading || voucherUploading"
|
||||
:disabled="voucherUploading"
|
||||
>
|
||||
{{ voucherUploading ? '图片上传中...' : '提交' }}
|
||||
{{ voucherUploading ? '凭证上传中...' : '提交' }}
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
@@ -119,24 +109,22 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, reactive, ref, watch } from 'vue'
|
||||
import { computed, reactive, ref, watch } from 'vue'
|
||||
import {
|
||||
ElButton,
|
||||
ElDialog,
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElIcon,
|
||||
ElMessage,
|
||||
ElOption,
|
||||
ElSelect,
|
||||
ElTag,
|
||||
ElUpload
|
||||
ElTag
|
||||
} from 'element-plus'
|
||||
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 { FormInstance, FormRules } from 'element-plus'
|
||||
import { OrderService, PackageManageService } from '@/api/modules'
|
||||
import type { CreateOrderRequest, PackageResponse } from '@/types/api'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import VoucherUpload from '@/components/business/VoucherUpload.vue'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
@@ -156,13 +144,12 @@
|
||||
|
||||
const userStore = useUserStore()
|
||||
const formRef = ref<FormInstance>()
|
||||
const uploadRef = ref<UploadInstance>()
|
||||
const uploadRef = ref<InstanceType<typeof VoucherUpload>>()
|
||||
const loading = ref(false)
|
||||
const voucherUploading = ref(false)
|
||||
const packageSearchLoading = ref(false)
|
||||
const packageOptions = ref<PackageResponse[]>([])
|
||||
const packagesEmptyWithSeriesId = ref(false)
|
||||
let activeVoucherUploadId = 0
|
||||
|
||||
const form = reactive({
|
||||
package_id: undefined as number | undefined,
|
||||
@@ -311,80 +298,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
const invalidateVoucherUploadState = (clearFileKey = false) => {
|
||||
activeVoucherUploadId += 1
|
||||
voucherUploading.value = false
|
||||
if (clearFileKey) {
|
||||
form.payment_voucher_key = undefined
|
||||
}
|
||||
}
|
||||
|
||||
const handleVoucherFileChange = async (uploadFile: UploadFile) => {
|
||||
const file = uploadFile.raw
|
||||
if (!file) return
|
||||
|
||||
const isImage = file.type.startsWith('image/')
|
||||
if (!isImage) {
|
||||
ElMessage.error('只能上传图片文件!')
|
||||
uploadRef.value?.clearFiles()
|
||||
return
|
||||
}
|
||||
|
||||
const isLt5M = file.size / 1024 / 1024 < 5
|
||||
if (!isLt5M) {
|
||||
ElMessage.error('图片大小不能超过 5MB!')
|
||||
uploadRef.value?.clearFiles()
|
||||
return
|
||||
}
|
||||
|
||||
const requestId = ++activeVoucherUploadId
|
||||
voucherUploading.value = true
|
||||
form.payment_voucher_key = undefined
|
||||
|
||||
try {
|
||||
ElMessage.info('正在上传支付凭证...')
|
||||
|
||||
const uploadUrlRes = await StorageService.getUploadUrl({
|
||||
file_name: file.name,
|
||||
content_type: file.type,
|
||||
purpose: 'attachment'
|
||||
})
|
||||
|
||||
if (uploadUrlRes.code !== 0) {
|
||||
if (requestId !== activeVoucherUploadId) return
|
||||
ElMessage.error(uploadUrlRes.msg || '获取上传地址失败')
|
||||
uploadRef.value?.clearFiles()
|
||||
return
|
||||
}
|
||||
|
||||
const { upload_url, file_key } = uploadUrlRes.data
|
||||
await StorageService.uploadFile(upload_url, file, file.type)
|
||||
|
||||
if (requestId !== activeVoucherUploadId) return
|
||||
|
||||
form.payment_voucher_key = file_key
|
||||
ElMessage.success('上传成功')
|
||||
nextTick(() => {
|
||||
formRef.value?.validateField('payment_voucher_key')
|
||||
})
|
||||
} catch (error: any) {
|
||||
if (requestId !== activeVoucherUploadId) return
|
||||
|
||||
console.error('上传支付凭证失败:', error)
|
||||
ElMessage.error(error?.message || '上传失败,请重试')
|
||||
form.payment_voucher_key = undefined
|
||||
uploadRef.value?.clearFiles()
|
||||
} finally {
|
||||
if (requestId === activeVoucherUploadId) {
|
||||
voucherUploading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveVoucher = () => {
|
||||
invalidateVoucherUploadState(true)
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
visible.value = false
|
||||
}
|
||||
@@ -447,10 +360,11 @@
|
||||
formRef.value?.resetFields()
|
||||
form.package_id = undefined
|
||||
form.payment_method = 'wallet'
|
||||
invalidateVoucherUploadState(true)
|
||||
form.payment_voucher_key = undefined
|
||||
voucherUploading.value = false
|
||||
packageOptions.value = []
|
||||
packagesEmptyWithSeriesId.value = false
|
||||
uploadRef.value?.clearFiles()
|
||||
uploadRef.value?.clearFiles(false)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -460,34 +374,4 @@
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-style: normal;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user