MinNan/index_fenbao/mn_jingshen/PageSpirit.vue

<template>
	<view>
		<u-navbar :autoBack="true" :title="list.title" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>

		<view class="block_3">
			<view class="text_3">
				<text class="text_10">
					<!-- <u-parse :content="list.content"></u-parse> -->
					{{ (list.content || '').replace(/<\/?[^>]*>/g, '') | removeHTMLTag }}
				</text>
			</view>
			<view class="box_3">
				<image style="width: 100%; height: 100%" :src="list.image"></image>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			main_body_id: '',
			list: {}
		};
	},
	filters: {
		removeHTMLTag(str) {
			str = str.replace(/<\/?[^>]*>/g, ''); // 去除HTML tag
			str = str.replace(/[ | ]*\n/g, '\n'); // 去除行尾空白
			str = str.replace(/\n[\s| | ]*\r/g, '\n'); //去除多余空行
			// str = str.replace(/ /gi, ''); // 去掉
			const arrEntities = {
				lt: '<',
				gt: '>',
				nbsp: ' ',
				amp: '&',
				quot: '"'
			}; // 转义符换成普通字符
			str = str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
				return arrEntities[t];
			});
			return str;
		}
	},
	onLoad(o) {
		that = this;
		this.main_body_id = this.$db.get('main_body_id');
		this.getContentDetails(o.id);
	},
	mounted() {},
	methods: {
		// 详情
		getContentDetails(id) {
			this.$api.getContentDetails(
				{
					main_body_id: this.main_body_id,
					id: id
				},
				function (res) {
					that.list = res.data;
					// console.log(that.list, '99999999');
				}
			);
		}
	}
};
</script>

<style>
.box_r {
	display: flex;
	align-items: center;
	margin-right: 15rpx;
}
.sh_xs {
	margin: 32rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}

.block_3 {
	background-color: rgba(255, 255, 255, 1);
	width: 749rpx;
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
}
.text_3 {
	width: 685rpx;
	height: 400rpx;
	text-indent: 2rem;
	font-size: 0rpx;
	overflow: scroll;
	line-height: 48rpx;
	margin: 38rpx 0 0 42rpx;
}
.text_10 {
	width: 685rpx;
	height: 300rpx;
	/* overflow-wrap: break-word; */
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	line-height: 48rpx;
}

.box_3 {
	background-color: rgba(232, 242, 217, 1);
	height: 422rpx;
	margin-top: 46rpx;
	display: flex;
	flex-direction: column;
	width: 750rpx;
}
.box_4 {
	background-color: rgba(0, 0, 0, 0.15);
	width: 750rpx;
	height: 422rpx;
	display: flex;
	flex-direction: column;
}

.paragraph_5 {
	width: 684rpx;
	height: 378rpx;
	overflow-wrap: break-word;
	color: rgba(49, 37, 32, 1);
	font-size: 30rpx;
	font-family: SourceHanSansCN-Regular;
	font-weight: normal;

	line-height: 14rpx;
}

.box_35 {
	height: 32rpx;
	flex-direction: row;
	display: flex;
	margin: 50rpx 0 32rpx 380rpx;
}
</style>