客户页面

package.json

@@ -7,6 +7,7 @@
 		"aliplayer": "^1.0.3",
 		"axios": "^1.7.2",
 		"dayjs": "^1.11.13",
+		"image-tools": "^1.4.0",
 		"jsencrypt": "^3.3.2",
 		"jsonp": "^0.2.1",
 		"pinia": "^2.1.7",

pages/admin/Hetong/Hetong.vue

@@ -8,7 +8,7 @@
 		</view>
 		<template v-if="tId">
 			<view class="pdf-box"> 
-			 <image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`"></image>
+			 <image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`" @click="previewBase64Image(`data:image/png;base64,${item}`)"></image>
 			</view>
 		</template>
 		<template v-else>
@@ -48,6 +48,8 @@
 	} from "@dcloudio/uni-app"
 	import writeSign from "@/components/writeSign/index.vue"
   import {throttleAdvanced} from "@/utils/common.js"
+  import { base64ToPath } from 'image-tools';
+
 	const tId = ref(null)
 	const info = ref({})
 	const popupRef = ref(null)
@@ -79,6 +81,25 @@
 		})
 	}
 
+  async function previewBase64Image(base64Data) {
+      try {
+        // 关键步骤：将 Base64 字符串转换为本地临时路径
+        // 此处以使用 image-tools 的 base64ToPath 为例
+        const localPath = await base64ToPath(base64Data);
+        // 调用 UniApp 的图片预览 API
+        uni.previewImage({
+          urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
+          current: 0, // 当前显示图片在 urls 数组中的索引
+        });
+      } catch (error) {
+        // 如果出现错误（如转换失败），隐藏加载提示并告知用户
+        console.error('预览失败:', error);
+        uni.showToast({
+          title: '预览失败',
+          icon: 'none'
+        });
+      }
+  }
 
 	function handleGoLishi() {
 		uni.redirectTo({

pages/admin/Hetong/HetongInfo.vue

@@ -8,7 +8,7 @@
       <template v-if="tId">
 		  <view class="pdf-box">
         <view class="pdf-box">
-          <image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`"></image>
+          <image v-for="item in imgList" mode="aspectFit" :src="`data:image/png;base64,${item}`" @click="previewBase64Image(`data:image/png;base64,${item}`)"></image>
         </view>
       </view>
       </template>
@@ -47,6 +47,7 @@ import {
 } from "@dcloudio/uni-app"
 import writeSign from "@/components/writeSign/index.vue"
 import {throttleAdvanced} from "@/utils/common.js"
+import {base64ToPath} from "image-tools";
 
 const tId = ref(null)
 
@@ -74,6 +75,26 @@ function init() {
   })
 }
 
+async function previewBase64Image(base64Data) {
+  try {
+    // 关键步骤：将 Base64 字符串转换为本地临时路径
+    // 此处以使用 image-tools 的 base64ToPath 为例
+    const localPath = await base64ToPath(base64Data);
+    // 调用 UniApp 的图片预览 API
+    uni.previewImage({
+      urls: [localPath], // 注意：urls 参数需要是数组，即使只预览一张图
+      current: 0, // 当前显示图片在 urls 数组中的索引
+    });
+  } catch (error) {
+    // 如果出现错误（如转换失败），隐藏加载提示并告知用户
+    console.error('预览失败:', error);
+    uni.showToast({
+      title: '预览失败',
+      icon: 'none'
+    });
+  }
+}
+
 function goUpPage() {
   uni.navigateBack()
 }