Xazn-app/pagesB/user/message/detail.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('message.noticeDetail')" title-align="center" background-color="#F1F3F9"
			front-color="#000000" />
	</page-meta>
	<view class="user-message-detail">
		<view class="main-wrap">
			<div class="title">{{trendObject.noticeTitle}}</div>
			<div class="info-wrap">
				<span class="name">{{trendObject.createBy}}</span>
				<span class="time">{{trendObject.createTime}}</span>
			</div>

			<view class="content">
				<rich-text :nodes="trendObject.noticeContent"></rich-text>
			</view>
			<u--text v-if="isShow" :text="$tt('message.noContent')" customStyle="margin:auto;"></u--text>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import { getNoticedDetail } from '@/apis/modules/notice';

	export default {
		data() {
			return {
				noticeId: '',
				trendObject: {
					noticeTitle: '',
					updateBy: '',
					updateTime: '2021-01-01',
					createTime: '2021-01-01',
					noticeContent: ''
				},
				isShow: false
			};
		},
		onLoad: function(option) {
			this.noticeId = option.noticeId;
		},
		onShow() {
			this.getNoticeFunc();
		},
		methods: {
			/**
			 * 转换富文本的图片最大为100%
			 * 转换行内样式的双引号问题
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let that = this;
				let baseurl = projectConfig.baseUrl.replace(/\/prod-api\//gi, '');
				// 双引号改为单引号
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				// 限制元素最大宽度
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				// 删除换行
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(matchs, capture) {
					return "<img style='max-width:100%;height:auto;border-radius:5px; display:block' src='" +
						baseurl + capture + "'/>";
				});

				// 替换为单引号
				var stylePattern = /style="[^=>]*"[\s+\w+=|>]/g;
				return newContent.replace(stylePattern, function(matches) {
					return matches.replace(/<["]*>/g, "'");
				});
			},
			getNoticeFunc() {
				getNoticedDetail(this.noticeId).then(res => {
					if (res.code === 200) {
						this.trendObject = res.data;
						this.trendObject.noticeContent = this.formatRichText(this.trendObject.noticeContent);
						this.trendObject.imgUrl = projectConfig.baseUrl + this.trendObject.imgUrl;
						if (!this.trendObject || Object.keys(this.trendObject).length === 0) {
							this.isShow = true;
						} else {
							this.isshow = false;
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.user-message-detail {
		height: calc(100vh - 88rpx);
		overflow: hidden;
		background: $uni-bg-color-grey;


		.main-wrap {
			height: 100%;
			padding: 38rpx 44rpx;
			display: flex;
			flex-direction: column;
			background: $uni-bg-color;
			margin-top: 16rpx;

			.title {
				font-weight: 400;
				font-size: 40rpx;
				color: #000000;
				line-height: 26px;
				text-align: left;
				font-style: normal;
			}

			.info-wrap {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 20px;
				text-align: left;
				font-style: normal;
				padding: 22rpx 0 36rpx 0;

				.name {}

				.time {
					margin-left: 32rpx;
				}
			}

			.content {
				flex: 1;
				overflow-y: auto;
				line-height: 26px;
				text-align: justify;
				color: #666;
				padding-bottom: 232rpx;

				img {
					max-width: 100% !important;
				}
			}
		}
	}
</style>