From 2565d78042b7cc5ac500c4bac5edefdb7a046af5 Mon Sep 17 00:00:00 2001
From: cnf <3200815559@qq.com>
Date: 星期三, 17 九月 2025 14:04:52 +0800
Subject: [PATCH] Merge branch 'master' of http://43.142.96.171:8080/r/~cnf/HM_StandardPda-Browse
---
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