workApp/pages/notice/mine/detail.vue

<template>
	<view class="page_detail" :style="{ paddingBottom: safeAreaBottom + 'rpx' }">
		<common-header title="消息通知" @back="goBack"></common-header>

		<view class="detail_content" :style="{ paddingTop: statusBarHeight + 130 + 'rpx' }">
			<view class="detail_header">
				<text class="detail_title">{{ noticeDetail.noticeName }}</text>
				<view class="detail_meta">
					<view class="meta_left">
						<text class="meta_text">{{ noticeDetail.typeName }}</text>
						<text class="meta_text">{{ noticeDetail.createTeacherName }}</text>
						<text class="meta_text">{{ noticeDetail.releaseTime }}</text>
					</view>
					<view class="attachment_tag" v-if="noticeDetail.noticeFiles.length > 0" @click="showAttachmentModal = true">
						<text>附件: {{ noticeDetail.noticeFiles.length }}</text>
					</view>
				</view>
			</view>

			<view class="detail_section">
				<text class="section_title">通知内容</text>
				<view class="section_scroll_wrapper">
					<scroll-view scroll-y class="section_content">
						<rich-text :nodes="noticeDetail.noticeContent"></rich-text>
					</scroll-view>
				</view>
			</view>
		</view>

		<view class="attachment_modal" v-if="showAttachmentModal" @click="showAttachmentModal = false">
			<view class="modal_content" @click.stop>
				<view class="modal_header">
					<view class="modal_back" @click="showAttachmentModal = false">
						<uni-icons type="back" size="24" color="#333333"></uni-icons>
					</view>
					<text class="modal_title">查看附件</text>
					<view class="modal_close" @click="showAttachmentModal = false">
						<uni-icons type="closeempty" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="modal_list_wrapper">
					<scroll-view scroll-y class="modal_list">
						<view class="attachment_item" v-for="(file, index) in noticeDetail.noticeFiles" :key="index">
							<image class="file_icon" src="/static/image/icon/file.png" mode="aspectFit"></image>
							<view class="file_info">
								<text class="file_name">{{ file.attachmentName }}</text>
							</view>
							<text class="preview_btn" @click="previewFile(file)">预览</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import CommonHeader from '@/components/common-header.vue';
import overviewApi from '@/reqApi/overview.js';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const noticeDetail = ref({
	noticeName: '',
	typeName: '',
	createTeacherName: '',
	releaseTime: '',
	noticeFiles: [],
	noticeContent: ''
});

const showAttachmentModal = ref(false);

const previewFile = (file) => {
	if (file.attachmentUrl) {
		uni.navigateTo({
			url: `/pages/notice/mine/preview?url=${encodeURIComponent(file.attachmentUrl)}&name=${encodeURIComponent(file.attachmentName || '文件预览')}`
		});
	} else {
		uni.showToast({
			title: '附件链接为空',
			icon: 'none'
		});
	}
};

const fetchDetail = async (id) => {
	try {
		const res = await overviewApi.notices_detail({ id });
		if (res.data) {
			noticeDetail.value = {
				...res.data,
				noticeFiles: Array.isArray(res.data.noticeFiles) ? res.data.noticeFiles : []
			};
		}
	} catch (error) {
		console.error('获取通知详情失败:', error);
	}
};

onMounted(() => {
	initSafeArea();
});

onLoad((options) => {
	if (options && options.id) {
		fetchDetail(options.id);
	}
});

const goBack = () => {
	uni.navigateBack();
};
</script>

<style lang="scss">
.page_detail {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	box-sizing: border-box;
}

.detail_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.detail_header {
	padding: 24rpx;
	border-bottom: 2rpx solid #F3F3F3;
	flex-shrink: 0;

	.detail_title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 1.5;
		margin-bottom: 24rpx;
		display: block;
		word-wrap: break-word;
		white-space: normal;
	}

	.detail_meta {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.meta_left {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 16rpx;
		}

		.meta_text {
			font-size: 24rpx;
			color: #999999;
		}

		.attachment_tag {
			font-size: 24rpx;
			color: #2E64FA;
			padding: 8rpx 16rpx;
			background-color: rgba(46, 100, 250, 0.1);
			border-radius: 8rpx;
			flex-shrink: 0;
		}
	}
}

.detail_section {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.section_title {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding: 24rpx;
		display: block;
		flex-shrink: 0;
	}

	.section_scroll_wrapper {
		flex: 1;
		overflow: hidden;
		padding: 0 24rpx 30rpx 24rpx;
		box-sizing: border-box;

		.section_content {
			height: 100%;
			font-size: 28rpx;
			color: #333333;
			line-height: 1.8;

			:deep(p) {
				margin-bottom: 16rpx;
			}

			:deep(ol),
			:deep(ul) {
				padding-left: 32rpx;
				margin-bottom: 16rpx;
			}

			:deep(li) {
				margin-bottom: 8rpx;
			}
		}
	}
}

.attachment_modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;

	.modal_content {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		max-height: 70vh;
		display: flex;
		flex-direction: column;

		.modal_header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			border-bottom: 2rpx solid #F3F3F3;

			.modal_back {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.modal_title {
				flex: 1;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
			}

			.modal_close {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 48rpx;
				color: #999999;
			}
		}

		.modal_list_wrapper {
			flex: 1;
			overflow: hidden;
			padding: 24rpx;
			box-sizing: border-box;

			.modal_list {
				height: 100%;

				.attachment_item {
					display: flex;
					align-items: center;
					padding: 24rpx;
					background-color: #F5F7FA;
					border-radius: 12rpx;
					margin-bottom: 16rpx;

					.file_icon {
						width: 80rpx;
						height: 80rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.file_info {
						flex: 1;
						overflow: hidden;

						.file_name {
							font-size: 28rpx;
							color: #333333;
							display: block;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.preview_btn {
						font-size: 28rpx;
						color: #2E64FA;
						margin-left: 20rpx;
						flex-shrink: 0;
					}
				}
			}
		}
	}
}
</style>