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

<template>
	<view class="article-box">
		<view class="headline">{{detail.title}}</view>
		<view class="acea-row">
			<view class="header-img"><image src="../../../static/images/menu2.png"></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>203</text>
						
					</view>
					<view class="fz24">{{detail.addTime}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="conter" v-html="detail.content"></view>
		</view>
	</view>
</template>

<script>
import { getArticleDetail } from "@/api/store";
export default{
	data() {
		return{
			id: this.id,
			detail: {}
		}
	},
	onShareAppMessage() {
		return {
		  title: this.detail.title,
		  imageUrl: this.detail.imageInput,
		  path: 'pages/life/articleDeail/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)=>{
				this.detail = res.data
			})
		}
	},
	onLoad: function (option) {
		this.id= this.$yroute.query.id;
		this.getArticleDetail()
	}

	
}
</script>

<style lang="less">
	.article-box{
		width: 100%;
		min-height: 100vh;
		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%;
			}
		}
		.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: 40rpx 0;
		}
	}
	
</style>