tj/pages/index/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/user.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: 10rpx 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;
}
/deep/ .main {
	.rich-img {
		width: 100% !important;
		height: auto;
	}
	* {
		max-width: 100% !important;
	}
}
</style>