postdischarge-applet/pages/propaganda/propaganda.vue

<template>
	<view class="app">
		<view class="appcontent" v-if='propagandaContent'>
			<view class="name">
				{{ propagandaContent.propagandaTitle}}
			</view>
			<img class="image" :src="baseurl+propagandaContent.propagandaCoverPath" alt="" />
			<view style="width: 98%; margin: 0 auto;">
				<!-- <view class="content" v-for="(item, index) in propagandaContent.videoList" :key="index">
					<view v-if="item.type=='rich-text'" v-html="item.value" class='content'></view>
					<video v-if="item.type=='video' && item.value" :src="item.value" style="width:100%;height: 150px"
						frameborder="0"></video>
				</view> -->
				<u-parse :html="propagandaContent.propagandaContent"></u-parse>
			</view>
		</view>
		<view class="noorder" v-else>
			<u-empty mode="list" icon-size='220' text='暂无内容'></u-empty>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		selectNodeContent,
		updateMessageStatus
	} from '@/api/Messagepush/Messagepush.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		props: {
			manageRouteNodeId: {
				type: Number
			}
		},
		data() {
			return {
				baseurl: undefined,
				propagandaContent: undefined,
				query: {
					id: '',
					messageStatus: 'READ'
				},
			};
		},
		onLoad(options) { //获取传值
			this.baseurl = baseurl
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '宣教文章详情'
			});
			this.baseurl = baseurl
			this.getlist();
		},
		watch: {
			manageRouteNodeId(newValue, oldValue) {
				this.query.id = newValue
				this.getlist();
			},
		},
		methods: {
			getlist() {
				this.query.id = this.manageRouteNodeId
				selectNodeContent(this.query.id).then(res => {
					if (res.data.taskNodeType == 'PROPAGANDA_ARTICLE') {
						this.propagandaContent = res.data.propagandaContent
						// this.propagandaContent.videoList = this.getVideo(this.propagandaContent.propagandaContent)
					}
				})
			},
			// 富文本视频解析
			getVideo(data) {
				this.propagandaContent.videoList = []
				let videoList = [];
				let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签
				let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径
				let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组
				let articleList = data.split('</video>') // 把字符串  从视频标签分成数组
				arr.forEach((item, index) => {
					var src = item.match(srcReg);
					videoList.push(src[1]) //所要显示的字符串中 所有的video 标签 的路径
				})
				let needArticleList = [];
				articleList.forEach((item, index) => {
					if (item != "" && item != undefined) { //  常见的标签渲染
						needArticleList.push({
							type: 'rich-text',
							value: item + "</video>"
						});
					}
					let articleListLength = articleList.length; // 插入到原有video 标签位置
					if (index < articleListLength && videoList[index] != undefined) {
						needArticleList.push({
							type: 'video',
							value: videoList[index]
						})
					}
				})
				return needArticleList
			},
		}
	}
</script>
<style lang="scss">
	.appcontent {
		word-break: break-all;
		word-wrap: break-word;
		width: 96%;
		margin: 16rpx auto;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
		border-radius: 5rpx;

		.name {
			padding: 10px 20px 20px 20px;
			font-size: 17px;
			font-weight: 600;
		}

		.image {
			display: block;
			width: 100%;
		}
	}

	page {
		background-color: #F3F3F3;
	}

	::v-deep .u-empty {
		margin-top: 100rpx !important;
	}

	/deep/ .interlayer {
		margin-top: 36rpx !important;
		display: inherit;
		flex-direction: inherit;
		/* flex-wrap: inherit; */
		align-content: inherit;
		align-items: inherit;
		justify-content: inherit;
		width: 90% !important;
		padding-top: 20rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 15rpx;
		height: 100%;
		white-space: inherit;

		text {
			display: block;
			text-indent: 2em;
			margin-bottom: 20rpx;
			width: 93%;
			margin: 0 auto;
			letter-spacing: 2px;
			// word-wrap:break-word;
			word-break: break-all
		}
	}

	/deep/ .ql-size-small {
		font-size: 20rpx;
	}

	/deep/ .ql-size-large {
		font-size: 36rpx;
	}

	/deep/ .ql-size-huge {
		font-size: 46rpx;
	}

	/deep/ .richPic {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		text-align: 50;
		left: 50%;
		top: -30rpx;
		transform: translate(-50%);
		width: 90% !important;
	}

	.abc {
		width: 80%;
		height: 200px;
		background: yellow;
	}
</style>