FE_CRM/team/article/article.vue

<template>
	<view>
		<image class="banner" :src="form.bannerImg" mode="widthFix"></image>
		<view class="wrap">
			<view class="title">{{ form.title }}</view>
			<view class="metas">
				<template v-if="isInfo">
					<view class="meta">{{ form.source }}</view>
					<view class="meta">{{ form.releaseTime }}</view>
				</template>
				<view v-else class="meta">
					<uni-icons class="icon" type="eye" size="22" color="#007FFF"></uni-icons>
					{{ form.totalBrowsing }}人学过
				</view>
				<view v-if="form.labelNameList" class="labels">
					<view v-for="(label, j) in form.labelNameList" :key="j" class="label">{{ label }}</view>
				</view>
			</view>
			
			<view class="text" v-html="form.mainBody">
				<!-- <rich-text :nodes="form.mainBody"></rich-text> -->
				<u-parse :content="form.mainBody" />
			</view>
			
			<view v-if="form.fileList" class="files">
				<view v-for="(file, i) in form.fileList" :key="i" class="item" @click="download(file)">
					<view class="file">{{ file.fileName }}</view>
					<view class="download">下载</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { findById } from '@/apis/modules/article.js'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		data() {
			return {
				id: '',
				isInfo: 0, // 是否从资讯进来（学习详情跟资讯详情公用这个页面）
				form: {
					totalBrowsing: ''
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.isInfo = options.info
			this.getInfo()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				findById(this.id).then(({ message }) => {
					const imgStr= this.convert(message.mainBody)
					// message.mainBody = this.getVideo(imgStr)
					message.mainBody = imgStr
					this.form = message
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			convert (options) {
				let str = options.replace(/<img[^>]*>/gi, function (match, capture) {
				   return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="width:90%;margin: 0 auto;height:auto;"') // 替换style
				})
				console.log(str)
				return str
			},
			// 富文本视频解析
			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);
				  console.log(src)
				  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
			 },
			// 下载附件
			download(item) {
				this.$util.to(`../send/send?url=${item.filePath}&copyWriting=${item.fileName}`)
				// uni.showLoading({
				// 	title: '正在下载...',
				// 	mask: true
				// })
				// const url = item.filePath
				// const that = this
				// // 下载文件资源到本地
				// uni.downloadFile({
				// 	url,
				// 	success: function(res) {
				// 		console.log(444, res)
				// 		uni.saveFile({
				// 			tempFilePath: res.tempFilePath,
				// 			success: function(res) {
				// 				console.log(555, res)
				// 				uni.hideLoading()
				// 				that.$util.sucMsg('文件已保存！')
				// 			}
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		uni.hideLoading()
				// 	}
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	background-color: #fff;
}
.banner {
	width: 100%;
}
.title {
	font-size: 34rpx;
	font-weight: 600;
	color: #333;
}
.metas {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	.labels {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 15rpx;
	}
	.label {
		padding: 2px 6px;
		margin: 0 20rpx 15rpx 0;
		font-size: 24rpx;
		color: #fff;
		background-color: #ccc;
		border-radius: 4px;
	}
	.meta {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		font-size: 24rpx;
		color: #ccc;
	}
	.icon {
		margin-right: 8rpx;
	}
}
.text {
	font-size: 28rpx;
	line-height: 1.6;
	p{
		width: 100%;
	}
	img,image{
		width: 100% !important;
	}
}
.files {
	margin-top: 20rpx;
	.item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.file {
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #5a5a5a;
	}
	.download {
		font-size: 26rpx;
		color: #007EFF;
	}
}
</style>