ygoa_miniapp/pages/message/detail/index.vue

<template>
	<page-meta root-font-size="system" />
	<view class="detail_container">
		<uni-card>
			<template v-slot:title>
				<view class="message_title">
					{{ msgInfo.title }}
				</view>
			</template>
			<view class="message_container">
				<uni-card :border="false" :is-shadow="false" spacing="0px" margin="0px">
					<view class="message_contant">
						<u-parse :content="msgInfo.content" :selectable="true" @navigate="parseNavigate">
						</u-parse>
					</view>

					<view class="message_info">
						<uni-row :gutter="20">
							<uni-col :xs="{ span: 24 }" :sm="{ span: 16, offset: 1 }">
								<view class="user">
									<text class="user_pre">发布者:</text>
									{{ msgInfo.name }}
								</view>
							</uni-col>
							<uni-col :xs="{ span: 24 }" :sm="6">
								<view class="time">
									发布时间:{{ msgInfo.sendTime }}
								</view>
							</uni-col>
						</uni-row>
					</view>

				</uni-card>

			</view>
		</uni-card>
		<uni-card v-if="attachments.length > 0">
			<view class="file_list">
				<uni-section title="附件" type="line" titleFontSize="1rem"></uni-section>
				<view>
					<attachment-list :attachments="attachments"></attachment-list>
				</view>
			</view>
		</uni-card>
	</view>
	<view style="height: 5px; margin-top: 20px;"></view>
</template>

<script setup lang="ts">
import { onLoad ,onShareAppMessage ,onReady} from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';
import { getNoticeInfo, getMessageInfo } from '@/api/message';
import $tab from '@/plugins/tab';
import $modal from '@/plugins/modal.js'
import uParse from '@/components/gaoyia-parse/parse.vue'
import attachmentList from '@/components/ygoa/attachmentList.vue'
import { useUserStore } from '@/store/user';
const userStore = useUserStore();

const type = ref(-1);

const noticeId = ref('');
const universalId = ref('');
const messageId = ref('');
onLoad((options) => {
	if (options.noticeId) {
		type.value = 0
		noticeId.value = options.noticeId;
	} else {
		type.value = 1
		universalId.value = options.universalId;
		messageId.value = options.messageId;
	}
})
onReady(()=> {
    // 根据 noticeId 来决定是否显示分享按钮
    if (noticeId.value) {
        uni.showShareMenu()
    } else {
        uni.hideShareMenu()
    }
})
onShareAppMessage((res) => {
		if (noticeId.value) {
		        return {
		            title: msgInfo.value.title,
		            path: '/pages/message/index?noticeId='+noticeId.value,
		        };
		    } else {
		        return { title: '', path: '' };  // 不允许分享时，返回空的标题和路径
		    }
	})

const msgInfo = ref({
	title:'',
	sendTime:'',
	name:'',
	content:''})

const attachments = ref([]);//附件
//公告详情
function showNoticeInfo(id) {
	const params = {
		userId: userStore.user.useId, //当前用户id
		noticeId: id
	}
	getNoticeInfo(params).then(({ returnParams }) => {
		// console.log('returnParams', returnParams);
		msgInfo.value = {
			title: returnParams.title,
			sendTime: returnParams.sendTime,
			name: returnParams.name,
			content: returnParams.noticeContent
			}
			
			attachments.value = returnParams.affixUrl;
				
		})
	}

	//消息详情
	function showMessageInfo({ universalId, messageId }) {
		const params = {
			universalId: universalId,
			messageId: messageId
		}
		getMessageInfo(params).then(({ returnParams }) => {
			msgInfo.value = {
				title: returnParams.title,
				sendTime: returnParams.sendtime,
				name: returnParams.name,
				content: returnParams.content,
			}
			attachments.value = returnParams.fileList;
		})
	}

	onMounted(() => {
		switch (type.value) {
			case 0:
				showNoticeInfo(noticeId.value);
				break;
			case 1:
				showMessageInfo({ universalId: universalId.value, messageId: messageId.value });
				break;
		}
	})
	// 超链接 跳转
	function parseNavigate(href, e) {
		$tab.navigateTo('./URLView?url=' + encodeURIComponent(href));
	}
</script>

<style lang="scss" scoped>
.detail_container {
	.message_title {
		text-align: center;
		font-size: calc(1.5rem + 0px);
		font-weight: bold;
		margin-top: 5px;
	}

	.message_container {
		.message_contant {
			::v-deep .wxParse {
				font-size: calc(0.875rem + 0px);
			}
		}

		.message_info {
			margin: 20px 0;
			text-align: right;

			.user {
				font-size: calc(0.875rem + 0px);

				.user_pre {
					font-weight: bold;
				}
			}

			.time {
				margin-top:calc(0.625px * (1rem - 16px));
				font-size: calc(0.875rem + 0px);
			}

		}
	}
	
	::v-deep .file_list {
		.uni-section .uni-section-header {
			margin-left: -10px;
		}
		.message_attachment {
			.attachment {
				color: #2196f3;
				margin-left: 5px;
				font-size: calc(14px + .5*(1rem - 16px)) !important;
			}
		}
	}
}
</style>