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 } 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,
			content: "<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://i0.hdslb.com/bfs/live/new_room_cover/bc717384b4f644ab3e0fd7369e86dce36a5ac515.jpg\" alt=\"图片描述\" data-href=\"\" style=\"\"></p><p style=\"text-align: left;\">50图片<img src=\"https://i0.hdslb.com/bfs/live/new_room_cover/bc717384b4f644ab3e0fd7369e86dce36a5ac515.jpg\" alt=\"\" data-href=\"\" style=\"width: 50%;\"></p><p style=\"text-align: left;\">30图片<img src=\"https://i0.hdslb.com/bfs/live/new_room_cover/bc717384b4f644ab3e0fd7369e86dce36a5ac515.jpg\" 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://i0.hdslb.com/bfs/live/new_room_cover/bc717384b4f644ab3e0fd7369e86dce36a5ac515.jpg\" 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>"
			}
			
			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>