uniProject/pages/xydtXueyuanfengcaiInfo/xydtXueyuanfengcaiInfo.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" @click="handleGo('shouye')">首页</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-text">校园动态</view>
					<icon class="breadcrumb-jt"></icon>
					<view class="breadcrumb-text" @click="handleGo('xyfc')">学院风采</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>
					<!-- 其他 -->
					<view class="dljt-video-title" v-if="data.info.otherList && data.info.otherList.length">
						<view class="video-text">相关视频</view>
					</view>
					<view v-if="data.info.otherList && data.info.otherList.length">
						<view class="video-item-box" v-for="item in data.info.otherList" :key="item.id"
							@click="handleClick(item)">
							<!-- 图 -->
							<image :src="item.cover"></image>
							<!-- 内容 -->
							<view class="video-mask-box">
								<view class="video-data">[{{formatDateToYearMonthDay(item.createTime).join('-')}}]
								</view>
								<view class="video-title">{{item.title}}</view>
							</view>
						</view>
					</view>
				</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 MtaFooter from "@/components/MtaFooter.vue"


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


	onLoad(({
		id
	}) => {
		data.id = id;
		pageInit();
	})

	function handleClick(item) {
		uni.navigateTo({
			url: `/pages/xydtXueyuanfengcaiInfo/xydtXueyuanfengcaiInfo?id=${item.id}`
		})
	}


	function handleGo(code) {
		if (code == 'shouye') {
			uni.navigateTo({
				url: '/pages/index/index'
			})
		}
		if (code == 'xyfc') {
			uni.navigateTo({
				url: '/pages/xydtXueyuanfengcai/xydtXueyuanfengcai'
			})
		}
	}


	function pageInit() {
		httpApi.getDongtaiXueyuanFengcaiInfo({
			id: data.id
		}).then(res => {
			data.info = res.data;
		})
	}
</script>

<style>

</style>