veterans_H5/h5_web/pages/skillsTraining/skillsPackage/skillsPackage.vue

<!-- 技能包 -->
<template>
	<view class="package">

		<!-- 背景 -->
		<view class="package-bg">
			<view class="package-bg-1"></view>
			<view class="package-bg-2"></view>
		</view>

		<!-- 内容 -->
		<view class="package-content">

			<view class="package-content-title">
				<view class="left">
					<u-image :src="details.img" width="204"
						height="220" border-radius="10"></u-image>
					<view class="left-weekly">培训周期：{{ details.cycle }}个月</view>
				</view>
				<view class="right">
					<view class="name">
						<view class="professional">{{ details.name }}</view>
					</view>
					<view class="hardly">培训学校：{{ details.schoolName }}</view>
					<view class="hardly">培训导师：{{ details.teacherName }}</view>
					<view class="hardly">
						<view>
							难度<u-rate :count="5" v-model="details.difficult" size="24" disabled="" active-color="#EF651F"
								inactive-color="#EF651F"></u-rate>
						</view>
					</view>
					<view class="hardly">
						<view>报名人数：{{ details.applyCount }}</view>
						<view>开班数：{{ details.classCount }}</view>
					</view>
					<view class="status">{{ details.statusStr }}</view>
				</view>
			</view>

			<view class="package-content-details">
				<!-- 精选课程 -->
				<view class="package-content-details-classes">
					<view class="title">
						<view>
							<text>精选课程</text>精彩教学视频
						</view>
						<view @click="jumpPage('/pages/skillsTraining/skillsTrainingCourse/skillsTrainingCourse', { id: packageId })">更多
							<u-icon name="arrow-right" color="#9D9D9D"></u-icon>
						</view>
					</view>
					<view class="list">
						<swiper v-if="details.courseList && details.courseList.length" class="swiper" :indicator-dots="false" :autoplay="false" height="196rpx">
							<swiper-item class="swiper-item" v-for="(item, index) in details.courseList" :key="index" @click="jumpPage('pages/skillsTraining/courseDetailed/courseDetailed', { id: item.id })">
								<u-image :src="item.img" width="95%" height="196" mode="aspectFill"
									border-radius="10" />
								<view class="classes-name">{{ item.name }}</view>
								<!-- <view class="classes-subtitle">{{ item.subtitle }}</view> -->
							</swiper-item>
						</swiper>
						<u-empty v-else text="暂无课程" mode="list" margin-top="30"></u-empty>
					</view>
				</view>
				<!-- 技能详解 -->
				<view class="package-content-details-skill">
					<view class="title">
						<view>
							<text>技能详解</text>深入了解本课程
						</view>
					</view>
					<view class="content">
						<u-parse :html="details.description"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="package-btn" v-if="isApply == 0" @click="signUp">报名</view>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageId: '',
				schoolName: '',
				details: {},
				isApply: 1
			}
		},
		onLoad(page) {
			if (page.id) {
				this.packageId = page.id
				this.schoolName = page.schoolName
			}
		},
		onShow() {
			if (this.packageId) {
				this.getPackageDetails(this.packageId);
				this.isApplyTraining(this.packageId);
			}
		},
		methods: {
			/**
			 * 获取技能包详情
			 * @param {Object} id
			 */
			getPackageDetails(id) {
				this.$u.api.skillTraining.getPackageDetailApi({ id }).then(res => {
					if (res.code === 200) {
						this.details = res.data
						this.details.schoolName = this.schoolName
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				}).catch(err => {
					this.$refs.uToast.show({
						title: '系统异常!',
						type: 'error'
					})
				})
			},
			/**
			 * 跳转到指定页面
			 * @param {Object} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url,
					params
				})
			},
			/**
			 * 报名
			 */
			signUp() {
				this.$u.api.skillTraining.signUpClassApi({ packageId: this.packageId }).then(res => {
					if (res.code === 200) {
						this.jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess');
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
					}
				})
			},
			/**
			 * 检查是否申请过该技能包
			 * @param {Object} id
			 */
			isApplyTraining(id) {
				this.$u.api.skillTraining.isApplyTrainingApi({ id }).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.isApply = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './skillsPackage.scss';
</style>