waterDelivery/pages/public/artDetail.vue

<template>
	<view class="center">
		<view class="title clamp">{{ item.title }}</view>
		<view class="time">{{ item.add_time }}</view>
		<view class="main" v-for="(ls, index) in item.content" :key="index">
			<view v-if="ls.type == 'rich-text'" v-html="ls.value" class="main"></view>
			<video v-if="ls.type == 'video' && ls.value" :src="ls.value" style="width:100%;height: 300px"
				frameborder="0"></video>
		</view>
	</view>
</template>

<script>
	import {
		details
	} from '@/api/index.js';
	export default {
		data() {
			return {
				id: '',
				item: ''
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: '水箱计算', // 默认是小程序的名称(可以写slogan等)
				path: url + '?id=' + item.id, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			return shareObj;
		},
		methods: {
			loadData() {
				details(this.id).then(({
					data
				}) => {
					console.log(data);
					data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g,
						'<p class="pHeight"><img').replace(/<div/g, '<div style="max-width: 50% !important;"');
					data.content = this.getVideo(data.content);
					this.item = data;
				});
			},
			// 富文本视频解析
			getVideo(data) {
				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">
	page {
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	.center {
		min-height: 100%;
		height: auto;
		background: #ffffff;
		padding: 30rpx 24rpx 0;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.time {
		font-size: 24rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #999999;
		margin-top: 40rpx;
	}

	.main {
		margin-top: 60rpx;
	}

	::v-deep .main {
		.rich-img {
			width: 100% !important;
			height: auto;
		}

		* {
			max-width: 100% !important;
		}
	}
</style>