技能培训详情

h5_web/common/apiurl.js

@@ -168,6 +168,15 @@ const apiurl = {
 		getOfflineListUrl: '/adaptTrainOffline/queryList',
 		// 获取线下课程详情
 		getOfflineDetailsUrl: '/adaptTrainOffline/getDetail/'
+	},
+	/**
+	 * 技能培训模块接口
+	 */
+	skillTraining: {
+		// 查询技术包列表
+		getPackageList: '/learnpackage/skillList',
+		// 报名
+		signUpClass: '/learnmember'
 	}
 }
 

h5_web/common/http.api.js

@@ -149,6 +149,11 @@ const install = (Vue, vm) => {
 		getOfflineListApi: (params = {}) => vm.$u.get(apiurl.training.getOfflineListUrl, params),
 		getOfflineDetailsApi: (params = {}) => vm.$u.get(apiurl.training.getOfflineDetailsUrl + params.id)
 	}
+	
+	let skillTraining = {
+		getSkillPackageListApi: (params = {}) => vm.$u.get(apiurl.skillTraining.getPackageList, params),
+		signUpClassApi: (params = {}) => vm.$u.post(apiurl.skillTraining.signUpClass, params)
+	}
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		test,
@@ -185,7 +190,8 @@ const install = (Vue, vm) => {
 		modifyUserInfo,
 		evaluation,
 		mine,
-		training
+		training,
+		skillTraining
 	};
 }
 

h5_web/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails.scss

@@ -1 +1,194 @@
 /* 我的技能培训详情 */
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+}
+/* #endif */
+.details {
+	padding-bottom: 100rpx;
+	&-bg {
+		&-1 {
+			width: 100%;
+			height: 140rpx;
+			background-color: #3D5D4C;
+		}
+		&-2 {
+			width: 120%;
+			height: 180rpx;
+			background-color: #3D5D4C;
+			border-radius: 60%;
+			margin-top: -88rpx;
+			margin-left: -10%;
+		}
+	}
+	
+	&-content {
+		padding: 0 30rpx;
+		margin-top: -200rpx;
+		&-title {
+			padding: 40rpx 36rpx;
+			background-color: #fff;
+			border-radius: 10rpx;
+			display: flex;
+			
+			.left {
+				margin-right: 22rpx;
+				position: relative;
+				&-weekly {
+					width: 204rpx;
+					height: 44rpx;
+					line-height: 44rpx;
+					text-align: center;
+					background-color: #DDB100;
+					font-size: 22rpx;
+					color: rgba($color: #fff, $alpha: 0.7);
+					border-bottom-left-radius: 10rpx;
+					border-bottom-right-radius: 10rpx;
+					position: absolute;
+					top: 176rpx;
+				}
+			}
+			.right {
+				font-size: 24rpx;
+				color: #A2A2A2;
+				line-height: 40rpx;
+				.name {
+					display: flex;
+					align-items: center;
+					color: #3D5D4C;
+					font-size: 34rpx;
+					font-weight: 500;
+					margin-bottom: 10rpx;
+					.tip {
+						text-align: center;
+						padding: 0 10rpx;
+						background: linear-gradient(153deg, #F89E42 0%, #FF7833 100%);
+						border-radius: 20rpx;
+						font-size: 20rpx;
+						color: #fff;
+						margin-right: 20rpx;
+					}
+					.professional {
+						width: 70%;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
+				}
+				.class {
+					text {
+						color: #555555;
+						font-size: 24rpx;
+						margin-right: 24rpx;
+					}
+				}
+				.hardly {
+					margin: 10rpx 0;
+				}
+			}
+		}
+		
+		&-course {
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 40rpx 34rpx;
+			margin-top: 20rpx;
+			
+			&-btn {
+				display: flex;
+				justify-content: space-between;
+				.item {
+					width: calc(50% - 8rpx);
+					height: 82rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					border: solid 1px #D3D3D3;
+					border-radius: 10rpx;
+					font-size: 24rpx;
+					color: #555555;
+					.name {
+						margin: 0 34rpx 0 20rpx;
+					}
+				}
+			}
+			
+			&-progress {
+				margin-top: 42rpx;
+				.title {
+					color: #424242;
+					font-size: 36rpx;
+				}
+			}
+			
+			&-tab {
+				display: flex;
+				margin-top: 44rpx;
+				margin-bottom: 18rpx;
+				view {
+					color: #797979;
+					font-size: 30rpx;
+					margin-right: 56rpx;
+				}
+				.active {
+					color: #000;
+					font-weight: 600;
+				}
+			}
+			
+			&-online {
+				.online-list {
+					&-item {
+						display: flex;
+						border-bottom: solid 1px #DBDBDB;
+						padding: 32rpx 0;
+						.left {
+							margin-right: 26rpx;
+						}
+						.right {
+							color: #0B0B0B;
+							font-size: 30rpx;
+							view {
+								&:last-child {
+									font-size: 24rpx;
+									color: #9A9A9A;
+									margin-top: 10rpx;
+								}
+							}
+						}
+					}
+				}
+			}
+			&-offline {
+				.notice {
+					font-size: 24rpx;
+					color: #545454;
+				}
+				.offline-list {
+					&-item {
+						display: flex;
+						border-bottom: solid 1px #DBDBDB;
+						padding: 32rpx 0;
+						.left {
+							margin-right: 26rpx;
+						}
+						.right {
+							
+							font-size: 24rpx;
+							color: #9A9A9A;
+							view {
+								line-height: 40rpx;
+								&:first-child {
+									color: #0B0B0B;
+									font-size: 30rpx;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -1,6 +1,97 @@
+<!-- 我的技能培训详情  -->
 <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">
+						<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>
 
@@ -8,7 +99,31 @@
 	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
+				})
 			}
 		}
 	}

h5_web/pages/skillsTraining/skillsPackage/skillsPackage.vue

@@ -69,7 +69,7 @@
 				</view>
 			</view>
 		</view>
-		<view class="package-btn" @click="jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess')">报名</view>
+		<view class="package-btn" @click="signUp">报名</view>
 	</view>
 </template>
 
@@ -77,6 +77,7 @@
 	export default {
 		data() {
 			return {
+				packageId: '',
 				details: {
 					star: 3,
 					classesList: [{
@@ -105,6 +106,11 @@
 				}
 			}
 		},
+		onLoad(page) {
+			if (page.id) {
+				this.packageId = page.id
+			}
+		},
 		methods: {
 			/**
 			 * 跳转到指定页面
@@ -116,6 +122,17 @@
 					url,
 					params
 				})
+			},
+			/**
+			 * 报名
+			 */
+			signUp() {
+				this.$u.api.skillTraining.signUpClassApi({ packageId: this.packageId }).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+						this.jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess');
+					}
+				})
 			}
 		}
 	}

h5_web/pages/skillsTraining/skillsTraining.vue

@@ -55,12 +55,12 @@
 				</view>
 			</view>
 			<view class="training-package-list">
-				<view class="training-package-list-item" v-for="(item, index) in packageList" :key="index" @click="jumpPage('/pages/skillsTraining/skillsPackage/skillsPackage')">
+				<view class="training-package-list-item" v-for="(item, index) in packageList" :key="index" @click="jumpPage('/pages/skillsTraining/skillsPackage/skillsPackage', { id: item.id })">
 					<view>
 						<u-image :src="item.img" height="190"mode="aspectFill" border-radius="10"/>
 					</view>
 					<view>{{ item.name }}</view>
-					<view>{{ item.school }}</view>
+					<view>{{ item.schoolName }}</view>
 				</view>
 			</view>
 		</view>
@@ -99,36 +99,27 @@
 						dateRange: '2021.10.15-2021.11.24'
 					}
 				],
-				packageList: [
-					{
-						id: 1,
-						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
-						name: '厨师培训',
-						school: '贵州装备制造职业学院'
-					},
-					{
-						id: 2,
-						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
-						name: '厨师培训',
-						school: '贵州装备制造职业学院'
-					},
-					{
-						id: 3,
-						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
-						name: '厨师培训',
-						school: '贵州装备制造职业学院'
-					}
-				]
+				packageList: []
 			}
 		},
+		onShow() {
+			this.getPackageList();
+		},
 		methods: {
+			getPackageList() {
+				this.$u.api.skillTraining.getSkillPackageListApi().then(res => {
+					if (res.code === 200) {
+						this.packageList = res.rows
+					}
+				})
+			},
 			/**
 			 * 跳转到指定页面
 			 * @param { String } url
 			 * @param {Object} parmas
 			 */
-			jumpPage(url, parmas) {
-				this.$u.route({ url, parmas })
+			jumpPage(url, params) {
+				this.$u.route({ url, params })
 			}
 		}
 	}