yunshengtai-uniapp/pages/life/articleDetail/index.vue

<template>
	<view class="article-box">
		<view class="article-header">
			<view class="headline">{{detail.title}}</view>
			<view class="acea-row">
				<view class="header-img"><image :src="detail.authorLogo"></image></view>
				<view class="">
					<view class="release-auth">{{detail.author}}</view>
					<view class="acea-row">
						<view class="fz24 acea-row row-middle">
							<image src="../../../static/images/eye.png" class="eye-icon"></image>
							<text>{{detail.visit}}</text>
						</view>
						<view class="fz24">{{detail.formatTime}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="explain-box">转载声明：本文由云快讯收录，观点仅代表作者本人。不代表云快讯立场，云快讯不对所包含的准确性，可靠性或完整性提供任何明示，请自行承担任何责任。</view>
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		
	</view>
</template>

<script>
import { getArticleDetail } from "@/api/home";
export default{
	data() {
		return{
			id: this.id,
			detail: {}
		}
	},
	onShareAppMessage() {
		return {
		  title: this.detail.title,
		  imageUrl: this.detail.imageInput,
		  path: '/pages/life/articleDetail/index?id=' + this.detail.id,
		  success(res) {
		    uni.showToast({
		      title: '分享成功',
		    })
		  },
		  fail(res) {
		    uni.showToast({
		      title: '分享失败',
		      icon: 'none',
		    })
		  },
		}
	},
	methods:{
		getArticleDetail(){
			getArticleDetail({id: this.id}).then((res)=>{
				res.data.content= this.formatRichText(res.data.content)
				this.detail = res.data
			})
		},
		formatRichText(html){
		  let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
		    match = match.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(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
		  return newContent;
		}
	},
	onLoad: function (option) {
		this.id= this.$yroute.query.id;
		this.getArticleDetail()
	}

	
}
</script>

<style lang="less">
	.article-box{
		width: 100%;
		min-height: 100vh;
		.article-header{
			padding: 0 40rpx;
		}
		.headline{
			font-size: 32rpx;
			color: #333333;
			padding-top: 20rpx;
			margin-bottom: 30rpx;
			font-weight: 500;
		}
		.header-img{
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 25px;
			}
		}
		.release-auth{
			font-size: 32rpx;
			color: #333;
			line-height: 44rpx;
			margin-bottom: 6rpx;
		}
		.fz24{
			font-size: 24rpx;
			color: #707070;
			margin-right: 20rpx;
		}
		.eye-icon{
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
		.content{
			width: 100%;
			padding: 24rpx;
			overflow: hidden;
		}
		.explain-box{
			width: 100%;
			padding: 12rpx 34rpx;
			background: #E3E3E3;
			color: #999;
			font-size: 24rpx;
			line-height: 38rpx;
			border-radius: 12rpx;
			margin-bottom: 12rpx;
		}
	}
	
</style>