uniProject/pages/dqgzDangjiangongzuoInfo/dqgzDangjiangongzuoInfo.vue

<template>
	<view class="dljt-page-box" v-if="data.info">
		<MtaNavbar></MtaNavbar>
		<view class="dljt-container-box">
			<!-- 详情页面 -->
			<view class="dljt-page-title">校园动态</view>
			<view class="dljt-page-content-box">
				<!-- 导航 -->
				<view class="dljt-breadcrumb-box">
					<view class="breadcrumb-text">首页</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-text">校园动态</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-active">学院新闻</view>
				</view>
				<view class="dljt-detail-box">
					<!-- 标题 -->
					<view class="detail-title">{{data.info.title}}</view>
					<!-- 时间 -->
					<view class="detail-data">{{formatDate.join('-') }}</view>
					<!-- 富文本 -->
					<MtaMpHtml class="dljt-editor-box" :content="data.info.content" ></MtaMpHtml>
					
					<!-- PDF -->
					<MtaPDFVue class="dljt-pdf-box" :pdfUrl="pdfUrl"></MtaPDFVue>
					
					<!-- 文件下载 -->
					<div class="return-footer-box">
						<view class="dljt-down-btn" @click="handleDownFile"></view>
					</div>
					
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<MtaFooter></MtaFooter>
	</view>
</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 {formatDateToYearMonthDay } from "@/utils/common.js"
  import MtaMpHtml from "@/components/MTAMpHtml/MtaMpHtml.vue"
  import MtaPDFVue from "@/components/MtaPDF.vue";
  import MtaFooter from "@/components/MtaFooter.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)
      }
        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)
  })

  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
		}).then(res => {
			data.info = res.data;
			console.log('dddd', data.info)
		})
	}
</script>

<style lang="scss">

</style>