feat: 新增营业执照上传组件
parent
5d651d626b
commit
9941449afb
|
|
@ -0,0 +1,83 @@
|
|||
<!-- src/components/LicenseUpload.vue -->
|
||||
<template>
|
||||
<div class="license-upload">
|
||||
<a-upload
|
||||
list-type="picture-card"
|
||||
:show-upload-list="false"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:disabled="!channelNo || uploading"
|
||||
>
|
||||
<img v-if="previewUrl" :src="previewUrl" class="preview-img" alt="预览" />
|
||||
<div v-else>
|
||||
<LoadingOutlined v-if="uploading" />
|
||||
<PlusOutlined v-else />
|
||||
<div class="upload-text">上传营业执照</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<div v-if="!channelNo" class="hint">请先选择所属渠道</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
|
||||
import { uploadCustomerFileApi } from '@/api/customer'
|
||||
|
||||
const props = defineProps({
|
||||
channelNo: { type: String, default: undefined }
|
||||
})
|
||||
const emit = defineEmits(['update:fileNo'])
|
||||
|
||||
const uploading = ref(false)
|
||||
const previewUrl = ref('')
|
||||
|
||||
function readAsBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => resolve(reader.result)
|
||||
reader.onerror = reject
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
async function handleBeforeUpload(file) {
|
||||
if (!props.channelNo) {
|
||||
message.warning('请先选择所属渠道')
|
||||
return false
|
||||
}
|
||||
uploading.value = true
|
||||
try {
|
||||
const fileBase64 = await readAsBase64(file)
|
||||
previewUrl.value = fileBase64
|
||||
const res = await uploadCustomerFileApi({ fileBase64, channelNo: props.channelNo })
|
||||
if (res.data.code === 200) {
|
||||
emit('update:fileNo', res.data.data.fileNo)
|
||||
message.success('上传成功')
|
||||
}
|
||||
} finally {
|
||||
uploading.value = false
|
||||
}
|
||||
return false
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.license-upload {
|
||||
display: inline-block;
|
||||
}
|
||||
.preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.upload-text {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.hint {
|
||||
color: #ff4d4f;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue