Files
supplier-dispatch-h5/src/views/secondHandCar/components/upload-common.vue

216 lines
5.4 KiB
Vue

<template>
<van-uploader
v-model="filesList"
:after-read="handleFileRead"
:before-delete="deleteHandle"
@click-upload="clickUpload"
:preview-size="103"
accept="image "
:max-count="multiple ? 6 : 1"
>
<div class="upload">
<img class="icon" src="@/assets/secondHandCar/upload.png"/>
<span class="text">{{ displayText }}</span>
</div>
<template v-if="text.includes('其他照片')" #preview-cover="{ index }">
<div class="preview-cover van-ellipsis">{{ index + 1 }}/6</div>
</template>
</van-uploader>
</template>
<script>
import {unifiedOCRWithCompress, uploadImage} from "@/api/mine";
export default {
name: "uploadCommon",
props: {
text: {
type: String,
default: ''
},
multiple: {
type: Boolean,
default: false
},
files: {
type: Array,
default: () => []
}
},
data() {
return {
filesList: ''
}
},
mounted() {
this.filesList = this.files || []; // 确保 filesList 是数组
},
watch: {
files: {
immediate: true, // 立即执行一次
handler(newVal) {
this.filesList = newVal || []; // 同步更新 filesList
},
},
filesList: {
handler(newVal) {
this.$emit("update:files", newVal);
},
deep: true, // 深度监听
},
},
computed: {
displayText() {
if (this.text === "其他照片0/6") {
return `其他照片 ${this.filesList.length}/${this.multiple ? 6 : 1}`;
}
return this.text;
},
},
methods: {
async deleteHandle(file, detail) {
console.log("file, detail", file, detail);
this.filesList = this.filesList.filter((item) => item !== file);
console.log("this.filesList =", this.filesList)
// 根据 text 的不同,通知父组件删除对应的数据
if (this.text === "行驶证照片") {
this.$emit("delete1"); // 通知父组件删除行驶证数据
} else if (this.text === "车辆45度照") {
this.$emit("delete2"); // 通知父组件删除车辆45度照数据
} else {
console.log("delete3", file)
this.$emit("delete3", file, detail.index); // 通知父组件删除其他照片数据
}
return true;
},
clickUpload(){
console.log("是否点击了上传照片组件",this.text)
},
async handleFileRead(file) {
const formData = new FormData();
console.log("file.file",file.file)
if(!file.file){
this.$toast('获取文件失败,请重新上传')
}
formData.append("file", file.file);
let res = await uploadImage(formData);
// 为文件添加唯一标识符
file.uid = Date.now(); // 使用时间戳作为唯一标识符
if (this.text == '行驶证照片') {
// 行驶证识别
let result = await unifiedOCRWithCompress({
ocrType: 3,
imageUrl: res.data,
cardSide: 'FRONT'
});
let data = {url: res?.data, info: {...result?.data?.frontInfo}}
this.$emit('success1', data)
} else if (this.text == '车辆45度照') {
let result = await unifiedOCRWithCompress({
ocrType: 10,
imageUrl: res.data,
cardSide: 'FRONT'
});
let num = this.getVehicleLicense(result.data.color)
let data = {url: res?.data, colorStr: result.data.color, colorStatus: num, plateType: result.data.number}
this.$emit('success2', data)
} else {
this.$emit('success3', {url: res?.data, uid: file.uid})
}
},
getVehicleLicense(color) {
let vehicleLicense = ''
if (color == '蓝') {
vehicleLicense = 1
} else if (color == '黄') {
vehicleLicense = 2
} else if (color == '临牌') {
vehicleLicense = 4
} else if (color.includes('绿')) {
vehicleLicense = 3
} else {
vehicleLicense = 5
}
return vehicleLicense
},
}
}
</script>
<style scoped lang="scss">
.preview-cover {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 4px;
color: #fff;
font-size: 12px;
text-align: center;
background: rgba(0, 0, 0, 0.3);
}
::v-deep .van-uploader {
margin-bottom: 5px;
}
.upload {
position: relative;
width: 103px;
height: 70px;
background: #F1F6FF;
box-shadow: 0px 0px 2px 0px rgba(235, 235, 235, 0.38);
border-radius: 4px;
border: 1px solid #B8CBE9;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-top: 14px;
padding-bottom: 3px;
.icon {
width: 30px;
height: 30px;
}
.text {
width: 80px;
background: #5A6FFF;
border-radius: 7px;
opacity: 0.9;
text-align: center;
font-weight: 600;
font-size: 11px;
color: #FFFFFF;
}
}
::v-deep .van-uploader__preview {
margin: 0 4px 4px 0;
}
::v-deep .van-uploader__input-wrapper {
margin: 0 4px 4px 0;
}
::v-deep .van-uploader__preview-image {
height: 70px !important;
border-radius: 4px !important;
}
::v-deep .van-uploader__preview-delete {
background-image: url('@/assets/secondHandCar/delete.png'); /* 替换为你的图片路径 */
background-size: cover;
background-color: transparent;
border: none;
width: 15px;
height: 15px;
}
::v-deep .van-uploader__preview-delete-icon {
display: none !important; /* 强制隐藏伪元素 */
}
</style>