pdf

components/MTAMpHtml/MtaMpHtml.vue

@@ -0,0 +1,45 @@
+<template>
+  <mp-html @fullscreenchange="handleFullscreen" :content="props.content" />
+</template>
+
+<script setup>
+import {
+  ref,
+  onMounted,
+  onUnmounted
+} from "vue";
+import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
+
+const isFullscreen = ref(false)
+const props = defineProps({
+  content: {
+    type: String,
+    default: ''
+  }
+})
+
+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
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+})
+</script>

components/MtaFooter.vue

@@ -0,0 +1,13 @@
+<template>
+	<view>
+		这里是footer
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>

pages/dqgzDangjiangongzuoInfo/dqgzDangjiangongzuoInfo.vue

@@ -9,14 +9,16 @@
 		<!-- 时间 -->
 		<view>{{formatDate.join('-') }}</view>
 		<!-- 富文本 -->
-		<mp-html :content="data.info.content" />
+<!--		<mp-html @fullscreenchange="handleFullscreen" :content="data.info.content" />-->
+    <MtaMpHtml :content="data.info.content" ></MtaMpHtml>
 		
+		<view @click="handleDownFile">文件下载</view>
 		<!-- PDF -->
-		<web-view
+<!-- 		<web-view
 		      v-if="pdfUrl" 
 		      :src="pdfUrl" 
 		      class="web-view"
-		    ></web-view>
+		    ></web-view> -->
 	</view>
 </template>
 
@@ -24,20 +26,22 @@
 	import {
 		ref,
 		reactive,
-		computed
+		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"
+  import MtaMpHtml from "@/components/MTAMpHtml/MtaMpHtml.vue"
 
 	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)
@@ -54,6 +58,36 @@
 		pageInit();
 	})
 
+  onMounted(() => {
+    // 监听全屏变化
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+  })
+
+  onUnmounted(() => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChange)
+    document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+  })
+
+  function handleFullscreen(e) {
+    // 处理全屏事件
+    isFullscreen.value = e.detail.fullscreen
+  }
+
+  function handleFullscreenChange() {
+    // 检查当前是否处于全屏状态
+    const fullscreenElement = document.fullscreenElement ||
+        document.webkitFullscreenElement
+    if (!fullscreenElement) {
+      // 如果退出全屏
+      isFullscreen.value = false
+    }
+  }
+
+	function handleDownFile() {
+		window.location.href = pdfUrl;
+	}
+
 	function pageInit() {
 		httpApi.getDangjianGongzuoInfo({
 			id: data.id