FE_preschoolEdu_miniProgram/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 class="meta" @click.stop="collect">
					<uni-icons class="icon" :type="form.collectionStatus ? 'star-filled' : 'star'" size="22" color="#007eff"></uni-icons>
				</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">
				<mp-html :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, collectCourse } from '@/apis/modules/article.js'
	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
			options.info && uni.setNavigationBarTitle({
				title: '资讯'
			})
			this.getInfo()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				findById(this.id).then(({ message }) => {
					const str = message.mainBody
					const newStyle = 'width: 85% !important; height: auto;';
					const regex = /(<img[^>]*?\s+style=")([^"]*)("[^>]*?>)/g;
					const newStr = str.replace(regex, `$1${newStyle}$3`);
					const videoStr = this.replaceAllVideoTagStyles(str, "width: 95%; height: 450rpx;display: block;margin:0 auto")
					const imgStr = this.addImgStyle(videoStr)
					message.mainBody = imgStr
					this.form = message
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
			getAllVideoTagIndices(str) {
			  const regex = /<video.*?>.*?<\/video>/gs;
			  const indices = [];
			  let match;
			  while ((match = regex.exec(str)) !== null) {
			    indices.push(match.index);
			  }
			  return indices;
			},
			
			// 将字符串中指定位置的video标签的style属性替换为新的样式
			 replaceVideoTagStyle(str, index, newStyle) {
			  const startIndex = str.indexOf("<video", index);
			  const endIndex = str.indexOf("</video>", startIndex) + 7;
			  const videoTag = str.substring(startIndex, endIndex);
			  const newVideoTag = videoTag.replace(/style="(.*?)"/, `style="${newStyle}"`);
			  return str.substring(0, startIndex) + newVideoTag + str.substring(endIndex);
			},
			
			// 将字符串中所有video标签的style属性替换为新的样式
			 replaceAllVideoTagStyles(str, newStyle) {
			  const indices = this.getAllVideoTagIndices(str);
			  let newStr = str;
			  for (let i = indices.length - 1; i >= 0; i--) {
			    newStr = this.replaceVideoTagStyle(newStr, indices[i], newStyle);
			  }
			  return newStr;
			},
			addImgStyle(str) {
		      return str.replace(/<(img).*?(\/>|<\/img>)/g, function (a) {
		        if (a.indexOf('style') < 0) {
		          // 字符串中没有style
		          return a.replace(/<\s*img/, '<img style="width:100%"');
		        } else {
		          // 字符串中有style
		          return a.replace(/style=("|')/, 'style=$1width: 85% !important; height: auto;')
		        }
		      });
		    },
			// 下载附件
			download(item) {
				uni.setStorageSync('files', {
					copyWriting: this.form.title,
					fileName: [item.fileName],
					urls: [item.filePath]
				})
				this.$util.to(`/team/send/send`)
			},
			// 收藏
			collect() {
				const state = this.form.collectionStatus ? 0 : 1
				collectCourse(this.form.id, state).then(({ data }) => {
					this.form.collectionStatus = state
				}).catch(e => {})
			},
		}
	}
</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;
	text-align: justify;
	p{
		width: 100%;
		
	}
	img,image{
		width: 100% !important;
	}
	/deep/ image,img {
		margin: 0 auto;
	}
}
.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>