JiangShan-app/pagesA/trend/detail.vue

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

			<view class="content">
				<rich-text :nodes="trendObject.content"></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 { getNewsDetail } from '@/apis/modules/trend';

	export default {
		data() {
			return {
				newsId: '',
				trendObject: {
					createTime: '2022-01-01',
					author: ''
				},
				isShow: false
			};
		},
		onLoad: function(option) {
			this.newsId = option.newsId;
		},
		onShow() {
			this.getTrendFunc();
		},
		methods: {
			/**
			 * 转换富文本的图片最大为100%
			 * 转换行内样式的双引号问题
			 */
			formatRichText(html) {
				//控制小程序中图片大小
				let that = this;
				let baseurl = projectConfig.baseUrl.replace(/\/prod-api\//gi, '');
				console.log('baseurl', baseurl);
				// 双引号改为单引号
				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, "'");
				});
			},
			getTrendFunc() {
				const params = { newsId: this.newsId };
				getNewsDetail(params).then(res => {
						this.trendObject = res.data;
						this.trendObject.content = this.formatRichText(this.trendObject.content);
						console.log('content:', this.trendObject.content);
						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 lang="scss" scoped>
	.trend-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>