flx:新增附件预览功能

components/form/FileUpload.vue

@@ -13,9 +13,10 @@
 		</lsj-upload>
 
 		<view class="w-file-list" :key="fileList.length">
-			<view v-for="(file, i) in fileList" class="w-file" :key="`file_${i}_${file.type}`" @click="downFile(i)">
+			<view v-for="(file, i) in fileList" class="w-file" :key="`file_${i}_${file.type}`" @click.stop="downFile(i)">
 				<image :src="getFileImgByType(file.name)" mode="aspectFit"></image>
 				<text class="w-file-name">{{file.name}}</text>
+				<text :class="{'mr_10': file.size}" @click.stop="onPreview(i)">预览</text>
 				<uni-tag v-if="file.size" :text="getSize(file.size)" size="mini" inverted></uni-tag>
 				<text style="margin-right: 20rpx;" v-if="file.progress < 100">{{ file.progress }}%</text>
 				<view v-else-if="!readonly" @click.stop="deleteFile(i, file)">
@@ -28,12 +29,15 @@
 				<video v-if="getType(iframeUrl) == 'video'" class="iframe" :src="iframeUrl"></video>
 				<image v-else-if="getType(iframeUrl) == 'image'" class="iframe" :src="iframeUrl">
 				</image>
+				<PreviewIframe @watchChild="watchChildClick" v-else :iframeUrl="iframeUrl"/>
+				
 			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
+	// import PreviewIframe from "@/components/previewIframe.vue"
 	import {
 		ref,
 		computed,
@@ -58,7 +62,7 @@
 		isImageLink
 	} from '@/utils/tool.js';
 	const emits = defineEmits(['update:modelValue', 'resize'])
-
+	import { encode } from 'js-base64';
 	defineExpose({
 		show
 	})
@@ -125,6 +129,12 @@
 		}
 	})
 
+	const watchChildClick = () => {
+		console.log("watchChildClick")
+		showDisplay.value = false;
+			showIframe.value = false;
+	}
+
 	onUnload(() => {
 		uni.$off('hideFp')
 		uni.$off('showFp')
@@ -242,11 +252,35 @@
 			showIframe.value = true;
 			iframeUrl.value = `${url}`;
 		} else {
-			window.open(`${url}`)
+			// window.open(`${url}`)
 		}
 		// openLocalFile(file.name, `${options.url}/${file.id}?name=${file.name}`)
 		// openLocalFile(file.name, `${BASE_URL}/image/${file.id}`)
 	}
+	function onPreview(i) {
+		const file = _value.value[i]
+		// const fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
+		// // 常见的图片文件后缀名
+		// const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
+		//  // 视频类型列表
+		// const videoTypes = ['mp4', 'webm', 'ogg'];
+		// 判断文件后缀名是否在常见图片文件后缀名数组中
+		console.log(file)
+		const url = file.url ? (file.url.includes("http://") ? file.url : `${BASE_URL}/image/${file.url}`) : `${BASE_URL}/image/${file.id}`;
+	
+		if (isVideoLink(`${url}`) || isImageLink(`${url}`)) {
+			// 是图片和视频
+			showDisplay.value = true;
+			showIframe.value = true;
+			iframeUrl.value = `${url}`;
+		} else {
+			// window.open(`${url}`)
+			showDisplay.value = true;
+			showIframe.value = true;
+			iframeUrl.value = `http://219.147.96.221:8012/onlinePreview?url=${encodeURIComponent(encode(url))}`;
+		}
+		// http://219.147.96.221:8012/onlinePreview?url=${encodeURIComponent(encode(src))}
+	}
 
 	function getSize(size) {
 		if (size > 1048576) {
@@ -293,6 +327,9 @@
 </script>
 
 <style lang="less" scoped>
+	.mr_10{
+		margin-right: 20rpx
+	}
 	.w-upload-btn {
 		padding: 10rpx;
 		background-color: #F7F7F7;
@@ -354,12 +391,12 @@
 		left: 50%;
 		top: 50%;
 		transform: translate(-50%, -50%);
-		width: 650rpx;
+		// width: 650rpx;
 		font-size: 0;
 
 		.iframe {
 			width: 100%;
-			height: 600rpx;
+			height: 1000rpx;
 		}
 	}
 </style>

components/headers/headers.vue

@@ -39,17 +39,25 @@
 		},
 		methods:{
 			goBackFn(){
-				// uni.navigateBack({
+				let pages = getCurrentPages();
-				// 	success: function() {
+				// let prevPage = pages[pages.length - 2]
-				// 		// console.log('getCurrentPages()',getCurrentPages())
+				console.log('prevPage', pages)
-				// 		// let page = getCurrentPages()[0]; //跳转页面成功之后
+				if(pages.length > 1) {
-				// 		// if(page.route=='pages/projectManage/projectManage'){
+					uni.navigateBack({
+						success: function() {
+							// console.log('getCurrentPages()',getCurrentPages())
+							// let page = getCurrentPages()[0]; //跳转页面成功之后
+							// if(page.route=='pages/projectManage/projectManage'){
 								
-				// 		// }
-				// 		// if (!page) return;
-				// 		// page.onLoad(); //如果页面存在，则重新刷新页面
 							// }
-				// })
+							// if (!page) return;
+							// page.onLoad(); //如果页面存在，则重新刷新页面
+						}
+					});
+					return
+				}
+
+
 				// uni.redirectTo({
 				// 	url: `/pages/workspace/workspace?current=${11}`
 				// });

components/previewIframe.vue

@@ -0,0 +1,37 @@
+<template>
+	<view>
+		<uni-icons @click="onClick" class="backImg" type="close" size="24"></uni-icons>
+        <iframe class="iframe" :src="iframeUrl"></iframe>
+	</view>
+</template>
+<script>
+	export default {
+		props:['iframeUrl'],
+		data() {
+			return {
+				mobileTopHeight: 0
+			};
+		},
+		mounted() {
+
+		},
+		methods:{
+			onClick() {
+				console.log('点击了');
+				this.$emit('watchChild');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.iframe {
+		width: 100vw;
+		height: 100vh;
+	}
+	.backImg {
+		position: absolute;
+		right: 20px;
+		top: 16px;
+	}
+</style>

main.js

@@ -4,6 +4,8 @@ import { createSSRApp } from 'vue'
 import "/utils/webview.js"
 //把表单字段组件注册到全局，解决跨平台兼容的容器组件循环引用问题
 import WFormItem from '@/components/WFormItem.vue'
+import PreviewIframe from '@/components/previewIframe.vue'
+
 import { Popup, Icon, Badge, Pagination } from 'vant';
 // import VueQuillEditor from "vue-quill-editor";
 // import "quill/dist/quill.core.css"; // import styles
@@ -13,6 +15,7 @@ import { Popup, Icon, Badge, Pagination } from 'vant';
 export function createApp() {
     const app = createSSRApp(App)
     app.component('WFormItem', WFormItem);
+    app.component('PreviewIframe', PreviewIframe);
     // app.use(VueQuillEditor);
     app.use(Popup);
     app.use(Icon);

package-lock.json

@@ -12,6 +12,7 @@
         "@wangeditor/editor-for-vue": "^5.1.12",
         "clipboard": "^2.0.11",
         "dayjs": "^1.11.10",
+        "js-base64": "^3.7.7",
         "vant": "^4.9.7",
         "vue-quill-editor": "^3.0.6"
       },
@@ -935,6 +936,11 @@
       "resolved": "https://registry.npmmirror.com/is-url/-/is-url-1.2.4.tgz",
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww=="
     },
+    "node_modules/js-base64": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.7.tgz",
+      "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@wangeditor/editor-for-vue": "^5.1.12",
     "clipboard": "^2.0.11",
     "dayjs": "^1.11.10",
+    "js-base64": "^3.7.7",
     "vant": "^4.9.7",
     "vue-quill-editor": "^3.0.6"
   },

unpackage/dist/cache/.vite/deps/_metadata.json

@@ -1,43 +1,49 @@
 {
-  "hash": "d2335b50",
+  "hash": "3be55fd6",
   "configHash": "b0659917",
-  "lockfileHash": "bd53ab4e",
+  "lockfileHash": "f5a3c466",
-  "browserHash": "b117f9d5",
+  "browserHash": "3f2387fa",
   "optimized": {
     "@wangeditor/editor": {
       "src": "../../../../../node_modules/@wangeditor/editor/dist/index.esm.js",
       "file": "@wangeditor_editor.js",
-      "fileHash": "0c59de0e",
+      "fileHash": "6670cc30",
       "needsInterop": false
     },
     "@wangeditor/editor-for-vue": {
       "src": "../../../../../node_modules/@wangeditor/editor-for-vue/dist/index.esm.js",
       "file": "@wangeditor_editor-for-vue.js",
-      "fileHash": "b0be2a76",
+      "fileHash": "7f835cda",
       "needsInterop": false
     },
     "dayjs": {
       "src": "../../../../../node_modules/dayjs/dayjs.min.js",
       "file": "dayjs.js",
-      "fileHash": "3f5a6ccc",
+      "fileHash": "d66d7f1d",
       "needsInterop": true
     },
     "vant": {
       "src": "../../../../../node_modules/vant/es/index.mjs",
       "file": "vant.js",
-      "fileHash": "448d5b42",
+      "fileHash": "0c7c7cc2",
       "needsInterop": false
     },
     "vue-quill-editor": {
       "src": "../../../../../node_modules/vue-quill-editor/dist/vue-quill-editor.js",
       "file": "vue-quill-editor.js",
-      "fileHash": "fb242545",
+      "fileHash": "638ada97",
       "needsInterop": true
     },
     "@icon-park/vue-next": {
       "src": "../../../../../node_modules/@icon-park/vue-next/es/index.js",
       "file": "@icon-park_vue-next.js",
-      "fileHash": "f1f87ffe",
+      "fileHash": "9fa7c593",
+      "needsInterop": false
+    },
+    "js-base64": {
+      "src": "../../../../../node_modules/js-base64/base64.mjs",
+      "file": "js-base64.js",
+      "fileHash": "af862ef2",
       "needsInterop": false
     }
   },