ygoa_miniapp/pages/message/detail/index.vue

<template>
	<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">
			<uni-section title="附件" type="line"></uni-section>
			<view>
				<attachment-list :attachments="attachments" ></attachment-list>
			</view>
		</uni-card>
	</view>


</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { onMounted, ref } from 'vue';
	import { getNoticeInfo, getMessageInfo } from '@/api/message';
	import $tab from '@/plugins/tab';
	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;
		}
	})

	const msgInfo = ref({})

	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">
	.detail_container {
		.message_title {
			text-align: center;
			font-size: 1.5rem;
			font-weight: bold;
			margin-top: 5px;
		}

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

				.user {
					// font-size: 1rem;

					.user_pre {
						font-weight: bold;
					}
				}

				.time {
					// font-size: 1rem;
				}

			}

			.message_attachment {
				.attachment {
					color: blue;
					margin-left: 5px;
				}
			}

		}
	}
</style>