veterans_H5/h5_web/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails.vue

<!-- 我的技能培训详情  -->
<template>
	<view class="details">
		<!-- 背景 -->
		<view class="details-bg">
			<view class="details-bg-1"></view>
			<view class="details-bg-2"></view>
		</view>
		<!-- 内容 -->
		<view class="details-content">
			<view class="details-content-title">
				<view class="left">
					<u-image src="https://img.redocn.com/sheying/20141029/changluqiuye_3346993.jpg" width="204"
						height="220" border-radius="10"></u-image>
					<view class="left-weekly">培训周期：2个月</view>
				</view>
				<view class="right">
					<view class="name">
						<view class="tip">汽修</view>
						<view class="professional">汽车检测与维修培训</view>
					</view>
					<view class="class"><text>汽车检测与维修班</text>2021.10.20</view>
					<view>培训学校：贵州工业职业技术学院</view>
					<view>培训导师：张子瑜</view>
					<view class="hardly">
						难度<u-rate :count="5" v-model="details.star" size="24" active-color="#EF651F"
							inactive-color="#EF651F" disabled></u-rate>
						报名人数：10/20
					</view>
				</view>
			</view>
			<view class="details-content-course">
				<view class="details-content-course-btn">
					<view class="item" @click="jumpPage('/pages/skillsTraining/achievementCertificate/achievementCertificate')">
						<view>
							<u-image src="../../../../static/img/certificate-icon.png" mode="aspectFill" width="40" height="50"></u-image>
						</view>
						<view class="name">成绩与证书</view>
						<view>
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
					</view>
					<view class="item">
						<view>
							<u-image src="../../../../static/img/interaction-icon.png" mode="aspectFill" width="46" height="46"></u-image>
						</view>
						<view class="name">教师互动</view>
						<view>
							<u-icon name="arrow-right" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="details-content-course-progress">
					<view class="title">总学习进度 （62%）</view>
					<view>
						<u-line-progress active-color="#709078" inactive-color="#ECECEC" :percent="70" height="18" :show-percent="false"></u-line-progress>
					</view>
				</view>
				<view class="details-content-course-tab">
					<view :class="{'active': tabCur === 1}" @click="tabCur = 1">线上课程</view>
					<view :class="{'active': tabCur === 2}" @click="tabCur = 2">线下实训</view>
				</view>
				<!-- 线上课程 -->
				<view class="details-content-course-online" v-if="tabCur === 1">
					<view class="online-list">
						<view class="online-list-item" v-for="(item, index) in onlineList" :key="index" @click="jumpPage('pages/skillsTraining/courseDetailed/courseDetailed')">
							<view class="left">
								<u-image :src="item.img" mode="aspectFill" width="204" height="132" border-radius="10"></u-image>
							</view>
							<view class="right">
								<view>{{ item.name }}</view>
								<view>{{` 共${item.count}课,已学完${item.finish},学习进度${item.pecent}% `}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 线下课程 -->
				<view class="details-content-course-offline" v-if="tabCur === 2">
					<view class="notice">请于2021.10.12 9:00到贵州职业技术学院参加汽修车检线下实训</view>
					<view class="offline-list">
						<view class="offline-list-item" v-for="(item, index) in offlineList" :key="index">
							<view class="left">
								<u-image :src="item.img" mode="aspectFill" width="204" height="132" border-radius="10"></u-image>
							</view>
							<view class="right">
								<view>{{ item.name }}</view>
								<view>{{ item.date }}</view>
								<view>{{ item.address }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {
					star: 4
				},
				onlineList: [
					{ img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg', name: '汽车检测与维修培训', count: 3, finish: 2, pecent: 66 },
					{ img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg', name: '汽车检测与维修培训', count: 3, finish: 2, pecent: 66 }
				],
				offlineList: [
					{ img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg', name: '汽车检测与维修培训', date: '2021.10.02 09:20', address: '贵州工业职业技术学院实训室' },
					{ img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg', name: '汽车检测与维修培训', date: '2021.10.02 09:20', address: '贵州工业职业技术学院实训室' }
				],
				tabCur: 1
			}
		},
		methods: {
			/**
			 * 跳转到指定页面
			 * @param {Object} url
			 * @param {Object} params
			 */
			jumpPage(url, params) {
				this.$u.route({
					url,
					params
				})
			}
		}
	}
</script>

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