uniProject/pages/dqgzDangjiangongzuoInfo/111111.vue

<template>
	<mp-html @fullscreenchange="handleFullscreen" :content="data.info.content" />
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import * as httpApi from "@/api/common.js"
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {formatDateToYearMonthDay } from "@/utils/common.js"

	const data = reactive({
		info: null,
		id: null
	})
	const isFullscreen = ref(false)
	const formatDate = computed(() => {
      if (data.info && data.info.createTime) {
		return formatDateToYearMonthDay(data.info.createTime)
      }
        return []
    })

	const pdfUrl = "https://kf3.mtavip.com/api/upload/resource/uploadFile60eebb8881e94278bc46bedba12aece6.pdf"

	onLoad(({
		id
	}) => {
		data.id = id;
		pageInit();
	})
	onMounted(() => {
		// 监听全屏变化
		document.addEventListener('fullscreenchange', handleFullscreenChange)
		document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
	})
	function handleFullscreen(e) {
		// 处理全屏事件
		isFullscreen.value = e.detail.fullscreen
	}
	
	function handleFullscreenChange() {
		// 检查当前是否处于全屏状态
		const fullscreenElement = document.fullscreenElement ||
			document.webkitFullscreenElement
		if (!fullscreenElement) {
			// 如果退出全屏
			isFullscreen.value = false
		}
	}
	function pageInit() {
		httpApi.getDangjianGongzuoInfo({
			id: data.id
		}).then(res => {
			data.info = res.data;
			console.log('dddd', data.info)
		})
	}
	onUnmounted(() => {
		document.removeEventListener('fullscreenchange', handleFullscreenChange)
		document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
	})
</script>

<style lang="scss">
.web-view {
	height: 200px;
	margin-top: 20px
}
</style>