veterans_H5/h5_web/pages/basicTraining/offlineTrainingDetails/offlineTrainingDetails.vue

<!-- 专业详情 -->
<template>
	<view class="details">
		<view class="details-name">{{ info.adaptName }}</view>
		<view class="details-code">（{{ info.adaptAddress }}）</view>
		<view class="details-content">
			<u-parse v-if="info.adaptPlan" :html="info.adaptPlan"></u-parse>
			<u-empty v-else text="暂无专业详情" mode="data"></u-empty>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// id
				offlineId: '',
				// 信息
				info: ''
			}
		},
		onLoad(page) {
			if (page.id) {
				this.offlineId = page.id
			}
		},
		onShow() {
			if (this.offlineId) {
				uni.showLoading({
					title: '加载中'
				})
				this.getOfflineDetails(this.offlineId)
			}
		},
		methods: {
			/**
			 * 通过本地获取专业信息
			 */
			getOfflineDetails(id) {
				this.$u.api.training.getOfflineDetailsApi({
					id: id
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						this.info = 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: 24rpx;
		margin-top: 60rpx;
	}
}
</style>