二手车交易，web端查看图片无法变回原本样子

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

@@ -3,10 +3,11 @@
       v-model="filesList"
       :after-read="handleFileRead"
       :before-delete="deleteHandle"
-      @click-upload="clickUpload"
       :preview-size="103"
       accept="image "
+      :preview-full-image="false"
       :max-count="multiple ? 6 : 1"
+      @click-preview="handlePreviewClick"
   >
     <div class="upload">
       <img class="icon" src="@/assets/secondHandCar/upload.png"/>
@@ -19,8 +20,8 @@
 </template>
 
 <script>
+import { ImagePreview } from 'vant';
 import {unifiedOCRWithCompress, uploadImage} from "@/api/mine";
-
 export default {
   name: "uploadCommon",
   props: {
@@ -39,7 +40,7 @@ export default {
   },
   data() {
     return {
-      filesList: ''
+      filesList: '',
     }
   },
   mounted() {
@@ -68,27 +69,43 @@ export default {
     },
   },
   methods: {
+    // 点击预览图片时触发
+    handlePreviewClick(file, detail) {
+      console.log('点击了预览图片', file, detail);
+      // 在这里实现自定义逻辑，例如全屏预览
+      this.showFullScreenPreview(file.url);
+    },
+    // 全屏预览
+    showFullScreenPreview(imageUrl) {
+      const images = this.filesList.map(file => file.url); // 所有图片的 URL
+      const index = this.filesList.findIndex(file => file.url === imageUrl); // 当前点击图片的索引
+      ImagePreview({
+        images,
+        startPosition: index, // 从当前点击的图片开始预览
+        closeable: true,
+        onClose: () => {
+          console.log('全屏预览已关闭');
+        }
+      });
+    },
     async deleteHandle(file, detail) {
-      console.log("file, detail", file, detail);
+      // console.log("file, detail", file, detail);
       this.filesList = this.filesList.filter((item) => item !== file);
-      console.log("this.filesList =", this.filesList)
+      // 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)
+        // 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)
+      // console.log("file.file",file.file)
       if(!file.file){
         this.$toast('获取文件失败，请重新上传')
       }
@@ -138,6 +155,38 @@ export default {
 </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;