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