JuHua-app/pagesB/list/user/messageDetail.vue

<template>
	<page-meta><navigation-bar :title="$tt('message.noticeDetail')" title-align="center" background-color="#007AFF" /></page-meta>
	<view class="container">
		<u--text :text="trendObject.noticeTitle" size="20" align="center" bold block customStyle="margin:auto;"></u--text>
		<view style="display:flex;margin-top:20px;justify-content:flex-start;">
			<view style="margin-right:50px;">
				<u--text
					prefixIcon="account"
					iconStyle="color:#606266;font-size:14px;margin-right:3px;"
					size="12"
					color="#606266"
					mode="name"
					:text="trendObject.createBy"
				></u--text>
			</view>
			<view>
				<u--text
					prefixIcon="calendar"
					iconStyle="color:#606266;font-size:14px;margin-right:3px;"
					size="12"
					color="#606266"
					mode="date"
					:text="trendObject.createTime"
				></u--text>
			</view>
		</view>

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

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

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) {
			console.log(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() {
			console.log('this.noticeId');
			console.log(this.noticeId);
			getNotice(this.noticeId)
				.then(res => {
					this.trendObject = res.data;
					console.log('this.trendObject');
					console.log(this.trendObject);
					this.trendObject.noticeContent = this.formatRichText(this.trendObject.noticeContent);
					this.trendObject.imgUrl = projectConfig.baseUrl + this.trendObject.imgUrl;
					if (JSON.stringify(this.trendObject) == '{}') {
						this.isShow = true;
					} else {
						this.isshow = false;
					}
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style>
.container {
	padding: 15px;
	padding-bottom: 100px;
}
.content {
	line-height: 26px;
	text-align: justify;
	color: #666;
}
.content img{
	max-width: 100%!important;
}
</style>