danling/pages/news/newsInfo.vue

<template>
	<view class="main">
		<view class="u-margin-bottom-30 u-skeleton">
			<view class="titleStyle u-skeleton-rect">
				{{news.title}}
			</view>
			<view class="info_time u-margin-top-20 u-skeleton-rect">
				丹棱检察 {{$u.timeFormat(parseInt(news.created_at), 'yyyy-mm-dd')}}
			</view>
		</view>
		<view class="">
			<u-parse :show-with-animation="true" use-cache lazy-load :html="news.content"></u-parse>
		</view>
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				callUrl: '',
				news: {},
				loading: true
			}
		},
		onLoad(op) {
			this.id = op.id
			console.log(this.id)
			if (op.type != 4) {
				this.callUrl = '/home/news_detail'
				this.getNewsInfo()
			} else {
				this.callUrl = '/home/notice_detail'
				this.getNewsInfo()
			}
			if (op.title != undefined) {
				uni.setNavigationBarTitle({
					title: op.title
				})
			}
		},
		methods: {
			async getNewsInfo() {
				let res = await this.$u.get(this.callUrl, {
					id: this.id
				})
				this.news = res
				this.news.content = this.formatRichText(this.news.content)
				this.loading = false
			},
			formatRichText(html) { //控制小程序中图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					if (match.search(/style=/gi) == -1) {
						match = match.replace(/\<img/gi, '<img style=""');
					}
					return match;
				});
				newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				return newContent;
			}
		}
	}
</script>

<style>
	.main {
		min-height: 100vh;
		padding: 40rpx 28rpx;
		background: #fff;
	}

	.titleStyle {
		font-size: 30rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #333333;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.info_time {
		font-size: 22rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: 500;
		color: #999;
		width: 400rpx;
	}
</style>