baiyuApp/pages/article/articleDetails.vue

<template>
	<view>
		<view class="content">
			<view class="detail-cont">
				<view class="title">{{item.title}}</view>
				<view class="info">
					<view class="reads">阅读数：{{item.views}}</view>
					<view class="time">{{item.publishTime}}</view>
				</view>
				<!-- 正文 -->
				<view class="full-text">
					<view v-html="item.contents"></view>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false">
			<share-box :shareItem="shareItem" @closeShare='showShare = false'></share-box>
		</u-popup>
		<h5-down-app-tip :pageUrl="pageUrl" v-if="pageUrl" />
	</view>
</template>

<script>
	import {
		getArticleById
	} from '@/api/article'
	export default {
		data() {
			return {
				baseUrl: uni.getStorageSync('requestPath'),
				articleId: null,
				item: {},
				showShare: false,
				shareItem: {
					imageUrl: "",
					title: "",
					path: "",
					isMini: true,
					yyb: true
				},
			};
		},
		onLoad(option) {
			this.articleId = option.articleId;

		},
		onShow() {
			this.getArticleById();
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: this.item.title,
				path: '/pages_index/articleDetails?articleId=' + this.articleId,
			}

		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.item.title,
				query: 'articleId=' + this.articleId, //页面参数
			}

		},
		onNavigationBarButtonTap(e) {
			//#ifdef APP-PLUS
			this.shareItem.healthId = this.articleId;
			this.shareItem.title = this.item.title;
			this.shareItem.imageUrl = "../../static/logo.png";
			this.shareItem.isMini = true;
			this.shareItem.path = '/pages/article/articleDetails?articleId=' + this.articleId;
			let cdn = uni.getStorageSync('h5Path');
			this.showShare = true;
			//#endif 

		},
		methods: {
			getArticleById() {
				let data = {
					articleId: this.articleId
				};
				getArticleById(data).then(
					res => {
						if (res.code == 200) {
							this.item = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.detail-cont {
		flex: 1;
		padding: 40upx;
		overflow-y: auto;

		.title {
			font-size: 40upx;
			font-family: PingFang SC;
			// font-weight: bold;
			color: #222222;
			line-height: 70upx;
		}

		.info {
			display: flex;
			align-items: center;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 48upx;
			margin: 23upx 0;

			.reads {
				margin-right: 30upx;
			}
		}

		.full-text {
			font-size: 36upx;
			font-family: PingFang SC;
			// font-weight: 500;
			color: #222222;
			line-height: 60upx;
		}
	}

	.recent-reads {
		flex-shrink: 0;
		box-sizing: border-box;
		height: 121upx;
		background: #FFFFFF;
		border-top: 1px solid #F0F0F0;
		padding: 0 40upx 0 37upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.label {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 1;
				margin-right: 20upx;
			}

			.peop-box {
				display: flex;
				align-items: center;

				.head-box {
					margin-right: 28upx;
					display: flex;
					align-items: center;

					.head {
						width: 48upx;
						height: 48upx;
						border-radius: 50%;
						overflow: hidden;
						box-shadow: 0 0 0 1px #fff;
						margin-right: -10upx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.arrow {
					width: 13upx;
					height: 23upx;
				}
			}
		}

		.share-btn {
			position: relative;
			width: 240upx;
			height: 80upx;
			line-height: 80upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: #2583EB;
			border-radius: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 32upx;
				height: 32upx;
				margin-right: 15upx;
			}

			.share {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}
	}
</style>