<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>