|
|
@@ -0,0 +1,61 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <uni-popup ref="popupRef" background-color="#fff" :animation="true" :is-mask-click="false" :mask-click="false">
|
|
|
+ <view class="icon-title-navBar-box">
|
|
|
+ <view @click="goUpPage" class="nav-bar-icon"></view>
|
|
|
+ <text class="nav-bar-title">合同预览</text>
|
|
|
+ </view>
|
|
|
+ <view class="pdf-box" style="height: calc(100vh - 60px);overflow-y: auto;">
|
|
|
+ <img v-for="item in imgList" mode="aspectFit" style="height: auto;width: 100%" :src="`data:image/png;base64,${item}`"
|
|
|
+ @click="previewBase64Image(`data:image/png;base64,${item}`)" class="pdf-img" />
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ base64ToPath
|
|
|
+ } from "image-tools";
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from "vue";
|
|
|
+ const imgList = ref([])
|
|
|
+ const popupRef = ref(null);
|
|
|
+
|
|
|
+ function showPDF(list) {
|
|
|
+ popupRef.value.open('bottom');
|
|
|
+ imgList.value = list;
|
|
|
+ }
|
|
|
+
|
|
|
+ function goUpPage() {
|
|
|
+ popupRef.value.close()
|
|
|
+ }
|
|
|
+
|
|
|
+ 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'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ defineExpose({
|
|
|
+ showPDF
|
|
|
+ })
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|
wangxy