H5_QiCaiYao/pages_tool/article/detail.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<view class="page">
		<view class="help-title">{{ detail.article_title }}</view>
		<view class="help-meta" v-if="detail.is_show_release_time == 1">
			<text class="help-time">
				发表时间: {{ $util.timeStampTurnTime(detail.create_time) }}
			</text>
		</view>
		<u-parse :content="content" :selectable="true"></u-parse>
		<view class="bottom-area">
			<view v-if="detail.is_show_read_num == 1">
				阅读：
				<text class="price-font">{{ detail.read_num + detail.initial_read_num }}</text>
			</view>
			<view v-if="detail.is_show_dianzan_num == 1" style="display: flex;" @tap="doPoint">
				<u-icon name="thumb-up" color="#999" size="24" v-if="!detail.is_point"></u-icon>
				<u-icon
					name="thumb-up-fill"
					color="#ff9900"
					size="24"
					v-if="detail.is_point"
				></u-icon>
				<view>
					<text class="price-font">
						{{ dianzan_num }}
					</text>
					人已赞
				</view>
			</view>
		</view>

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
// import htmlParser from '@/common/js/html-parser';
export default {
	data() {
		return {
			articleId: 0,
			detail: {},
			content: '',
			dianzan_num: ''
		};
	},
	onLoad(options) {
		this.articleId = options.article_id || 0;
		if (this.articleId == 0) {
			this.$util.redirectTo('/pages_tool/help/list', {}, 'redirectTo');
			return;
		}
		this.getData();
	},
	onShow() {},
	methods: {
		getData() {
			this.$api.sendRequest({
				url: '/api/article/info',
				data: {
					article_id: this.articleId
				},
				success: res => {
					if (res.code == 0 && res.data) {
						this.detail = res.data;
						this.dianzan_num =this.detail.dianzan_num + this.detail.initial_dianzan_num;
						this.$langConfig.title(this.detail.article_title);
						this.content = res.data.article_content;
						let content = this.content;
						content = content.replace(
							/\<img/gi,
							'<img style="width:auto;height:auto;max-width:100%;"'
						);
						this.content = content;
					} else {
						this.$util.showToast({
							title: res.message
						});
						setTimeout(() => {
							this.$util.redirectTo('/pages_tool/article/list', {}, 'redirectTo');
						}, 2000);
					}
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		doPoint() {
			this.$api.sendRequest({
				url: '/api/article/doPoint',
				data: {
					article_id: this.articleId
				},
				success: res => {
					this.detail.is_point = !this.detail.is_point;
					this.dianzan_num;
					if (this.detail.is_point) {
						this.dianzan_num = this.dianzan_num + 1;
					} else {
						this.dianzan_num = this.dianzan_num - 1;
					}
				}
			});
		},
	},
	onShareAppMessage(res) {
		var title = this.detail.article_title;
		var path = '/pages_tool/article/detail?article_id=' + this.articleId;
		return {
			title: title,
			path: path,
			success: res => {},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">
.page {
	width: 90%;
	height: 100%;
	padding: 30rpx;
	margin: 30rpx auto;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 32rpx;
	// box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
}

.help-title {
	font-size: $font-size-toolbar;
	text-align: left;
	font-weight: bold;
}

.help-content {
	margin-top: $margin-updown;
	word-break: break-all;
}

.help-meta {
	text-align: left;
	margin-top: $margin-updown;
	color: $color-tip;

	.help-time {
		font-size: $font-size-tag;
	}
}

.bottom-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.price-font {
		font-weight: normal !important;
	}
	view {
		color: #999;
		// font-size: 24rpx;
	}
}
</style>