二手车交易，全部接口对接
This commit is contained in:
@ -1,108 +1,159 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<van-uploader
|
||||
v-model="files"
|
||||
:after-read="handleFileRead"
|
||||
:before-delete="deleteHandle"
|
||||
:preview-size="105"
|
||||
accept="image "
|
||||
:max-size="5 * 1024 * 1024"
|
||||
:max-count="multiple ? 6 : 1"
|
||||
>
|
||||
<div class="upload">
|
||||
<img class="icon" src="@/assets/secondHandCar/upload.png" />
|
||||
<span class="text">{{ text }}</span>
|
||||
</div>
|
||||
</van-uploader>
|
||||
<!-- </div>-->
|
||||
<van-uploader
|
||||
v-model="filesList"
|
||||
:after-read="handleFileRead"
|
||||
:before-delete="deleteHandle"
|
||||
:preview-size="103"
|
||||
accept="image "
|
||||
:max-size="5 * 1024 * 1024"
|
||||
: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 {ocrHandler, uploadImage} from "@/api/mine";
|
||||
|
||||
export default {
|
||||
name: "uploadCommon",
|
||||
props:{
|
||||
text:{
|
||||
type:String,
|
||||
default:''
|
||||
props: {
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
multiple:{
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
files: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
files: [],
|
||||
|
||||
data() {
|
||||
return {
|
||||
filesList: ''
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
deleteHandle(file,detail){
|
||||
console.log("file,detail",file,detail)
|
||||
mounted() {
|
||||
this.filesList = this.files || []; // 确保 filesList 是数组
|
||||
},
|
||||
watch: {
|
||||
files: {
|
||||
immediate: true, // 立即执行一次
|
||||
handler(newVal) {
|
||||
this.filesList = newVal || []; // 同步更新 filesList
|
||||
},
|
||||
async handleFileRead(file) {
|
||||
const formData = new FormData();
|
||||
formData.append("file" , file.file);
|
||||
let res = await uploadImage(formData);
|
||||
console.log("res",res)
|
||||
if(this.text == '行驶证照片'){
|
||||
// 行驶证识别
|
||||
let result = await ocrHandler({
|
||||
ocrType: 3,
|
||||
imageUrl: res.data,
|
||||
cardSide: 'FRONT'
|
||||
});
|
||||
// console.log("result",result)
|
||||
let data={url:res?.data,info:{...result?.data?.frontInfo}}
|
||||
this.$emit('success1',data)
|
||||
}else if(this.text == '车辆45度照'){
|
||||
let result = await ocrHandler({
|
||||
ocrType: 10,
|
||||
imageUrl: res.data,
|
||||
cardSide: 'FRONT'
|
||||
});
|
||||
// console.log("result",result)
|
||||
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',res?.data)
|
||||
}
|
||||
},
|
||||
filesList: {
|
||||
handler(newVal) {
|
||||
this.$emit("update:files", newVal);
|
||||
},
|
||||
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
|
||||
},
|
||||
}
|
||||
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;
|
||||
},
|
||||
async handleFileRead(file) {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file.file);
|
||||
let res = await uploadImage(formData);
|
||||
console.log("res", res)
|
||||
// 为文件添加唯一标识符
|
||||
file.uid = Date.now(); // 使用时间戳作为唯一标识符
|
||||
if (this.text == '行驶证照片') {
|
||||
// 行驶证识别
|
||||
let result = await ocrHandler({
|
||||
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 ocrHandler({
|
||||
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">
|
||||
::v-deep .van-uploader{
|
||||
.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);
|
||||
}
|
||||
.upload:last-child{
|
||||
//margin-right: 0px !important;
|
||||
|
||||
::v-deep .van-uploader {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.upload{
|
||||
//margin-right: 5px;
|
||||
|
||||
.upload {
|
||||
position: relative;
|
||||
width: 105px;
|
||||
width: 103px;
|
||||
height: 70px;
|
||||
background: #F1F6FF;
|
||||
box-shadow: 0px 0px 2px 0px rgba(235,235,235,0.38);
|
||||
box-shadow: 0px 0px 2px 0px rgba(235, 235, 235, 0.38);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #B8CBE9;
|
||||
display: flex;
|
||||
@ -113,11 +164,13 @@ export default {
|
||||
box-sizing: border-box;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 3px;
|
||||
.icon{
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.text{
|
||||
|
||||
.text {
|
||||
width: 80px;
|
||||
background: #5A6FFF;
|
||||
border-radius: 7px;
|
||||
@ -128,15 +181,20 @@ export default {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
::v-deep .van-uploader__preview{
|
||||
margin: 0;
|
||||
//margin-left: 4px;
|
||||
|
||||
::v-deep .van-uploader__preview {
|
||||
margin: 0 4px 4px 0;
|
||||
}
|
||||
::v-deep .van-uploader__preview-image{
|
||||
|
||||
::v-deep .van-uploader__input-wrapper {
|
||||
margin: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__preview-image {
|
||||
height: 70px !important;
|
||||
border-radius: 4px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__preview-delete {
|
||||
background-image: url('@/assets/secondHandCar/delete.png'); /* 替换为你的图片路径 */
|
||||
background-size: cover;
|
||||
@ -145,10 +203,8 @@ export default {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
::v-deep .van-uploader__preview-delete-icon {
|
||||
display: none !important; /* 强制隐藏伪元素 */
|
||||
}
|
||||
::v-deep .van-uploader__wrapper{
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user