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>
						<attachment-list :attachments="attachments"></attachment-list>
					</view>
					<!-- <view class="message_attachment">
						<uni-section class="mb-10" title="附件" type="line">

						</uni-section>
						<uni-row :gutter="0">
							<uni-col v-for="(attachment, index) in attachments" :key="index" :xs="{span: 24}" :sm="6">
								<view class="attachment">
									<text
										@click="seeAttachment(attachment.path)">{{ attachment.fileName || '空' }}</text>
								</view>
							</uni-col>
						</uni-row>
					</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>
	</view>


</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { onMounted, reactive, ref } from 'vue';
	import $tab from '@/plugins/tab';
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import { GetNoticeInfo, GetMessageInfo } from '@/api/message';
	import { useUserStore } from '@/store/user';
import attachmentList from '@/components/ygoa/attachmentList.vue'
	const userStore = useUserStore();
	const type = ref(-1);
	const noticeId = ref('');
	const universalId = ref('');
	const messageId = ref('');
	onLoad((options) => {
		switch (options.type) {
			case '0':
				type.value = 0
				noticeId.value = options.noticeId;
				break;
			case '1':
				type.value = 1
				universalId.value = options.universalId;
				messageId.value = options.messageId;
				break;
		}
	})

	const msgInfo = ref({
		title: '标题',
		sendTime: '2024-1-1',
		name: '管理员',
		content: '',
		// attachment:'附件',
	})

	const attachments = ref([]);//附件
	const message = 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,
			}
			if (returnParams.affixUrl) {
				attachments.value = returnParams.affixUrl;
				console.log(attachments.value);
			}
		})
	}

	//消息详情
	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,
			}
		})
	}
	//预览文件
	// function seeAttachment(path) {
	// 	// console.log('path',path);
	// 	$tab.navigateTo('./URLView?type=doc&url=' + encodeURIComponent(path));
	// }

	onMounted(() => {
		switch (type.value) {
			case 0:
				showNoticeInfo(noticeId.value);
				break;
			case 1:
				showMessageInfo({ universalId: universalId.value, messageId: messageId.value });
				break;
		}

		// message.value = "<p>正文<br><br></p><h1>H1内容</h1><h2>H2内容</h2><h3>H3内容</h3><h4>H4内容</h4><h5>H5内容</h5><a href=\"https://www.douyin.com/user/MS4wLjABAAAAoT36HajHfEPMCVKeiukoxGkYU0k0s0NA5khixKqH5Pk\" target=\"_blank\">链接地址</a><p style=\"text-align: left;\">链接图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"链接图片\" data-href=\"\" style=\"\"></p><blockquote>引用</blockquote><p><strong>加粗</strong></p><p><u>下划线</u></p><p><em>倾斜</em></p><p><u><strong>加粗+下划线</strong></u></p><p><em><strong>加粗+倾斜</strong></em></p><p><u><em>下划线+倾斜</em></u></p><p><s>删除线</s></p><p><code>行内代码</code></p><p><sup>上标</sup></p><p><sub>下标</sub></p><p><s><code>行内代码+删除线</code></s></p><p><s><u><em><code><strong>加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></p><p><span style=\"color: rgb(225, 60, 57);\">红色文字</span></p><p><span style=\"color: rgb(255, 236, 61);\">黄色文字</span></p><p><span style=\"color: rgb(66, 144, 247);\"><s><u><em><code><strong>蓝色文字+加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></span></p><p><span style=\"color: rgb(0, 0, 0); background-color: rgb(255,255,0);\">黄色背景</span></p><p><span style=\"color: rgb(9, 109, 217); background-color: rgb(255,0,0);\"><s><u><em><code><strong>红色背景+蓝色文字+加粗+下划线+倾斜+删除线+行内代码</strong></code></em></u></s></span></p><p><span style=\"font-size: 12px;\">12px字号</span><span style=\"font-size: 32px;\">32px字号</span></p><p><span style=\"font-size: 14px;\">14px字号</span><span style=\"font-size: 48px;\">48px字号</span></p><p><span style=\"font-family: 仿宋;\">仿宋 </span><span style=\"font-family: 宋体;\">宋体</span></p><p style=\"line-height: 3;\"><span style=\"font-family: 宋体;\">3行高 </span></p><p style=\"line-height: 2;\"><span style=\"font-family: 宋体;\">2行高</span></p><ul><li><span style=\"font-family: 宋体;\">无序列表</span></li><li><span style=\"font-family: 宋体;\">无序列表</span></li></ul><ol><li><span style=\"font-family: 宋体;\">有序列表</span></li><li><span style=\"font-family: 宋体;\">有序列表</span></li></ol><div data-w-e-type=\"todo\"><input type=\"checkbox\" disabled ><span style=\"font-family: 宋体;\">待办</span></div><div data-w-e-type=\"todo\"><input type=\"checkbox\" disabled ><span style=\"font-family: 宋体;\">待办</span></div><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">左对齐</span></p><p style=\"text-align: right;\"><span style=\"font-family: 宋体;\">右对齐</span></p><p style=\"text-align: center;\"><span style=\"font-family: 宋体;\">居中</span></p><p style=\"text-align: justify;\"><span style=\"font-family: 宋体;\">两侧对齐</span></p><p style=\"text-indent: 2em; text-align: left;\"><span style=\"font-family: 宋体;\">增加缩进</span></p><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\">\uD83D\uDE00表情</span></p><p style=\"text-align: left;\"><span style=\"font-family: 宋体;\"> </span> </p><p style=\"text-align: left;\">100图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"图片描述\" data-href=\"\" style=\"\"></p><p style=\"text-align: left;\">50图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 50%;\"></p><p style=\"text-align: left;\">30图片<img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 30%;\"></p><table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</th></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">表格</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\"><img src=\"https://50006360.s21i.huaweicloudsite.cn/4/ABUIABAEGAAg6PTOtwYohbu8vAIw8AM4gAI.png\" alt=\"\" data-href=\"\" style=\"width: 30%;\"/>表格30图片</td></tr></tbody></table><pre><code class=\"language-css\">代码块 css语言\n代码块</code></pre><p>分割线</p><hr/><p>分割线</p>"

	})
	// 超链接 跳转
	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>