yuanqu_ui/pages/index/noticedetail.vue

<template>
	<view class="detail">
		<view class="detbox">
			<view class="detboxa">
				<!-- <view class="tit ffz txc">{{title}}</view> -->
				<view class="txt">{{noticeTitle}}</view>
				<view class="time"><block v-if="createTime">发布时间: {{createTime}}</block></view>
				<view class="dbox">
					<rich-text :nodes="infoContent"></rich-text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
		import {getNoticeDet} from "@/api/common.js"
	import config from '@/config'
	const baseUrlimg=config.baseUrl
	export default{
		components:{},
		data(){
			return{
				// newsid:'',
				// datainfo:'',
				// title:"新闻资讯",
				infoContent:'',
				id:'',
				ptype:'',
				noticeTitle:'',
				createTime:'',
			}
		},
		onLoad(e) {
			this.id=e.id;
			this.ptype=e.type;
			this.getNewsDetail(e.id)
		},
		methods:{
			getNewsDetail(id){
				getNoticeDet(id).then(res=>{
					if(res.code==200){
						this.noticeTitle=res.data.noticeTitle;
						this.createTime=res.data.createTime;
						if(res.data.noticeContent){
							this.infoContent=this.formatRichText(res.data.noticeContent);
						}
					}
				})
				
			},
			//解析富文本方法
			formatRichText(html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '').replace(/style=""/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img src="/gi,
						'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;" src="' +baseUrlimg);
					return newContent;
			},
		}
	}
</script>

<style scoped lang="scss">
.detail{height: 100vh;display: flex;flex-direction: column;background-color: #ffffff;
	.detbox{flex: 1;padding-top: 20rpx;overflow: auto;z-index: 2;
		.detboxa{border-radius: 30rpx 30rpx 0 0; background-color: #ffffff;padding:36rpx 24rpx;
			.tit{font-size: 32rpx;color: #321E1E;margin-bottom: 44rpx;}
			.txt{font-size: 30rpx;font-weight: bold;color: #321E1E;line-height: 48rpx;padding: 0 22rpx;margin-bottom: 20rpx;}
			.time{padding: 0 22rpx;font-size: 24rpx;font-weight: 500;color: #AAAAAA;margin-bottom: 36rpx;}
			.dbox{border-top:2rpx solid #E6E6E6;padding: 40rpx 22rpx;
				view{
					text-indent: 2rem;font-size: 26rpx;color: #321F1B;line-height: 48rpx;
				}
			}
		}
	}
}
</style>