fangtanhua/pages/index/news-info.vue

<template>
	<view class="news-info">
		<web-view v-if="detail.url" :src="detail.url"></web-view>
		<view v-if="detail.id && !detail.url">
			<view class="news-title">
				{{detail.title}}
			</view>
			<view class="u-flex news-header">
				<image :src="detail.head_image" class="head" mode=""></image>
				<text class="name">{{detail.source}} {{detail.create_at}} 发表于{{detail.publish}}</text>
			</view>
			<u-parse :html="detail.content" :show-with-animation="true" :lazy-load="true"></u-parse>
			<!-- <view class="" v-html="detail.content"></view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				detail: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getdata()
		},
		methods: {
			getdata() {
				this.$u.post('/api/Headline/headline_detail', {
					id: this.id
				}).then(res => {
					this.detail = res.data
					const regex = new RegExp('<img', 'gi')
					this.detail.content = res.data.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
				})
			}
		}
	}
</script>

<style lang="scss">
	.news-info {
		padding: 24rpx;

		.news-header {
			margin-bottom: 40rpx;

			.head {
				width: 36rpx;
				height: 36rpx;
				border-radius: 100rpx;
				margin-right: 10rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.news-title {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 24rpx;
		}
	}
</style>