pika_shangjia/activity/content/content.vue

<template>
	<view v-if="detaile">
		<view class="title">{{ detaile.title }}</view>
		<view class="content">
			<view class="viewMore">
				<rich-text :nodes="detaile.text | formatRichText"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			detaile: '',
			type: 2, //详情类型：1 普通内容 2 自定义页面内容
		};
	},

	onLoad: function(options) {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.id = options.id;
		this.type = options.type ? options.type : 2;
		this.getDetail();
	},
	onShow(){
	},

	onShareAppMessage() {
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/activity/content/content?id=' + this.id
		};
	},
	onShareTimeline() {
		return {
			title: this.detaile.title,
			imageUrl: this.detaile.pic,
			path: '/activity/content/content?id=' + this.id
		};
	},
	methods: {
		getDetail() {
			let apiUrl = '';
			if(this.type == 1){
				apiUrl = '/api/content/detail'
			}else{
				apiUrl = '/api/help/detailV2'
			}
			let param = {}
			if(this.type == 1){
				param.id = this.id;
			}else{
				param.code = this.id;
			}
			req.getRequest(
				apiUrl,
				param,
				res => {
					this.detaile = res;
				}
			);
		},
	},
	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) {
			//控制小程序中图片大小
			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(/<br[^>]*\/>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/<br[^>]*\>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/font-size:[^;]+;?/g,'');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:12rpx auto;"');
			return newContent;
		}
	}
};
</script>
<style>
@import './content.css';
</style>