exam_mp/pages/notice/detail.vue

<template>
	<Container title="公告列表" :scrollStyle="{ padding: 0 }">
		<view class="notice-header">
			<!-- 上一篇标题 -->
			<view class="upper-title" @click="get_notice_detail_prev()">{{ '< 上一篇' }}</view>
			<!-- 显示全部内容 -->
			<view class="show-all-content" @click="goto_notice_list()">显示全部</view>
			<!-- 下一篇标题 -->
			<view class="next-title" @click="get_notice_detail_next()">{{ '下一篇 >' }}</view>
		</view>
		<view class="notice-detail" v-if="notice_data !='' && notice_data !=null">
			<!-- 公告标题 -->
			<view class="notice-main-title">{{ notice_data.title }}</view>

			<!-- 发布时间 -->
			<view class="notice-time">{{ formatTimestamp(notice_data.insert_time)}}</view>

			<!-- 公告内容 -->
			<view class="notice-content">
				<rich-text :nodes="htmlContent"></rich-text>
			</view>
		</view>
	</Container>
</template>

<script>
import Container from '../../components/Container/Container.vue';
import CustomerService from '@/components/CustomerService/CustomerService.vue';
export default {
	data() {
		return {
			notice_id: '',
			notice_data: [],
			htmlContent:''
		};
	},
	mounted() {},
	onLoad(param) {
		this.notice_id = param.id;
		this.get_notice_detail();
	},
	methods: {
		goto_notice_list(){
			uni.redirectTo({
				url: 'list?refresh=' + Date.now()
			});
		},
		formatTimestamp(timestamp) {
			if (timestamp) {
				timestamp = timestamp * 1000;
			}
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，要 +1
			const day = String(date.getDate()).padStart(2, '0');
			const hours = String(date.getHours()).padStart(2, '0');
			const minutes = String(date.getMinutes()).padStart(2, '0');
			const seconds = String(date.getSeconds()).padStart(2, '0');
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		async get_notice_detail() {
			this.$http.request('api/question_bank/question_reception/notice/detail', { id: this.notice_id}).then((callback) => {
				if (callback.code == 'success') {
					this.notice_data = callback.data;
					this.htmlContent=callback.data.content;
				} else {
					uni.showToast({
						title: callback.msg,
						icon: 'none'
					});
				}
			});
		},
		async get_notice_detail_next() {
			this.$http.request('api/question_bank/question_reception/notice/next', { id: this.notice_id}).then((callback) => {
				if (callback.code == 'success') {
					this.notice_data = callback.data;
					this.htmlContent=callback.data.content;
					this.notice_id=callback.data.id;
				} else {
					uni.showToast({
						title: '没有更多内容了',
						icon: 'none'
					});
				}
			});
		},
		async get_notice_detail_prev() {
			this.$http.request('api/question_bank/question_reception/notice/prev', { id: this.notice_id}).then((callback) => {
				if (callback.code == 'success') {
					this.notice_data = callback.data;
					this.htmlContent=callback.data.content;
					this.notice_id=callback.data.id;
				} else {
					uni.showToast({
						title: '没有更多内容了',
						icon: 'none'
					});
				}
			});
		},
	}
};
</script>

<style lang="scss">
.notice-header {
	padding: 30rpx 30rpx 20rpx 30rpx;
	display: flex;
	text-align: center;
	.upper-title {
		width: 25%;
		min-width: 120rpx;
		line-height: 30rpx;
		padding: 15rpx 15rpx;
		border: 1rpx solid #376DF7;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 27rpx;
		color: #376DF7;
	}
	.next-title {
		width: 25%;
		min-width: 120rpx;
		line-height: 30rpx;
		padding: 15rpx 15rpx;
		border: 1rpx solid #376DF7;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 27rpx;
		color: #376DF7;
	}
	.show-all-content {
		width: 30%;
		line-height: 30rpx;
		padding: 15rpx 15rpx;
		margin: 0rpx 20rpx;
		// border: 1rpx solid #999999;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		font-size: 27rpx;
		background: #376DF7;
		font-size: 27rpx;
		color: #FFFFFF;
	}
}
.notice-detail {
	padding: 10rpx 30rpx 10rpx 30rpx;
	background-color: #fff;
	min-height: 100vh;
	.next-title {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.notice-main-title {
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1.5;
		color: #333;
		margin-bottom: 20rpx;
	}

	.notice-time {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.notice-content {
		font-size: 30rpx;
		line-height: 1.8;
		color: #333;

		.notice-subtitle {
			font-size: 34rpx;
			font-weight: bold;
			margin: 40rpx 0 20rpx;
			color: #333;
		}

		.notice-quote {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 40rpx;
			padding-left: 20rpx;
			border-left: 6rpx solid #1a8cff;
		}

		.notice-paragraph {
			margin-bottom: 40rpx;
			text-align: justify;
		}

		.notice-section-title {
			font-size: 34rpx;
			font-weight: bold;
			margin: 50rpx 0 30rpx;
			color: #333;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 10rpx;
				height: 30rpx;
				width: 8rpx;
				background-color: #1a8cff;
				border-radius: 4rpx;
			}
		}

		.notice-highlight {
			margin-bottom: 30rpx;
			background-color: #f8f9fa;
			border-radius: 12rpx;
			padding: 20rpx;

			.highlight-title {
				font-weight: bold;
				margin-bottom: 15rpx;
				color: #1a8cff;
			}

			.highlight-item {
				margin-left: 30rpx;
				margin-bottom: 10rpx;
			}
		}

		.notice-info {
			margin-bottom: 25rpx;
			display: flex;

			.info-title {
				font-weight: bold;
				min-width: 140rpx;
			}

			.info-content {
				flex: 1;

				view {
					margin-bottom: 10rpx;
				}
			}
		}
	}
}
</style>