XXxiangmu/pages/navigation/product.vue

<template>
	<view class="center">
		<view class="main" v-if="art != ''" v-for="(ls, index) in art.content" :key="index">
			<view v-if="ls.type == 'rich-text'" v-html="ls.value" class="main-item"></view>
			<view style="width:100%;height: 300px;" v-if="ls.type == 'video' && ls.value">
				<view v-if="ls.jd == 1" style="width:100%;height: 300px; background: black;" @click="djbf(ls)">
					<image style="width:100%;height: 300px;" src="../../static/img/spfm.png" mode=""></image>
				</view>
				<video :src="ls.value" autoplay v-if="ls.jd ==2" style="width:100%;height: 300px;">
				</video>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		details
	} from '@/api/user.js';
	export default {
		data() {
			return {
				id: '',
				art: '',
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},
		methods: {
			loadData() {
				details({}, this.id).then(({
					data
				}) => {
					data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g,
						'<p class="pHeight"><img');
					data.content = this.getVideo(data.content);
					this.art = data;
					console.log(this.art, 'nierong');
				});
			},
			djbf(opt) {
				console.log(opt, '2222');
				if (opt.jd == 1) {
					opt.jd = 2
				}
				if (opt.jd == 2) {
					opt.jd = 1
				}
			},
			// 富文本视频解析
			getVideo(data) {
				console.log(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) {
						let wuvideo = item.split('<video')
						let js = wuvideo[0].replace('<video', '')
						//  常见的标签渲染
						needArticleList.push({
							type: 'rich-text',
							value: js
						});
					}
					let articleListLength = articleList.length; // 插入到原有video 标签位置
					if (index < articleListLength && videoList[index] != undefined) {
						needArticleList.push({
							type: 'video',
							jd: 1,
							value: videoList[index]
						});
					}
				});
				console.log(needArticleList, '完成');
				return needArticleList;
			}
		}
	};
</script>

<style lang="less">
	.center {
		width: 100%;
		height: 100%;
	}


	.main {
		padding: 10rpx;
		display: flex;
		flex-direction: column;
	}

	/deep/ .main {
		.rich-img {
			width: 100% !important;
			height: auto;
		}
	}
</style>