From 27294f1626cdb785fe4c7401dde3266db188ccf4 Mon Sep 17 00:00:00 2001
From: xwt <2740516069@qq.com>
Date: 星期四, 07 八月 2025 21:42:44 +0800
Subject: [PATCH] 来料检修改，附件图片放大

---
 pages/fileView/imageView.vue |   97 +++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/pages/fileView/imageView.vue b/pages/fileView/imageView.vue
index 1a7764f..d46327b 100644
--- a/pages/fileView/imageView.vue
+++ b/pages/fileView/imageView.vue
@@ -1,7 +1,18 @@
 <template>
   <view class="container">
-    <!-- 浣跨敤 <image> 缁勪欢鏄剧ず鍥剧墖 -->
-    <image :src="imageUrl" mode="widthFix" style="width: 100%;"></image>
+    <!-- 浣跨敤 <image> 缁勪欢鏄剧ず鍥剧墖锛屾坊鍔犵偣鍑讳簨浠� -->
+    <image 
+      :src="imageUrl" 
+      mode="aspectFit" 
+      class="preview-image"
+      @click="previewImage"
+      :style="{ width: '100%', height: '100%' }"
+    />
+    
+    <!-- 鏀惧ぇ鎻愮ず -->
+    <view class="zoom-hint">
+      <text class="hint-text">鐐瑰嚮鍥剧墖鍙斁澶ф煡鐪�</text>
+    </view>
   </view>
 </template>
 
@@ -9,13 +20,44 @@
 export default {
   data() {
     return {
-      imageUrl: "" ,// 鐢ㄤ簬瀛樺偍鍥剧墖鐨� URL
+      imageUrl: "", // 鐢ㄤ簬瀛樺偍鍥剧墖鐨� URL
     };
   },
   onLoad(options) {
     // 浠庨〉闈㈣烦杞殑鍙傛暟涓幏鍙栧浘鐗� URL
     if (options.url) {
       this.imageUrl = decodeURIComponent(options.url);
+    }
+  },
+  methods: {
+    // 鍥剧墖鏀惧ぇ棰勮
+    previewImage() {
+      // 浣跨敤uni.previewImage API瀹炵幇鍥剧墖鏀惧ぇ棰勮
+      uni.previewImage({
+        current: this.imageUrl, // 褰撳墠鏄剧ず鍥剧墖鐨勯摼鎺�
+        urls: [this.imageUrl], // 闇�瑕侀瑙堢殑鍥剧墖閾炬帴鍒楄〃
+        loop: false, // 鏄惁寮�鍚浘鐗囪疆鎾�
+        indicator: 'default', // 鍥剧墖鎸囩ず鍣ㄧ被鍨�
+        longPressActions: {
+          itemList: ['鍙戦�佺粰鏈嬪弸', '淇濆瓨鍥剧墖', '鏀惰棌'],
+          success: function (data) {
+            console.log('閫変腑浜嗙' + (data.tapIndex + 1) + '涓寜閽�');
+          },
+          fail: function (err) {
+            console.log(err.errMsg);
+          }
+        },
+        success: () => {
+          console.log('鍥剧墖棰勮鎴愬姛');
+        },
+        fail: (err) => {
+          console.error('鍥剧墖棰勮澶辫触:', err);
+          uni.showToast({
+            title: '鍥剧墖棰勮澶辫触',
+            icon: 'none'
+          });
+        }
+      });
     }
   }
 };
@@ -24,8 +66,57 @@
 <style scoped>
 .container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
+  background-color: #000;
+  position: relative;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 80vh;
+  object-fit: contain;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.preview-image:hover {
+  transform: scale(1.02);
+}
+
+.zoom-hint {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  z-index: 10;
+}
+
+.hint-text {
+  color: #fff;
+  font-size: 12px;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+  .preview-image {
+    max-height: 70vh;
+  }
+  
+  .zoom-hint {
+    bottom: 10px;
+    padding: 6px 12px;
+  }
+  
+  .hint-text {
+    font-size: 11px;
+  }
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.3