From 0b49fd502a6da7fa6cfb2c9d6171867a0695bf04 Mon Sep 17 00:00:00 2001
From: zhouxueli <2841188632@qq.com>
Date: Mon, 17 Mar 2025 11:41:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E6=89=8B=E8=BD=A6=E4=BA=A4=E6=98=93?=
 =?UTF-8?q?=EF=BC=8Cweb=E7=AB=AF=E6=9F=A5=E7=9C=8B=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E5=8F=98=E5=9B=9E=E5=8E=9F=E6=9C=AC=E6=A0=B7?=
 =?UTF-8?q?=E5=AD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/upload-common.vue              | 69 ++++++++++++++++---
 1 file changed, 59 insertions(+), 10 deletions(-)

diff --git a/src/views/secondHandCar/components/upload-common.vue b/src/views/secondHandCar/components/upload-common.vue
index 17474dc7..a0c2520d 100644
--- a/src/views/secondHandCar/components/upload-common.vue
+++ b/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;