menber-center/pages/guide/guideDetail/guideDetail.vue

<template>
	<view class="announcement-details">
		<text class="title">{{ announcement.title }}</text>
		<text class="date">{{ announcement.date }}</text>
		<view class="content">
			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad, onShareAppMessage, onShareTimeline
	} from '@dcloudio/uni-app'
	import {
		getGuideDetail
	} from '@/api/notice.js'
	const currentId = ref(null);
	const currentTitle = ref(null);
	const announcement = ref({
		title: "",
		content: "", // 假设这是后端返回的内容
		date: "" // ISO格式日期
	})

	function formatDate(dateString) {
		const options = {
			year: 'numeric',
			month: 'long',
			day: 'numeric'
		};
		return new Date(dateString).toLocaleDateString('zh-CN', options);
	}

	function init(id) {
		getGuideDetail(id).then(res => {
			if (res?.data) {
				announcement.value = res.data
			}
		})
	}
	onLoad((option) => {
		const {
			id, title
		} = option
		currentId.value = id
		currentTitle.value = title
		uni.setNavigationBarTitle({
			title: title
		});
		init(id)
	})
	
	onShareAppMessage(async (res) => {
		return {
			title: announcement.value.title,
			path: `/pages/guide/guideDetail/guideDetail?id=${currentId.value}&title=${currentTitle.value}`
		};
	})
	
	onShareTimeline(async () => {
		// console.log(imgurl.value)
		return {
			title: announcement.value.title,
			query: `id=${currentId.value}&title=${currentTitle.value}`
		};
	})
</script>

<style scoped>
	.announcement-details {
		padding: 20px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		/* height: 100vh; */
		/* 让页面高度撑满 */
		
		margin-bottom: env(safe-area-inset-bottom, 0);
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		text-align: center;
		/* 标题居中 */
		margin-bottom: 15px;
	}

	.content {
		flex: 1;
		/* 占据剩余空间 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* 内容左对齐 */
	}

	.body {
		font-size: 16px;
		color: #555;
		text-align: left;
		/* 内容左对齐 */
	}

	.body img {
		width: 50%;
		height: auto;
	}

	.date {
		font-size: 14px;
		color: #999;
		text-align: center;
		/* 时间右对齐 */
		margin-top: 10px;
		/* 与内容分离 */
	}
	
	/* 全局样式穿透 */
	
</style>