weapp-online/pages/course_intr/course_intr.vue

<template>
	<view class="page_body">
		<view class="banner_container"><image :src="banner" mode="scaleToFill" class="banner_img" /></view>
		<view class="richText ql-snow ql-editor" v-if="userInfo.course"><rich-text :nodes="userInfo.course | formatRichText" ></rich-text></view>
		<view class="submit_container"><view class="sign_up flexC" @click.stop="backIndex">返回首页</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {}, //用户信息
			banner: '' //banner图
		};
	},
	onLoad(options) {
		this.banner = options.banner;
	},
	onShow() {
		if (uni.getStorageSync('userInfo')) {
			this.userInfo = uni.getStorageSync('userInfo');
		}
	},
	methods: {
		backIndex() {
			uni.reLaunch({
				url: '../index/index'
			});
		}
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			if (html) {
				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/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		}
	}
};
</script>
<style>
page {
	height: 100%;
	min-height: 100%;
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.banner_container {
	width: 730rpx;
	height:369rpx;
	margin: 0 auto;
	.banner_img {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}
}
.richText {
	width: 632rpx;
	margin: 28rpx auto 0;
	z-index: 99;
	min-height: 500rpx;
	padding-bottom: 110rpx;
}
uni-rich-text img {
	max-width: 100% !important;
}
.submit_container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	font-size: 36rpx;
	z-index: 9999;
	height: 118rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	.share {
		image {
			height: 46rpx;
			width: 46rpx;
		}
		view {
			font-size: 28rpx;
			color: #333333;
			margin-top: 5rpx;
		}
	}
	.sign_up {
		width: 690rpx;
		height: 90rpx;
		background-color: #ea4a41;
		border-radius: 45rpx;
		color: #ffffff;
	}
}
</style>