workApp/components/popupPreviewFile.vue

<template>
	<uni-popup ref="popupDialog" :animation="false" :is-mask-click="isMaskClick">
		<uni-icons @click="CloseDialog" class="colse" type="closeempty" size="24"></uni-icons>
		<!-- 图片 -->
		<image v-if="fileTypeBySuffix=='image'" class="img_width" @click="CloseDialog" :src="filePath" mode="aspectFit"></image>
		<video v-else-if="fileTypeBySuffix=='video'" id="fileVideo" :src="filePath" @error="videoErrorCallback"></video>
		<audio v-else-if="fileTypeBySuffix=='audio'" :src="filePath"></audio>
		<template v-else-if="['word','excel','pptx','pdf','txt'].includes(fileTypeBySuffix)">
			<template v-if="uniPlatform=='web'">
				<!-- 默认指H5端 此插件只支持h5 PDF、Word、Excel、PPTX、TXT预览-->
				<wg-h5-preview-file ref="webPreviewFile" :value="filePath" :name="fileName" :type="fileTypeBySuffix" @CloseDialog="CloseDialog" />
			</template>
			<template v-else-if="uniPlatform=='app'">
				<!-- App端 -->
			</template>
			<template v-else-if="uniPlatform=='mp-weixin'">
				<!-- 微信小程序端 -->
			</template>
			<template v-else>
				<view class="other_file"><text>不支持预览，请点击下载: </text><text style="color: #2e64fa;font-size: 28rpx;" @click="ToDownloadFile">{{fileName}}</text></view>
			</template>
		</template>
		<template v-else>
			<view class="other_file"><text>不支持预览，请点击下载: </text><text style="color: #2e64fa;font-size: 28rpx;" @click="ToDownloadFile">{{fileName}}</text></view>
		</template>
	</uni-popup>
</template>

<script setup>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import wgH5PreviewFile from '@/components/wg-h5-preview-file/wg-h5-preview-file.vue';
	import { getFileTypeBySuffix } from '@/common/common.js';
	import {computed, reactive,ref,nextTick} from 'vue';
	const props = defineProps({
		isMaskClick:{//蒙版点击是否关闭弹窗
			type: Boolean,
			default: true
		},
		fileType:{//文件后缀
			type: String,
			default: ''
		},
		filePath:{//文件路径
			type: String,
			default: ''
		},
		fileName:{//文件名称
			type: String,
			default: ''
		},
	})
	const emit = defineEmits(['ToDownloadFile']);//下载
	const fileTypeBySuffix = computed(()=>{//获取文件类型
		return getFileTypeBySuffix(props.fileType)
	});
	const uniPlatform = uni.getSystemInfoSync().uniPlatform;// 运行平台
	const state = reactive({});
	const popupDialog = ref(null);
	const webPreviewFile = ref(null);//web端文件预览
	//打开弹窗
	const OpenDialog = () => {
		popupDialog.value?.open();
		if(['word','excel','pptx','pdf','txt'].includes(fileTypeBySuffix.value)){
			if(uniPlatform=='web'){
				nextTick(()=>{
					webPreviewFile.value && webPreviewFile.value.preview({
						url: props.filePath,
						type: fileTypeBySuffix.value
					});
				})
			}
			
		}
	}
	//下载
	const ToDownloadFile = () => {
		emit('ToDownloadFile',{
			fileType:props.fileType,
			filePath:props.filePath,
			fileName:props.fileName
		})
	};
	//关闭弹框
	const CloseDialog = () => {
		console.log(121212)
		popupDialog.value?.close();
	}
	defineExpose({
		OpenDialog
	})
</script>

<style scoped lang="scss">
	:deep(.maskClass){
		background-color: rgba(0, 0, 0, 0.8) !important;
	}
	.img_width{
		width: 750rpx;
		height: 80vh;
	}
	.other_file{
		margin: 0 auto;
		background: #ffffff;
		min-height: 160rpx;
		height: auto;
		display: flex;
		width: 670rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}
	.colse{
		position: fixed;
		box-sizing: border-box;
		top: 0px;
		right: 0px;
		width: 60px;
		height: 44px;
		padding: 6px;
		line-height: 32px;
		font-size: 26px;
		color: #fff !important;
		text-align: center;
		z-index:99;
	}
</style>