浏览代码

Merge branch '大连交通技师学院' of https://gogs.mtavip.com/wangguoyu/uniProject into 大连交通技师学院

tanxue 2 月之前
父节点
当前提交
bdcd7166bd

+ 45 - 0
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>

+ 13 - 0
components/MtaFooter.vue

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

+ 78 - 0
pages/dqgzDangjiangongzuoInfo/111111.vue

@@ -0,0 +1,78 @@
+<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>

+ 40 - 6
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

+ 5 - 0
pages/index/index.vue

@@ -45,9 +45,13 @@
 				<p>校企合作</p>
 			</view>
 		</view>
+
+    <MtaFooter></MtaFooter>
 		
 		<!-- 底部导航 -->
 		<MtaTabBarVue></MtaTabBarVue>
+
+
 	</view>
 </template>
 
@@ -63,6 +67,7 @@
 	import MtaNavbar from "@/components/MtaNavbar/MtaNavbar.vue";
 	import listTwoVue from "@/components/MtaCard/listTwo.vue";
 	import MtaTabBarVue from "@/components/MtaTabBar/MtaTabBar.vue";
+  import MtaFooter from "@/components/MtaFooter.vue"
 
 
 	const banners = ref('');