veterans_H5/h5_web/pages/professionalDetails/professionalDetails.vue

<!-- 专业详情 -->
<template>
	<view class="details">
		<view class="details-name">{{ professionalInfo.professionName }}</view>
		<view class="details-code">（专业代码：{{ professionalInfo.professionCode }})</view>
		<view class="details-content">
			<u-parse v-if="professionalInfo.professionDetail" :html="professionalInfo.professionDetail"></u-parse>
			<u-empty v-else text="暂无专业详情" mode="data"></u-empty>
		</view>
		<view class="details-total" v-if="professionalInfo.browseTimes">浏览{{ professionalInfo.browseTimes }}次</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 专业id
				professionalId: '',
				// 专业信息
				professionalInfo: ''
			}
		},
		onLoad(page) {
			if (page.id) {
				this.professionalId = page.id
			}
		},
		onShow() {
			if (this.professionalId) {
				uni.showLoading({
					title: '加载中'
				})
				this.getProfessionalInfo(this.professionalId)
			}
		},
		methods: {
			/**
			 * 通过本地获取专业信息
			 */
			getProfessionalInfo(id) {
				this.$u.api.school.getProfessonDetails({
					id: id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.professionalInfo = res.data
					}
				}).catch(err => {
					uni.hideLoading()
					this.$refs.uToast.show({
						title: '系统错误!',
						type: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.details {
	padding: 0 32rpx;
	font-family: 'PingFangSC-Medium, PingFang SC';
	&-name {
		padding-top: 60rpx;
		text-align: center;
		font-size: 42rpx;
		color: #3D5D4C;
		font-weight: 600;
	}
	&-code {
		color: #606060;
		font-size: 36rpx;
		text-align: center;
		margin: 30rpx 0;
	}
	&-content {
		color: #545454;
		font-size: 24rpx;
		line-height: 40rpx;
	}
	&-total {
		color: #9B9B9B;
		font-size: 26rpx;
		margin-top: 60rpx;
	}
}
</style>