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="fileType=='image'" class="img_width" @click="CloseDialog" :src="filePath" mode="aspectFit"></image>
		<video v-else-if="fileType=='video'" ref="fileVideo" id="fileVideo" :src="filePath" style="width: 100%; object-fit: contain;"></video>
		<audio v-else-if="fileType=='audio'" :src="filePath" style="width: 100%;"></audio>
		<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 { getFileTypeBySuffix } from '@/common/common.js';
	import {computed, reactive,ref,nextTick,getCurrentInstance} from 'vue';
	import {onLoad} from '@dcloudio/uni-app';
	const props = defineProps({
		isMaskClick:{//蒙版点击是否关闭弹窗
			type: Boolean,
			default: true
		},
		fileType:{//文件后缀
			type: String,
			default: ''
		},
		filePath:{//文件路径
			type: String,
			default: ''
		},
		fileName:{//文件名称
			type: String,
			default: ''
		},
	})
	const videoCtx = ref(null);//播放器
	const emit = defineEmits(['ToDownloadFile']);//下载
	const state = reactive({});
	const popupDialog = ref(null);
	onLoad(() => {
		console.log(props.fileType,999)
		if(props.fileType=='video'){
			const instance = getCurrentInstance();
			videoCtx.value = uni.createVideoContext('fileVideo', instance.proxy);
		}
	})
	//打开弹窗
	const OpenDialog = () => {
		popupDialog.value?.open();
	}
	//下载
	const ToDownloadFile = () => {
		emit('ToDownloadFile',{
			fileType:props.fileType,
			filePath:props.filePath,
			fileName:props.fileName
		})
		popupDialog.value?.close();
	};
	//关闭弹框
	const CloseDialog = () => {
		videoCtx?.value?.pause();//暂停播放
		popupDialog.value?.close();
	}
	defineExpose({
		OpenDialog
	})
</script>

<style scoped lang="scss">
	:deep(.maskClass){
		background-color: rgba(0, 0, 0, 0.8) !important;
	}
	:deep(.uni-popup__wrapper){
		width: 100%;
	}
	.img_width{
		width: 100%;
		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;
		word-break: break-all;
	}
	.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>