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

<template>
  <van-uploader
      v-model="filesList"
      :after-read="handleFileRead"
      :before-delete="deleteHandle"
      :preview-size="103"
      accept="image "
      :preview-full-image="false"
      :max-count="multiple ? 6 : 1"
      @click-preview="handlePreviewClick"
      :deletable="showDel"
  >
    <div class="upload">
      <img class="icon" src="@/assets/secondHandCar/upload.png"/>
      <span class="text" v-show="!['交易合同','回收证明'].includes(displayText)">{{ 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 { ImagePreview } from 'vant';
import {unifiedOCRWithCompress, uploadImage} from "@/api/mine";
export default {
  name: "uploadCommon",
  props: {
    text: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    files: {
      type: Array,
      default: () => []
    },
    showDel:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      filesList: [],
    }
  },
  watch: {
    files: {
      immediate: true,
      deep:true,
      handler(newVal) {
        this.$nextTick(() => {
          this.filesList = newVal || [];
        })
      },
    },
    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: {
    // 点击预览图片时触发
    handlePreviewClick(file, detail) {
      this.showFullScreenPreview(file.url || file.content,detail);
    },
    // 全屏预览
    showFullScreenPreview(imageUrl,detail) {
      const images = this.filesList.map(file => file.url || file.content); // 所有图片的 URL
      ImagePreview({
        images,
        startPosition: detail.index,
        closeable: true,
        onClose: () => {}
      });
    },
    async deleteHandle(file, detail) {
      this.filesList = this.filesList.filter((item, i) => i !== detail.index);
      if (this.text === "行驶证照片") {
        this.$emit("delete1");
      } else if (this.text === "车辆45度照") {
        this.$emit("delete2");
      } else if(this.text == '车辆后方45度') {
        this.$emit("delete4");
      } else {
        console.log("file, detail", file, detail)
        this.$emit("delete3", file, detail.index);
      }
      return true;
    },
    async handleFileRead(file) {
      const formData = new FormData();
      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 if(this.text == '车辆后方45度') {
        this.$emit('success4', {url: res?.data, uid: file.uid})
      } 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-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}
.custom-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-preview img {
  max-width: 90%;
  max-height: 90%;
}

.close-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.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>