FE_CRM/team/article/article.vue

<template>
	<view class="wrap">
		<view class="title">{{ form.title }}</view>
		<view class="metas">
			<view class="meta">
				<uni-icons class="icon" type="eye" size="22" color="#007FFF"></uni-icons>
				{{ form.totalBrowsing }}人学过
			</view>
			<view v-if="form.labelNameList" class="labels">
				<view v-for="(label, j) in form.labelNameList" :key="j" class="label">{{ label }}</view>
			</view>
			<!-- <view class="meta">
				<uni-icons class="icon" type="star" size="22" color="#007eff"></uni-icons>
				123
			</view> -->
		</view>
		
		<view class="text" v-html="form.mainBody"></view>
	</view>
</template>

<script>
	import { findById } from '@/apis/modules/article.js'
	export default {
		data() {
			return {
				id: '',
				form: {
					totalBrowsing: ''
				}
			}
		},
		onShow() {
			const pages = getCurrentPages()
			const { options } = pages[pages.length - 1]
			this.id = options.id
			this.getInfo()
		},
		methods: {
			// 获取详情
			getInfo() {
				uni.showLoading({
					title: '加载中'
				})
				findById(this.id).then(({ message }) => {
					this.form = message
					uni.hideLoading()
				}).catch(e => {
					uni.hideLoading()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.wrap {
	padding: 30rpx;
	background-color: #fff;
}
.title {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
}
.metas {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	.labels {
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 15rpx;
	}
	.label {
		padding: 2px 6px;
		margin: 0 20rpx 15rpx 0;
		font-size: 24rpx;
		color: #fff;
		background-color: #ccc;
		border-radius: 4px;
	}
	.meta {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
	}
}
.text {
	font-size: 28rpx;
	line-height: 1.6;
}
</style>