二手车交易，全部页面&对接部分接口

src/views/secondHandCar/components/upload-common.vue

@@ -0,0 +1,154 @@
+<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>-->
+</template>
+
+<script>
+import {ocrHandler, uploadImage} from "@/api/mine";
+export default {
+  name: "uploadCommon",
+  props:{
+    text:{
+      type:String,
+      default:''
+    },
+    multiple:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data(){
+    return{
+      files: [],
+
+    }
+  },
+    methods:{
+      deleteHandle(file,detail){
+        console.log("file,detail",file,detail)
+      },
+      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)
+        }
+      },
+      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{
+}
+.upload:last-child{
+  //margin-right: 0px !important;
+
+}
+.upload{
+  //margin-right: 5px;
+  position: relative;
+  width: 105px;
+  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;
+  //margin-left: 4px;
+
+}
+::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; /* 强制隐藏伪元素 */
+}
+::v-deep .van-uploader__wrapper{
+  justify-content: space-between;
+}
+</style>