技能培训/学历提升/适应性培训

h5_web/common/apiurl.js

@@ -55,10 +55,21 @@ const apiurl = {
 	school: {
 		// 合作学校分页数据
 		getSchoolListUrl: '/school/list',
+		// 合作学校数据(无分页)
+		getListUrl: '/school/selectList',
 		// 获取学院详情
 		getSchoolDetailsUrl: '/school/getDetail/',
 		// 获取专业详情
-		getProfessonDetailsUrl: '/school/getProfessonDetail/'
+		getProfessonDetailsUrl: '/school/getProfessonDetail/',
+		// 获取学院专业包
+		getProfessonUrl: '/learnpackage/list/',
+		// 获取学院专业包详情
+		getLearnpackageDetailsUrl: '/learnpackage/getDetail/',
+		// 获取学院专业包课程详情
+		getPackageCourseDetailsUrl: '/learncourse/getDetail/',
+		// 获取学院招生就业详情
+		getSchoolIntroductionUrl: '/school/selectIntro/'
+		
 	},
   
 	// 公司模块
@@ -148,7 +159,7 @@ const apiurl = {
 		// 课程详情
 		getOnlineDetailsUrl: '/adaptTrainOnline/',
 		// 保存课程播放时长
-		videoTimeLongUrl: '/adaptTrainOnline/duration',
+		videoTimeLongUrl: '/record/duration',
 		// 获取课程评论
 		getClassesCommentUrl: '/coursecomment',
 		// 添加评论

h5_web/common/http.api.js

@@ -59,10 +59,20 @@ const install = (Vue, vm) => {
 	let school = {
 		// 获取学院分页数据
 		getSchoolList: (params = {}) => vm.$u.get(apiurl.school.getSchoolListUrl, params),
+		// 不带分页列表
+		getList: (params = {}) => vm.$u.get(apiurl.school.getListUrl, params),
 		// 通过学院id获取详情
 		getSchoolDetails: (params = {}) => vm.$u.get(apiurl.school.getSchoolDetailsUrl + params.id),
 		// 通过专业id获取专业详情
-		getProfessonDetails: (params = {}) => vm.$u.get(apiurl.school.getProfessonDetailsUrl + params.id)
+		getProfessonDetails: (params = {}) => vm.$u.get(apiurl.school.getProfessonDetailsUrl + params.id),
+		// 通过学院id获取专业
+		getProfesson: (params = {}) => vm.$u.get(apiurl.school.getProfessonUrl + params.id),
+		// 获取学院专业包详情
+		getLearnpackageDetails: (params = {}) => vm.$u.get(apiurl.school.getLearnpackageDetailsUrl + params.id),
+		// 获取学院专业包课程详情
+		getPackageCourseDetail: (params = {}) => vm.$u.get(apiurl.school.getPackageCourseDetailsUrl + params.id),
+		// 获取学校招生详情
+		getSchoolIntroduction: (params = {}) => vm.$u.get(apiurl.school.getSchoolIntroductionUrl + params.id)
 	};
 	
 	// 公司模块

h5_web/pages.json

@@ -94,7 +94,9 @@
 		}, {
 			"path": "pages/skillsTraining/skillsTraining",
 			"style": {
-				"navigationBarTitleText": "技能培训"
+				"navigationBarTitleText": "技能培训",
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
 			}
 		}, {
 			"path": "pages/basicTraining/basicTraining",
@@ -106,7 +108,9 @@
 		}, {
 			"path": "pages/basicTraining/myBasicTraining/myBasicTraining",
 			"style": {
-				"navigationBarTitleText": "我的适应性培训"
+				"navigationBarTitleText": "我的适应性培训",
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
 			}
 		}, {
 			"path": "pages/basicTraining/basicTrainingDetails/basicTrainingDetails",
@@ -195,7 +199,9 @@
 		}, {
 			"path": "pages/basicTraining/myBasicTraining/myBasicTraining",
 			"style": {
-				"navigationBarTitleText": "我的适应性培训"
+				"navigationBarTitleText": "我的适应性培训",
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
 			}
 		}, {
 			"path": "pages/basicTraining/basicTrainingDetails/basicTrainingDetails",
@@ -263,13 +269,6 @@
 				"navigationBarTextStyle": "white"
 			}
 
-		}, {
-			"path": "pages/mySkillsTraining/mySkillsTraining",
-			"style": {
-				"navigationBarTitleText": "我的技能培训",
-				"enablePullDownRefresh": false
-			}
-
 		}, {
 			"path": "pages/myEvaluation/myEvaluation",
 			"style": {
@@ -442,6 +441,77 @@
 				"navigationBarTextStyle": "white"
 			}
 
+		}, {
+			"path": "pages/upgrade/courseDetail/courseDetail",
+			"style": {
+				"navigationBarTitleText": "课程详细",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/registrationNotice/registrationNotice",
+			"style": {
+				"navigationBarTitleText": "报班通知",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/mine/skillsTraining/skillsTraining",
+			"style": {
+				"navigationBarTitleText": "我的技能培训",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/skillsPackage/skillsPackage",
+			"style": {
+				"navigationBarTitleText": "技能包",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/skillsTrainingCourse/skillsTrainingCourse",
+			"style": {
+				"navigationBarTitleText": "技能培训课程",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/submitSuccess/submitSuccess",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+
+		}, {
+			"path": "pages/skillsTraining/courseDetailed/courseDetailed",
+			"style": {
+				"navigationBarTitleText": "课程详细",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
+		}, {
+			"path": "pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails",
+			"style": {
+				"navigationBarTitleText": "我的技能培训详情",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#3D5D4C",
+				"navigationBarTextStyle": "white"
+			}
+
 		}
 	],
 	"globalStyle": {

h5_web/pages/basicTraining/basicTraining.vue

@@ -33,7 +33,7 @@
 				<view class="training-adaptability-list-item"
 				v-for="(item, index) in list"
 				:key="index"
-				@click="jumpPage('/pages/basicTraining/onlineTrainingDetails/onlineTrainingDetails', { id: item.id })"
+				@click="recordBrowseTotal(item)"
 				>
 					<view class="left">
 						<u-image :src="item.titleImg" width="198" height="144"></u-image>
@@ -52,7 +52,7 @@
 				线下培训
 			</view>
 			<view class="training-offline1-list">
-				<view class="training-offline1-list-item" v-for="(item, index) in offLineList" :key="index" @click="jumpPage('pages/basicTraining/offlineTrainingDetails/offlineTrainingDetails', { id: item.id })">
+				<view class="training-offline1-list-item" v-for="(item, index) in offLineList" :key="index" @click="recordBrowseTotal(item, 1)">
 					<view class="top">
 						<view>{{ item.adaptName }}</view>
 						<view>{{ item.createTime }}</view>
@@ -151,6 +151,29 @@
 					url: url,
 					params: params
 				})
+			},
+			/**
+			 * 适应性培训关注度统计
+			 * @param {Object} item
+			 */
+			recordBrowseTotal(item, type) {
+				const query = {
+					platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
+					pages: location.href,//页面路径
+					btnName: '查看课程详情',//按钮名称
+					btnEvent: '1',//按钮事件: 1-点击 2-长按 3-滑动
+					ipAddress: '',//IP地址
+					typeName: '适应性培训关注度',//类型名称 例：学校关注度 、适应性考试等
+					typeCode: 'SYXPXGZD',// 类型编码 例：类型名称首字母缩写(XXGZD)
+					categoryName: item.adaptName,//类别名称 例：XX学校，SS考试
+				}
+				this.$u.api.postAnalysis(query).then(res => {
+					if (type === 1) {
+						this.jumpPage('pages/basicTraining/offlineTrainingDetails/offlineTrainingDetails', { id: item.id })
+					} else {
+						this.jumpPage('/pages/basicTraining/onlineTrainingDetails/onlineTrainingDetails', { id: item.id })
+					}
+				})
 			}
 		}
 	}

h5_web/pages/basicTraining/basicTrainingDetails/basicTrainingDetails - 副本.vue

@@ -1,128 +0,0 @@
-<template>
-	<view>
-		<!-- <video id="vid"><source :src="details.videoUrl"></video> -->
-		<!-- <video width="320" height="240" controls="controls" preload="auto">
-		  <source src="static/img/11111.mp4" type="video/mp4">
-		您的浏览器不支持Video标签。
-		</video> -->
-		<!-- <video @timeupdate="updateTime" @canplay="getDuration" ref="video111" :src="details.videoUrl" controls="controls" preload="auto"></video> -->
-		<!-- <view id="player" style="width: 100%;"></view> -->
-		<video id="myVideo" @timeupdate="timeUpdate" :src="url" controls initial-time="initial_time" />
-		<u-button @click="changeRate">切换</u-button>
-		<u-parse :html="details.content" class="f-padding"></u-parse>
-	</view>
-</template>
-
-<script>
-	import Player from 'xgplayer';
-	
-	export default{
-		data(){
-			return{
-				videoContext: uni.createVideoContext('myVideo', this),
-				id:'',
-				content:'',
-				details:{},
-				duration:'',
-				url: "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
-				video_real_time: 0, //实时播放进度
-				nitial_time: '', //视频跳转进度 秒
-			}
-		},
-		onLoad(page){
-			console.log(page)
-			this.id = page.id;
-			this.getAdaptTrainOnlineDetails(this.id);
-			this.initial_time = '0'
-		},
-		onShow(){
-			
-		},
-		methods:{
-			getAdaptTrainOnlineDetails(id){
-				this.$u.api.getAdaptTrainOnlineDetails({id:id}).then(res=>{
-					this.details = res.data;
-					let player = new Player({
-					  id: 'player',
-					  autoplay: false,
-					  playsinline: true,
-					  url: this.details.videoUrl,
-					  "screenShot": true,
-					  fluid: true,
-					  videoInit: true,
-					  enableVideoDbltouch: true,
-					});
-					player.once('ended',()=>{
-						this.upAdaptTrainOnlineInfo();
-					});
-					player.once('canplay',(e)=>{
-						console.log('canplay',player.duration)
-						this.duration = player.duration;
-					});
-					player.on('timeupdate',()=>{
-						let that = this;
-						// console.log('that',that);
-						// console.log('currentTime',player.currentTime);
-						// // setInterval(that.aaa+=1,1000)
-						// console.log('that.aaa',that.aaa);
-					  //事件名称可以在上述查询
-					});
-					console.log('getAdaptTrainOnline',JSON.parse(JSON.stringify(res)));
-				})
-			},
-			upAdaptTrainOnlineInfo(){
-				let params ={
-					tabId:this.details.id,
-					adaptName:this.details.adaptName,
-					url:this.details.videoUrl,
-					type:this.details.videoType,
-					duration:this.duration,
-					playDuration:this.duration,
-				}
-				this.$u.api.upAdaptTrainOnlineInfo(params).then(res=>{
-					this.rate = res.data;
-					console.log('upAdaptTrainOnlineInfo',JSON.parse(JSON.stringify(res)));
-				})
-			},
-			timeUpdate(e) {
-				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
-				//跳转到指定播放位置 initial-time 时间为秒
-				let that = this;
-				//播放的总时长
-				var duration = e.detail.duration
-				//实时播放进度 秒数
-				var currentTime = parseInt(e.detail.currentTime)
-				//当前视频进度
-				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
-				if (that.video_real_time == 0){
-					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
-				} else {
-					var jump_time = parseInt(that.video_real_time)
-				}
-				if(isReady==1){
-					if (currentTime > jump_time && currentTime - jump_time>3){
-						let videoContext = wx.createVideoContext('myVideo')
-						videoContext.seek(that.video_real_time)
-						wx.showToast({
-							title: '未完整看完该视频，不能快进',
-							icon: 'none',
-							duration: 2000,
-						})
-					}
-				}
-			 that.video_real_time = currentTime //实时播放进度
-			},
-			changeRate() {
-				this.videoContext.playbackRate(2.0)
-			}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	#player{margin-bottom: 24rpx;}
-	// @import  './basicTrainingDetails.scss'
-	#myVideo {
-		width: 100%;
-	}
-</style>

h5_web/pages/basicTraining/components/online - 副本.vue

@@ -1,126 +0,0 @@
-<template>
-	<view class="online">
-		<!-- <view class="statistics u-flex u-row-between">
-			<view class="statistics-item">
-				<view class="up">已看课程</view>
-				<view class="down"><text>{{rate.play}}</text> 节</view>
-			</view>
-			<view class="statistics-item">
-				<view class="up">还需观看</view>
-				<view class="down"><text>{{rate.playNot}}</text> 节</view>
-			</view>
-		</view> -->
-		<view class="content">
-			<view class="instructions" v-if="onlineTabIndex==0">
-				<view class="text">
-					培训内容包括单不限于思想政治教育，法律法规政策介绍，就业创业指导，心里引导，求职技巧指导，服务项目指引等。
-				</view>
-				<!-- <image src="../../../static/img/instructions-01.png" mode=""></image> -->
-				<!-- <image src="../../../static/img/instructions-02.png" mode=""></image> -->
-				<view class="catalog f-padding">
-					<view 
-					class="catalog-item u-flex" 
-					:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
-					v-for="(item,index) in onlineData" :key="item.id+index" 
-					@click="catalogItemClick(item)">
-						<view class="number">{{index + 1}}.</view>
-						<view class="name">{{item.adaptName}}</view>
-					</view>
-				</view>
-			</view>
-			<!-- <view class="catalog f-padding" v-if="onlineTabIndex==1">
-				<view 
-				class="catalog-item u-flex" 
-				:class="{ 'unstudy':item.flag == 0, 'studying':item.flag == 1, 'studyed':item.flag == 2 }"
-				v-for="(item,index) in onlineData" :key="item.id+index" 
-				@click="catalogItemClick(item)">
-					<view class="number">{{index + 1}}.</view>
-					<view class="name">{{item.adaptName}}</view>
-				</view>
-			</view> -->
-		</view>
-		<u-bottom>
-			<view slot="content" class="status-btn fix-bottom">
-				学习状态：{{rate.status|verifyStatusFilter}}
-			</view>
-		</u-bottom>
-	</view>
-</template>
-
-<script>
-	export default{
-		name: 'onlineTraining',
-		props:{
-			onlineData: {
-				type: Array,
-				default: function() {
-					return []
-				}
-			},
-			rate:{
-				type:Object,
-				default: function() {
-					return new Object()
-				}
-			}
-		},
-		data(){
-			return{
-				onlineTabs: [{name: '课程说明'},{name:'课程视频'}],
-				onlineTabIndex:0,
-				catalogList:[]
-			}
-		},
-		onLoad(){
-			
-		},
-		onShow(){
-			
-		},
-		filters: {
-		  verifyStatusFilter(value) {
-			if (value === 0) {
-			  return '未全部完成';
-			}else if(value === 1){
-				return '已全部完成';
-			}else {
-			  return '未知';
-			}
-		  },
-		},
-		methods:{
-			onlineTabChange(index){
-				this.onlineTabIndex = index;
-			},
-			catalogItemClick(item){
-				this.$u.route({
-					url: 'pages/basicTraining/basicTrainingDetails/basicTrainingDetails',
-					params: {
-						id: item.id
-					}
-				});
-			}
-			
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.online{margin: 24rpx;}
-	.statistics{text-align: center;background-color: #fff;border-radius: 8rpx;padding: 24rpx;margin-bottom: 24rpx;}
-	.statistics-item{width: 50%;}
-	.statistics-item .up{font-size: 30rpx;color: #444;}
-	.statistics-item .down{color: #969696;}
-	.statistics-item .down text{font-weight: bold;margin-right: 5rpx;}
-	.catalog{background-color: #fff;font-size: 36rpx;padding-bottom: 24rpx;}
-	.catalog-item{margin-bottom: 24rpx;}
-	.catalog-item.unstudy{}
-	.catalog-item.studying{color: #e87c7c;}
-	.catalog-item.studyed{color: #c5c5c5;}
-	.catalog-item .number{margin-right: 15rpx;}
-	.content{background-color: #fff;}
-	.instructions .text{padding: 24rpx;color: #969696;}
-	.instructions image{width: 100%;}
-	.status-btn{background-color: #4433d9;color: #fff;margin: 0 24rpx;padding: 24rpx;border-radius: 8rpx;}
-	// @import  './online.scss'
-</style>

h5_web/pages/basicTraining/onlineTrainingDetails/onlineTrainingDetails.vue

@@ -66,7 +66,7 @@
 					</view>
 				</view>
 			</view>
-			<view class="details-comment-page" v-if="total">
+			<view class="details-comment-page" v-if="total > 5">
 				<wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
 			</view>
 
@@ -120,7 +120,8 @@
 					tabId: '',
 					starLevel: 0,
 					content: ''
-				}
+				},
+				currentDuration: 0
 			}
 		},
 		onLoad(page) {
@@ -130,9 +131,17 @@
 			}
 		},
 		beforeDestroy() {
+			let playDuration = this.video_real_time;
+			if (this.videoInfo.playDuration > this.video_real_time) {
+				this.currentDuration = this.video_real_time;
+				playDuration = this.videoInfo.playDuration
+			} else {
+				this.currentDuration = this.video_real_time
+			}
 			this.submitTimeLong({
 				tabId: this.videoInfo.id,
-				playDuration: this.video_real_time
+				playDuration: playDuration,
+				currentDuration: this.currentDuration
 			}, 0, true)
 		},
 		methods: {
@@ -173,7 +182,7 @@
 					if (res.code === 200) {
 						this.info = res.data;
 						this.videoInfo = res.data.chapterList[this.videoIndex];
-						this.initial_time = Number(res.data.chapterList[this.videoIndex].playDuration)
+						this.initial_time = Number(res.data.chapterList[this.videoIndex].currentDuration)
 						this.video_real_time = Number(res.data.chapterList[this.videoIndex].playDuration)
 						this.playedTime = Number(res.data.chapterList[this.videoIndex].playDuration)
 						this.query.tabId = res.data.chapterList[this.videoIndex].id
@@ -189,10 +198,18 @@
 			 * @param {Object} index
 			 */
 			classesClick(index) {
-				this.isPaly = false
+				this.isPaly = false;
+				let playDuration = this.video_real_time;
+				if (this.videoInfo.playDuration > this.video_real_time) {
+					this.currentDuration = this.video_real_time;
+					playDuration = this.videoInfo.playDuration
+				} else {
+					this.currentDuration = this.video_real_time
+				}
 				this.submitTimeLong ({
 					tabId: this.videoInfo.id,
-					playDuration: this.video_real_time
+					playDuration: playDuration,
+					currentDuration: this.currentDuration
 				}, index);
 			},
 			/**
@@ -217,7 +234,13 @@
 				} else {
 					jump_time = parseInt(that.video_real_time)
 				}
-				if (jump_time === currentTime) {
+				console.log('jump_time', jump_time)
+				console.log('that.initial_time', that.initial_time)
+				console.log('this.playedTime', this.playedTime)
+				console.log('that.video_real_time', that.video_real_time)
+				if (jump_time > this.playedTime) {
+					isReady = 1;
+				} else {
 					isReady = 3;
 				}
 				if(isReady === 1){
@@ -231,9 +254,6 @@
 						})
 					}
 				}
-				if (currentTime > this.playedTime) {
-					that.playedTime = currentTime //实时播放进度
-				}
 				that.video_real_time = currentTime //实时播放进度
 			},
 			/**
@@ -241,11 +261,13 @@
 			 */
 			submitTimeLong({
 				tabId,
-				playDuration
+				playDuration,
+				currentDuration
 			}, index, flag) {
 				this.$u.api.training.videoTimeLongApi({
 					tabId,
-					playDuration
+					playDuration,
+					currentDuration
 				}).then(res => {
 					if (res.code === 200) {
 						if (!flag) {

h5_web/pages/mine/mine.vue

@@ -72,7 +72,7 @@
 			<!-- 单元格 -->
 			<view class="mine-info-cell1">
 				<u-cell-group :border="false">
-					<u-cell-item title="我的技能培训" @click="jumpPage('/pages/mySkillsTraining/mySkillsTraining')">
+					<u-cell-item title="我的技能培训" @click="jumpPage('/pages/mine/skillsTraining/skillsTraining')">
 						<image class="cell-icon peixun" slot="icon" src="../../static/img/jinengx.png" mode=""></image>
 					</u-cell-item>
 					<u-cell-item title="我的评价" @click="jumpPage('/pages/myEvaluation/myEvaluation')">

h5_web/pages/mine/skillsTraining/skillsTraining.scss

@@ -0,0 +1,49 @@
+/* 我的技能培训 */
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+}
+/* #endif */
+
+.training {
+	
+	&-list {
+		padding: 30rpx;
+		
+		&-item {
+			background-color: #fff;
+			border-radius: 10rpx;
+			padding: 36rpx 32rpx;
+			display: flex;
+			align-items: center;
+			
+			.left {
+				margin-right: 22rpx;
+			}
+			.right {
+				color: #9A9A9A;
+				font-size: 24rpx;
+				line-height: 45rpx;
+				width: 100%;
+				.name {
+					color: #3E3E3E;
+					font-size: 34rpx;
+					font-weight: 500;
+				}
+				.school {
+					color: #525252;
+					font-size: 24rpx;
+				}
+				.flex {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 24rpx;
+					color: #A2A2A2;
+				}
+			}
+		}
+	}
+}

h5_web/pages/mine/skillsTraining/skillsTraining.vue

@@ -0,0 +1,90 @@
+<!-- 我的技能培训 -->
+<template>
+	<view class="training">
+		<z-paging
+			ref="paging"
+			v-model="trainingList"
+			@query="queryList"
+		>
+			<!-- 选项卡 -->
+			<view class="training-tab" slot="top">
+				<u-tabs :list="tabList" :is-scroll="true" :current="current" @change="tabChange" bg-color="#f2f2f2" inactive-color="#000000" active-color="#709078" :bold="false" bar-width="40" bar-height="6" :active-item-style="{color: '#000000'}"></u-tabs>
+			</view>
+			
+			<!-- 列表 -->
+			<view class="training-list">
+				<view class="training-list-item" v-for="(item, index) in trainingList" :key="index" @click="jumpPage('/pages/mine/skillsTraining/skillsTrainingDetails/skillsTrainingDetails')">
+					<view class="left">
+						<u-image :src="item.img" mode="aspectFill" width="204" height="220" border-radius="10"></u-image>
+					</view>
+					<view class="right">
+						<view class="name">{{ item.name }}</view>
+						<view class="school">培训学校：{{ item.school }}</view>
+						<view class="flex">
+							<view class="rate">
+								难度<u-rate :count="5" v-model="item.rate" inactive-color="#EF651F" active-color="#EF651F" disabled size="24" gutter="6"></u-rate>
+							</view>
+							<view>报名人数：{{ item.people }}</view>
+						</view>
+						<view>开始时间：{{ item.startDate }}</view>
+						<view>培训周期：{{ item.long }}个月</view>
+					</view>
+				</view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0,
+				tabList: [
+					{ value: 1, name: '培训中' },
+					{ value: 2, name: '已报名' }
+				],
+				trainingList: []
+			}
+		},
+		methods: {
+			/**
+			 * tab切换
+			 * @param { Number } cur
+			 */
+			tabChange(cur) {
+				this.current = cur
+			},
+			/**
+			 * 下拉分页组件触发
+			 * @param {Number} pageNum
+			 * @param {Number} pageSize
+			 */
+			queryList(pageNum, pageSize) {
+				this.$refs.paging.complete([
+					{
+						id: 1,
+						img: 'http://img.mp.itc.cn/upload/20161115/15c7309f1a074a08a2b9630651720c27_th.jpg',
+						name: '汽车检测与维修培训',
+						school: '贵州工业职业技术学院',
+						people: '10/30',
+						startDate: '2021.10.02',
+						long: 3,
+						rate: 3
+					}
+				])
+			},
+			/**
+			 * @param {Object} url
+			 * @param {Object} params
+			 */
+			jumpPage(url, params) {
+				this.$u.route({ url, params })
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './skillsTraining.scss';
+</style>

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

@@ -0,0 +1 @@
+/* 我的技能培训详情 */

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

@@ -1,6 +1,6 @@
 <template>
-	<view>
-		我的技能培训
+	<view class="details">
+		
 	</view>
 </template>
 
@@ -8,15 +8,12 @@
 	export default {
 		data() {
 			return {
-				
+
 			}
-		},
-		methods: {
-			
 		}
 	}
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+	@import './skillsTrainingDetails.scss';
 </style>

h5_web/pages/notification/notification - 副本.vue

@@ -0,0 +1,296 @@
+<!-- 
+ * @title 消息通知 
+ * @author Rockery(1113269755@qq.com)
+-->
+
+<template>
+	<view class="notification">
+		<view class="wrap">
+			<view class="u-tabs-box notice-tabsswiper">
+				<u-tabs-swiper bg-color="transparent" ref="noticeTabsSwiper" :list="tabsSwiperList" :current="current" @change="tabsSwiperChange" :is-scroll="false"></u-tabs-swiper>
+			</view>
+      <view class="notice-search">
+        <u-search placeholder="请输入您关键词" v-model="noticeKeyword" bg-color="#FFFFFF" input-align="center" :show-action="false" class="notice-search-btn"></u-search>
+      </view>
+			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+            <view class="page-box">
+              <view class="notice-container" v-for="(consultItem, index) in dataList[0]" :key="index + 'consultitem'">
+                <view class="title">{{consultItem.title}}</view>
+                <view class="content">{{consultItem.content}}</view>
+                <view class="footer">
+                  <view class="left">{{consultItem.dateTime}}</view>
+                  <view :class="consultItem.status == 0 ?'unread':'haveread'" class="right">{{consultItem.statusLabel}}</view>
+                </view>
+              </view>
+              <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
+            </view>
+					</scroll-view>
+				</swiper-item>
+				<swiper-item class="swiper-item">
+					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
+            <view class="page-box">
+              <view class="notice-container" v-for="(systemInfoItem, index) in dataList[1]" :key="index + 'systeminfo'">
+                <view class="title">{{systemInfoItem.title}}</view>
+                <view class="content">{{systemInfoItem.content}}</view>
+                <view class="footer">
+                  <view class="left">{{systemInfoItem.dateTime}}</view>
+                  <view class="right">{{systemInfoItem.status}}</view>
+                </view>
+              </view>
+              <u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
+            </view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+      noticeKeyword: '',
+      tabsSwiperList: [
+      	{
+      		name: '问题咨询'
+      	},
+      	{
+      		name: '系统消息'
+      	}
+      ],
+			dataList: [
+        [
+          {
+            id: 1,
+            title: '请问针对退役军人就业有哪些什么政策',
+            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+            dateTime: '发布于2021.09.23 12:31',
+            status: 1,
+            statusLabel: '已读'
+          },
+          {
+            id: 2,
+            title: '请问针对退役军人就业有哪些什么政策',
+            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+            dateTime: '发布于2021.09.23 12:31',
+            status: 0,
+            statusLabel: '未读'
+          }
+        ],
+        [
+          {
+            id: 1,
+            title: '请问针对退役军人就业有哪些什么政策',
+            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+            dateTime: '发布于2021.09.23 12:31',
+            status: 1,
+            statusLabel: '已读'
+          },
+          {
+            id: 2,
+            title: '请问针对退役军人就业有哪些什么政策',
+            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+            dateTime: '发布于2021.09.23 12:31',
+            status: 0,
+            statusLabel: '未读'
+          }
+        ]
+      ],
+			current: 0,
+			swiperCurrent: 0,
+			dx: 0,
+			loadStatus: ['loadmore','loadmore'],
+		};
+	},
+	onLoad() {
+		this.getDataList(0);
+	},
+	computed: {
+		// 价格小数
+		priceDecimal() {
+			return val => {
+				if (val !== parseInt(val)) return val.slice(-2);
+				else return '00';
+			};
+		},
+		// 价格整数
+		priceInt() {
+			return val => {
+				if (val !== parseInt(val)) return val.split('.')[0];
+				else return val;
+			};
+		}
+	},
+	methods: {
+		reachBottom() {
+      this.loadStatus.splice(this.current,1,"loading");
+      setTimeout(() => {
+      	this.getDataList(this.current);
+      }, 1200);
+		},
+		// 页面数据
+		getDataList(idx) {
+			this.loadStatus.splice(this.current,1,"nomore")
+		},
+		// 总价
+		totalPrice(item) {
+			let price = 0;
+			item.map(val => {
+				price += parseFloat(val.price);
+			});
+			return price.toFixed(2);
+		},
+		// 总件数
+		totalNum(item) {
+			let num = 0;
+			item.map(val => {
+				num += val.number;
+			});
+			return num;
+		},
+		// tab栏切换
+		tabsSwiperChange(index) {
+			this.swiperCurrent = index;
+			this.getDataList(index);
+		},
+		transition({ detail: { dx } }) {
+			this.$refs.noticeTabsSwiper.setDx(dx);
+		},
+		animationfinish({ detail: { current } }) {
+			this.$refs.noticeTabsSwiper.setFinishCurrent(current);
+			this.swiperCurrent = current;
+			this.current = current;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.order {
+	width: 710rpx;
+	background-color: #ffffff;
+	margin: 20rpx auto;
+	border-radius: 20rpx;
+	box-sizing: border-box;
+	padding: 20rpx;
+	font-size: 28rpx;
+	.top {
+		display: flex;
+		justify-content: space-between;
+		.left {
+			display: flex;
+			align-items: center;
+			.store {
+				margin: 0 10rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+		}
+		.right {
+			color: $u-type-warning-dark;
+		}
+	}
+	.item {
+		display: flex;
+		margin: 20rpx 0 0;
+		.left {
+			margin-right: 20rpx;
+			image {
+				width: 200rpx;
+				height: 200rpx;
+				border-radius: 10rpx;
+			}
+		}
+		.content {
+			.title {
+				font-size: 28rpx;
+				line-height: 50rpx;
+			}
+			.type {
+				margin: 10rpx 0;
+				font-size: 24rpx;
+				color: $u-tips-color;
+			}
+			.delivery-time {
+				color: #e5d001;
+				font-size: 24rpx;
+			}
+		}
+		.right {
+			margin-left: 10rpx;
+			padding-top: 20rpx;
+			text-align: right;
+			.decimal {
+				font-size: 24rpx;
+				margin-top: 4rpx;
+			}
+			.number {
+				color: $u-tips-color;
+				font-size: 24rpx;
+			}
+		}
+	}
+	.total {
+		margin-top: 20rpx;
+		text-align: right;
+		font-size: 24rpx;
+		.total-price {
+			font-size: 32rpx;
+		}
+	}
+	.bottom {
+		display: flex;
+		margin-top: 40rpx;
+		padding: 0 10rpx;
+		justify-content: space-between;
+		align-items: center;
+		.btn {
+			line-height: 52rpx;
+			width: 160rpx;
+			border-radius: 26rpx;
+			border: 2rpx solid $u-border-color;
+			font-size: 26rpx;
+			text-align: center;
+			color: $u-type-info-dark;
+		}
+		.evaluate {
+			color: $u-type-warning-dark;
+			border-color: $u-type-warning-dark;
+		}
+	}
+}
+.centre {
+	text-align: center;
+	margin: 200rpx auto;
+	font-size: 32rpx;
+	image {
+		width: 164rpx;
+		height: 164rpx;
+		border-radius: 50%;
+		margin-bottom: 20rpx;
+	}
+	.tips {
+		font-size: 24rpx;
+		color: #999999;
+		margin-top: 20rpx;
+	}
+	.btn {
+		margin: 80rpx auto;
+		width: 200rpx;
+		border-radius: 32rpx;
+		line-height: 64rpx;
+		color: #ffffff;
+		font-size: 26rpx;
+		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+	}
+}
+
+</style>
+
+<style lang="scss"
+  scoped>
+  @import './scss/notification.scss'
+</style>

h5_web/pages/notification/notification.vue

@@ -1,296 +1,82 @@
-<!-- 
- * @title 消息通知 
- * @author Rockery(1113269755@qq.com)
--->
-
+<!-- 消息通知 -->
 <template>
-	<view class="notification">
-		<view class="wrap">
-			<view class="u-tabs-box notice-tabsswiper">
-				<u-tabs-swiper bg-color="transparent" ref="noticeTabsSwiper" :list="tabsSwiperList" :current="current" @change="tabsSwiperChange" :is-scroll="false"></u-tabs-swiper>
+	<view class="notice">
+		<z-paging
+			ref="paging"
+			v-model="noticeList"
+			@query="queryList"
+		>
+			<!-- 选项卡 -->
+			<view class="notice-tab" slot="top">
+				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#f2f2f2" inactive-color="#000000" active-color="#709078" :bold="false" bar-width="40" bar-height="6" :active-item-style="{color: '#000000'}"></u-tabs>
+			</view>
+			
+			<view class="notice-list">
+				<view class="notice-list-item" v-for="(item, index) in noticeList" :key="index">
+					<view class="notice-list-item-title">{{ item.title }}</view>
+					<view class="notice-list-item-content">{{ item.content }}</view>
+					<view class="notice-list-item-bottom">
+						<view>发布于{{ item.createTime }}</view>
+						<view class="is-read" v-if="item.status === 1">已读</view>
+						<view class="no-read" v-else>未读</view>
+					</view>
+				</view>
 			</view>
-      <view class="notice-search">
-        <u-search placeholder="请输入您关键词" v-model="noticeKeyword" bg-color="#FFFFFF" input-align="center" :show-action="false" class="notice-search-btn"></u-search>
-      </view>
-			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
-				<swiper-item class="swiper-item">
-					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
-            <view class="page-box">
-              <view class="notice-container" v-for="(consultItem, index) in dataList[0]" :key="index + 'consultitem'">
-                <view class="title">{{consultItem.title}}</view>
-                <view class="content">{{consultItem.content}}</view>
-                <view class="footer">
-                  <view class="left">{{consultItem.dateTime}}</view>
-                  <view :class="consultItem.status == 0 ?'unread':'haveread'" class="right">{{consultItem.statusLabel}}</view>
-                </view>
-              </view>
-              <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
-            </view>
-					</scroll-view>
-				</swiper-item>
-				<swiper-item class="swiper-item">
-					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
-            <view class="page-box">
-              <view class="notice-container" v-for="(systemInfoItem, index) in dataList[1]" :key="index + 'systeminfo'">
-                <view class="title">{{systemInfoItem.title}}</view>
-                <view class="content">{{systemInfoItem.content}}</view>
-                <view class="footer">
-                  <view class="left">{{systemInfoItem.dateTime}}</view>
-                  <view class="right">{{systemInfoItem.status}}</view>
-                </view>
-              </view>
-              <u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
-            </view>
-					</scroll-view>
-				</swiper-item>
-			</swiper>
-		</view>
+		</z-paging>
 	</view>
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-      noticeKeyword: '',
-      tabsSwiperList: [
-      	{
-      		name: '问题咨询'
-      	},
-      	{
-      		name: '系统消息'
-      	}
-      ],
-			dataList: [
-        [
-          {
-            id: 1,
-            title: '请问针对退役军人就业有哪些什么政策',
-            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
-            dateTime: '发布于2021.09.23 12:31',
-            status: 1,
-            statusLabel: '已读'
-          },
-          {
-            id: 2,
-            title: '请问针对退役军人就业有哪些什么政策',
-            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
-            dateTime: '发布于2021.09.23 12:31',
-            status: 0,
-            statusLabel: '未读'
-          }
-        ],
-        [
-          {
-            id: 1,
-            title: '请问针对退役军人就业有哪些什么政策',
-            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
-            dateTime: '发布于2021.09.23 12:31',
-            status: 1,
-            statusLabel: '已读'
-          },
-          {
-            id: 2,
-            title: '请问针对退役军人就业有哪些什么政策',
-            content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
-            dateTime: '发布于2021.09.23 12:31',
-            status: 0,
-            statusLabel: '未读'
-          }
-        ]
-      ],
-			current: 0,
-			swiperCurrent: 0,
-			dx: 0,
-			loadStatus: ['loadmore','loadmore'],
-		};
-	},
-	onLoad() {
-		this.getDataList(0);
-	},
-	computed: {
-		// 价格小数
-		priceDecimal() {
-			return val => {
-				if (val !== parseInt(val)) return val.slice(-2);
-				else return '00';
-			};
-		},
-		// 价格整数
-		priceInt() {
-			return val => {
-				if (val !== parseInt(val)) return val.split('.')[0];
-				else return val;
-			};
-		}
-	},
-	methods: {
-		reachBottom() {
-      this.loadStatus.splice(this.current,1,"loading");
-      setTimeout(() => {
-      	this.getDataList(this.current);
-      }, 1200);
-		},
-		// 页面数据
-		getDataList(idx) {
-			this.loadStatus.splice(this.current,1,"nomore")
-		},
-		// 总价
-		totalPrice(item) {
-			let price = 0;
-			item.map(val => {
-				price += parseFloat(val.price);
-			});
-			return price.toFixed(2);
-		},
-		// 总件数
-		totalNum(item) {
-			let num = 0;
-			item.map(val => {
-				num += val.number;
-			});
-			return num;
-		},
-		// tab栏切换
-		tabsSwiperChange(index) {
-			this.swiperCurrent = index;
-			this.getDataList(index);
-		},
-		transition({ detail: { dx } }) {
-			this.$refs.noticeTabsSwiper.setDx(dx);
+	export default {
+		data() {
+			return {
+				current: 0,
+				tabList: [
+					{ value: 1, name: '培训通知', count: 10 },
+					{ value: 2, name: '就业消息', count: 0 },
+					{ value: 3, name: '系统通知', count: 100 }
+				],
+				noticeList: []
+			}
 		},
-		animationfinish({ detail: { current } }) {
-			this.$refs.noticeTabsSwiper.setFinishCurrent(current);
-			this.swiperCurrent = current;
-			this.current = current;
+		methods: {
+			getList() {
+				
+			},
+			/**
+			 * tab切换
+			 * @param { Number } cur
+			 */
+			tabChange(cur) {
+				this.current = cur
+			},
+			/**
+			 * 下拉分页组件触发
+			 * @param {Number} pageNum
+			 * @param {Number} pageSize
+			 */
+			queryList(pageNum, pageSize) {
+				this.$refs.paging.complete([
+					{
+					  id: 1,
+					  title: '请问针对退役军人就业有哪些什么政策',
+					  content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+					  createTime: '发布于2021.09.23 12:31',
+					  status: 1
+					},
+					{
+					  id: 2,
+					  title: '请问针对退役军人就业有哪些什么政策',
+					  content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
+					  createTime: '发布于2021.09.23 12:31',
+					  status: 0
+					}
+				])
+			}
 		}
 	}
-};
 </script>
 
 <style lang="scss" scoped>
-.order {
-	width: 710rpx;
-	background-color: #ffffff;
-	margin: 20rpx auto;
-	border-radius: 20rpx;
-	box-sizing: border-box;
-	padding: 20rpx;
-	font-size: 28rpx;
-	.top {
-		display: flex;
-		justify-content: space-between;
-		.left {
-			display: flex;
-			align-items: center;
-			.store {
-				margin: 0 10rpx;
-				font-size: 32rpx;
-				font-weight: bold;
-			}
-		}
-		.right {
-			color: $u-type-warning-dark;
-		}
-	}
-	.item {
-		display: flex;
-		margin: 20rpx 0 0;
-		.left {
-			margin-right: 20rpx;
-			image {
-				width: 200rpx;
-				height: 200rpx;
-				border-radius: 10rpx;
-			}
-		}
-		.content {
-			.title {
-				font-size: 28rpx;
-				line-height: 50rpx;
-			}
-			.type {
-				margin: 10rpx 0;
-				font-size: 24rpx;
-				color: $u-tips-color;
-			}
-			.delivery-time {
-				color: #e5d001;
-				font-size: 24rpx;
-			}
-		}
-		.right {
-			margin-left: 10rpx;
-			padding-top: 20rpx;
-			text-align: right;
-			.decimal {
-				font-size: 24rpx;
-				margin-top: 4rpx;
-			}
-			.number {
-				color: $u-tips-color;
-				font-size: 24rpx;
-			}
-		}
-	}
-	.total {
-		margin-top: 20rpx;
-		text-align: right;
-		font-size: 24rpx;
-		.total-price {
-			font-size: 32rpx;
-		}
-	}
-	.bottom {
-		display: flex;
-		margin-top: 40rpx;
-		padding: 0 10rpx;
-		justify-content: space-between;
-		align-items: center;
-		.btn {
-			line-height: 52rpx;
-			width: 160rpx;
-			border-radius: 26rpx;
-			border: 2rpx solid $u-border-color;
-			font-size: 26rpx;
-			text-align: center;
-			color: $u-type-info-dark;
-		}
-		.evaluate {
-			color: $u-type-warning-dark;
-			border-color: $u-type-warning-dark;
-		}
-	}
-}
-.centre {
-	text-align: center;
-	margin: 200rpx auto;
-	font-size: 32rpx;
-	image {
-		width: 164rpx;
-		height: 164rpx;
-		border-radius: 50%;
-		margin-bottom: 20rpx;
-	}
-	.tips {
-		font-size: 24rpx;
-		color: #999999;
-		margin-top: 20rpx;
-	}
-	.btn {
-		margin: 80rpx auto;
-		width: 200rpx;
-		border-radius: 32rpx;
-		line-height: 64rpx;
-		color: #ffffff;
-		font-size: 26rpx;
-		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
-	}
-}
-
-</style>
-
-<style lang="scss"
-  scoped>
-  @import './scss/notification.scss'
-</style>
+@import './scss/notification.scss';
+</style>

h5_web/pages/notification/scss/notification - 副本.scss

@@ -0,0 +1,99 @@
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+}
+/* #endif */
+
+.notification{
+  .wrap {
+  	display: flex;
+  	flex-direction: column;
+  	height: calc(100vh - var(--window-top));
+  	width: 100%;
+  }
+  
+  &-tabsswiper{
+  
+  }
+  
+  .notice-search{
+    padding: 20rpx 30rpx;
+    &-btn{
+      ::v-deep .u-content{
+        // padding: 0 !important;
+        border-radius: 10rpx !important;
+      }
+    }
+  }
+  
+  .swiper-box{
+    flex: 1;
+		margin-top: 18rpx;
+    
+    .swiper-item{
+      height: 100%;
+      
+      .page-box{
+        padding: 0 30rpx 20rpx;
+        
+        .notice-container{
+          padding: 42rpx 32rpx;
+          margin-bottom: 20rpx;
+          background-color: #FFFFFF;
+          // border-radius: 10rpx;
+          
+          .title {
+            margin-bottom: 12rpx;
+            font-size: 32rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+            line-height: 45rpx;
+            letter-spacing: 1px;
+          }
+          
+          .content {
+            margin-bottom: 12rpx;
+            font-size: 24rpx;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #545454;
+            line-height: 35rpx;
+            letter-spacing: 1px;
+          }
+          
+          .footer{
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+            
+            .left{
+              font-size: 22rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #9F9F9F;
+              line-height: 30rpx;
+            }
+            
+            .right{
+              font-size: 22rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #1A1A1A;
+              line-height: 30rpx;
+            }
+            
+            .unread{
+              color: #1A1A1A;
+            }
+            
+            .haveread{
+              color: #EF6622;
+            }
+          }
+        }
+      }
+    }
+  }
+}

h5_web/pages/notification/scss/notification.scss

@@ -4,95 +4,44 @@ page {
 	background-color: #f2f2f2;
 }
 /* #endif */
-
-.notification{
-  .wrap {
-  	display: flex;
-  	flex-direction: column;
-  	height: calc(100vh - var(--window-top));
-  	width: 100%;
-  }
-  
-  &-tabsswiper{
-    
-  }
-  
-  .notice-search{
-    padding: 20rpx 30rpx;
-    &-btn{
-      ::v-deep .u-content{
-        // padding: 0 !important;
-        border-radius: 10rpx !important;
-      }
-    }
-  }
-  
-  .swiper-box{
-    flex: 1;
-    
-    .swiper-item{
-      height: 100%;
-      
-      .page-box{
-        padding: 0 30rpx 20rpx;
-        
-        .notice-container{
-          padding: 20rpx;
-          margin-bottom: 20rpx;
-          background-color: #FFFFFF;
-          border-radius: 10rpx;
-          
-          .title{
-            margin-bottom: 12rpx;
-            font-size: 32rpx;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #000000;
-            line-height: 45rpx;
-            letter-spacing: 1px;
-          }
-          
-          .content{
-            margin-bottom: 12rpx;
-            font-size: 24rpx;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #545454;
-            line-height: 35rpx;
-            letter-spacing: 1px;
-          }
-          
-          .footer{
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            
-            .left{
-              font-size: 22rpx;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #9F9F9F;
-              line-height: 30rpx;
-            }
-            
-            .right{
-              font-size: 22rpx;
-              font-family: PingFangSC-Regular, PingFang SC;
-              font-weight: 400;
-              color: #1A1A1A;
-              line-height: 30rpx;
-            }
-            
-            .unread{
-              color: #1A1A1A;
-            }
-            
-            .haveread{
-              color: #EF6622;
-            }
-          }
-        }
-      }
-    }
-  }
+.notice {
+	
+	&-list {
+		margin-top: 18rpx;
+		padding: 0 30rpx;
+		
+		&-item {
+			background-color: #fff;
+			margin-bottom: 20rpx;
+			padding: 42rpx 32rpx;
+			
+			&-title {
+				color: #000;
+				font-size: 32rpx;
+				margin-bottom: 14rpx;
+			}
+			
+			&-content {
+				font-size: 24rpx;
+				color: #545454;
+				line-height: 38rpx;
+				margin-bottom: 14rpx;
+			}
+			
+			&-bottom {
+				display: flex;
+				justify-content: space-between;
+				font-size: 22rpx;
+				color: #9F9F9F;
+				
+				.is-read {
+					color: #EF6622;
+				}
+				
+				.no-read {
+					color: #1A1A1A;
+				}
+			}
+		}
+	}
 }

h5_web/pages/recruitStudents/recruitStudents.scss

@@ -27,4 +27,11 @@
 			line-height: 50rpx;
 		}
 	}
+}
+.progress {
+	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
 }

h5_web/pages/recruitStudents/recruitStudents.vue

@@ -4,7 +4,7 @@
 
 		<!-- 导航栏 -->
 		<u-navbar title="招生简章" :background="background" title-color="#fff" back-icon-color="#fff">
-			<view class="navbar-right" slot="right">
+			<view class="navbar-right" slot="right" @click="downloadFile(info)" v-if="info.regulation_file">
 				<u-image src="../../static/img/attachment.png" width="26" height="28" />
 				<text>下载附件</text>
 			</view>
@@ -16,6 +16,13 @@
 				<u-parse :html="info.content"></u-parse>
 			</view>
 		</view>
+		<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="20" :closeable="closeable" width="300rpx" height="300rpx">
+			<view class="progress">
+				<u-circle-progress type="primary" :percent="downloadProgress" duration="100">
+					<view>{{ downloadProgress }}%</view>
+				</u-circle-progress>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
@@ -27,13 +34,55 @@
 					backgroundColor: '#496857'
 				},
 				info: {
-					schoolName: '贵州工业职业技术学院',
-					content: '<p>贵州工业职业技术学院始建于1958年，是普通全日制公办高职学院，隶属于贵州省教育厅。下设化学与材料工程学院、机械与电气工程学院、电子与信息工程学院、城市建设学院、经济管理学院、人文社科学院和继续教育学院，还设有贵州省第44国家职业技能鉴定所和国家二级资质的贵州省危险化学工业安全技术培训中心。今年有39个招生专业，其中国家重点建设专业2个，省级重点建设专业9个。多年来，学院秉承“修德砺能 精工铸艺”的校训，紧贴产业发展需求，坚持立足贵州、面向全国，主动服务地方经济社会发展，不断深化政校企合作力度，积极与企业共建产教协同发展的双主体育人平台，与开磷（控股）集团有限公司、瓮福（集团）有限公司、黔桂集团、中国水环境集团、贵州吉利汽车新能源有限公司等企业建立了长期稳定的合作关系。</p><h4>招生对象及录取原则</h4>'
-				}
+					schoolName: '',
+					content: '',
+					regulation_file: ''
+				},
+				downloadProgress: 0,
+				show: false,
+				closeable: false
+			}
+		},
+		onLoad(page) {
+			if (page.id) {
+				this.info.schoolName = page.name;
+				this.getSchoolIntroduction(page.id);
 			}
 		},
 		methods: {
-
+			/**
+			 * @param {Object} id
+			 */
+			getSchoolIntroduction(id) {
+				this.$u.api.school.getSchoolIntroduction({ id }).then(res => {
+					if (res.code === 200) {
+						this.info.content = res.data.regulation
+						this.info.regulation_file = res.data.regulation_file
+					}
+				})
+			},
+			downloadFile(info) {
+				this.show = true
+				this.closeable = false
+				const downloadTask = uni.downloadFile({
+					url: info.regulation_file,
+					success: (e) => {
+						if (e.statusCode === 200) {
+							console.log('下载成功', e.tempFilePaths)
+							this.closeable = true
+						}
+					},
+					fail: (err) => {
+						console.log(err)
+					}
+				});
+				downloadTask.onProgressUpdate((res) => {
+					console.log('下载进度' + res.progress);
+					this.downloadProgress = res.progress
+					console.log('已经下载的数据长度' + res.totalBytesWritten);
+					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
+				});
+			}
 		}
 	}
 </script>

h5_web/pages/schoolDetails/schoolDetails.vue

@@ -112,7 +112,7 @@
 		data() {
 			return {
 				background: {
-					backgroundColor: 'transparent'
+					backgroundColor: '#3D5D4C'
 				},
 				// 学校相册
 				picList: [],

h5_web/pages/schools/schools.vue

@@ -8,9 +8,7 @@
 					input-align="center" :show-action="false" bg-color="#ffffff" height="70" @search="keywordChange"/>
 			</view>
 			<view class="school-list">
-				<view class="school-list-item" v-for="(item, index) in schoolList" :key="index" @click="jumpPage('/pages/schoolDetails/schoolDetails', {
-					schoolId: item.id
-				})">
+				<view class="school-list-item" v-for="(item, index) in schoolList" :key="index" @click="recordBrowseTotal(item)">
 					<view class="school-list-item-left">
 						<view class="image">
 							<image :src="item.schoolLogoUrl" mode=""></image>
@@ -134,6 +132,25 @@
 					url: url,
 					params: params
 				})
+			},
+			/**
+			 * 学校关注度统计
+			 * @param {Object} item
+			 */
+			recordBrowseTotal(item) {
+				const query = {
+					platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
+					pages: location.href,//页面路径
+					btnName: '查看学院详情',//按钮名称
+					btnEvent: '1',//按钮事件: 1-点击 2-长按 3-滑动
+					ipAddress: '',//IP地址
+					typeName: '学校关注度',//类型名称 例：学校关注度 、适应性考试等
+					typeCode: 'XXGZD',// 类型编码 例：类型名称首字母缩写(XXGZD)
+					categoryName: item.schoolName,//类别名称 例：XX学校，SS考试
+				}
+				this.$u.api.postAnalysis(query).then(res => {
+					this.jumpPage('/pages/schoolDetails/schoolDetails', { schoolId: item.id })
+				})
 			}
 		}
 	}

h5_web/pages/skillsTraining/courseDetailed/courseDetailed.scss

@@ -0,0 +1,266 @@
+/* 技能培训---课程详细 */
+page {
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+	
+	.details {
+		
+		&-video {
+			
+			&-con {
+				width: 100%;
+				height: 400rpx;
+			}
+		}
+		
+		&-content {
+			background-color: #fff;
+			padding: 20rpx 30rpx;
+			margin-top: -6rpx;
+			border-radius: 0 0 18rpx 18rpx;
+			
+			&-title {
+				color: #424242;
+				font-size: 36rpx;
+				font-weight: 500;
+			}
+			
+			&-progress {
+				padding: 26rpx 0;
+				color: #EF651F;
+				font-size: 26rpx;
+			}
+			
+			&-teacher {
+				font-size: 32rpx;
+				color: #424242;
+				margin-bottom: 22rpx;
+			}
+			
+			&-info {
+				color: #545454;
+				font-size: 24rpx;
+				line-height: 44rpx;
+			}
+		}
+		
+		&-classes {
+			background-color: #fff;
+			border-radius: 18rpx 18rpx 0 0;
+			padding: 42rpx 30rpx;
+			margin-top: 26rpx;
+			&-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				color: #424242;
+				font-size: 36rpx;
+				view {
+					&:last-child {
+						color: #A3A3A3;
+						font-size: 24rpx;
+					}
+				}
+			}
+			&-list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 30rpx;
+				&-item {
+					margin-right: 20rpx;
+					view {
+						&:first-child {
+							padding: 20rpx 34rpx;
+							background-color: #C4C4C4;
+							color: #fff;
+							font-size: 40rpx;
+							border-radius: 16rpx;
+						}
+						&:last-child {
+							text-align: center;
+							margin-top: 10rpx;
+							color: #827F7F;
+							font-size: 24rpx;
+						}
+					}
+				}
+				.active {
+					view {
+						&:first-child {
+							background: linear-gradient(168deg, #A5C8AC 0%, #709078 100%);
+						}
+						&:last-child {
+							color: #709078;
+						}
+					}
+				}
+			}
+		}
+		
+		&-line {
+			height: 1px;
+			width: 100%;
+			background-color: #fff;
+			padding: 0 30rpx;
+			view {
+				height: 1px;
+				width: 100%;
+				background-color: #CDCDCD;
+			}
+		}
+		
+		&-comment {
+			background-color: #fff;
+			border-radius: 0 0 18rpx 18rpx;
+			padding: 30rpx;
+			&-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 30rpx;
+				view {
+					&:first-child {
+						font-size: 36rpx;
+						color: #424242;
+					}
+					&:last-child {
+						color: #8D8D8D;
+						font-size: 24rpx;
+					}
+				}
+			}
+			&-list {
+				&-item {
+					margin-bottom: 60rpx;
+					display: flex;
+					align-items: center;
+					// &:last-child {
+					// 	padding-bottom: 60rpx;
+					// 	margin-bottom: 20rpx;
+					// 	border-bottom: solid 1px #DBDBDB;
+					// }
+					.left {
+						margin-right: 24rpx;
+					}
+					.right {
+						view {
+							line-height: 40rpx;
+							&:last-child {
+								color: #3D3D3D;
+								font-size: 28prx;
+							}
+							&:nth-child(2) {
+								font-size: 24rpx;
+								color: #A5A5A5;
+								text {
+									margin-left: 10rpx;
+								}
+							}
+							&:last-child {
+								font-size: 24rpx;
+								color: #6C6C6C;
+							}
+						}
+					}
+				}
+			}
+			&-page {
+				border-bottom: solid 1px #DBDBDB;
+				padding-bottom: 10rpx;
+			}
+			&-mine {
+				margin-top: 46rpx;
+				font-size: 36rpx;
+				color: #000000;
+				margin-bottom: 20rpx;
+			}
+			&-conent {
+				&-star {
+					margin-bottom: 22rpx;
+				}
+				&-textarea {
+					background-color: #F5F5F5;
+				}
+				&-button {
+					height: 80rpx;
+					line-height: 80rpx;
+					background-color: #709078;
+					text-align: center;
+					color: #fff;
+					font-size: 30rpx;
+					margin-top: 52rpx;
+				}
+			}
+		}
+	}
+}
+
+.video-control {
+	background-color: rgba(0, 0, 0, 0.1);
+	height: 90rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 997;
+}
+.video-wrap {
+	position: relative;
+}
+.multi-list.full-screen.vertical {
+	height: 100vh !important;
+	padding: 8vh 0;
+}
+.multi-list.full-screen.horizontal {
+	height: 100vw !important;
+	padding: 8vw 0;
+}
+.multi {
+	position: absolute;
+	right: 30rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 998;
+	width: 100rpx;
+	color: #fff;
+	padding: 10rpx 0;
+	text-align: center;
+	transition: color ease 0.3s;
+}
+.multi.rate {
+	right: 30rpx;
+}
+.multi-list {
+	position: absolute;
+	height: 100%;
+	width: 0;
+	background-color: rgba(0, 0, 0, 0.65);
+	top: 0;
+	right: 0;
+	transition: width 0.3s ease;
+	z-index: 999;
+	box-sizing: border-box;
+	padding: 20rpx 0;
+}
+.multi-list.rate {
+	padding: 25rpx 0;
+}
+.multi-list.active {
+	width: 200rpx;
+}
+.multi-item {
+	text-align: center;
+	color: #fff;
+	line-height: 80rpx;
+	transition: color ease 0.3s;
+}
+.multi-item.rate {
+	line-height: 70rpx;
+}
+.multi-item:hover,
+.multi:hover {
+	color: #00d8ff;
+}
+.multi-item.active {
+	color: #00d8ff;
+}

h5_web/pages/skillsTraining/courseDetailed/courseDetailed.vue

@@ -0,0 +1,363 @@
+<template>
+	<view class="details">
+		<!-- 视频 -->
+		<view class="details-video" v-if="isPlay">
+			<video class="details-video-con" id="myVideo" @timeupdate="timeUpdate" :src="videoInfo.videoUrl" controls
+				:initial-time="initial_time" object-fit="fill" play-btn-position="center" @tap="videoClick">
+				<cover-view class="video-control">
+					<cover-view class="multi rate" @tap.stop="showSwitchRate">x {{ currentRate }}</cover-view>
+				</cover-view>
+				<cover-view class="multi-list rate" :class="{ active: rateShow }">
+					<cover-view v-for="(item, index) in ['0.5', '1.0', '1.5', '2.0']" :key="index"
+						class="multi-item rate" :data-rate="item" @tap="switchRate"
+						:class="{ active: item == currentRate }">
+						{{ item }}
+					</cover-view>
+				</cover-view>
+			</video>
+		</view>
+		<!-- 介绍 -->
+		<view class="details-content">
+			<view class="details-content-title">{{ videoInfo.chapterName }}</view>
+			<view class="details-content-progress">本课程
+				共{{ info.amount }}课，已学完{{ info.finishCount }}课，共进度{{ info.finishPercent || 0 }}%</view>
+			<view class="details-content-teacher">主讲老师：{{ info.presenter }}</view>
+			<view class="details-content-info">{{ videoInfo.chapterInfo }}</view>
+		</view>
+
+		<!-- 课程章节 -->
+		<view class="details-classes">
+			<view class="details-classes-header">
+				<view>精选课程</view>
+				<view>更多
+					<u-icon name="arrow-right" size="22" color="#A3A3A3" />
+				</view>
+			</view>
+			<view class="details-classes-list">
+				<view class="details-classes-list-item" v-for="(item, index) in info.chapterList" :key="index"
+					:class="{'active': index === videoIndex }" @click="classesClick(index)">
+					<view>{{ index + 1 }}</view>
+					<view>{{ item.flag === 2 ? '已学' : (item.finishPercent + '%') }}</view>
+				</view>
+			</view>
+		</view>
+		<view class="details-line">
+			<view></view>
+		</view>
+		<!-- 评论 -->
+		<view class="details-comment">
+			<view class="details-comment-header">
+				<view>课程评论</view>
+				<view>共{{ total }}条评论</view>
+			</view>
+			<view class="details-comment-list">
+				<view class="details-comment-list-item" v-for="(item, index) in commentList" :key="index">
+					<view class="left">
+						<u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar>
+					</view>
+					<view class="right">
+						<view>{{ item.createBy }}</view>
+						<view>
+							<u-rate :count="5" size="24" disabled="" active-color="#C4C4C4" v-model="item.starLevel">
+							</u-rate>
+							<text>{{ item.createTime }}</text>
+						</view>
+						<view>{{ item.content }}</view>
+					</view>
+				</view>
+			</view>
+			<view class="details-comment-page" v-if="total">
+				<wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
+			</view>
+
+			<view class="details-comment-mine">
+				<text>我的评论</text>
+			</view>
+
+			<view class="details-comment-conent">
+				<view class="details-comment-conent-star">
+					<u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate>
+				</view>
+				<view class="details-comment-content-textarea">
+					<u-input v-model="form.content" placeholder="请输入您的评价" type="textarea"
+						:custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }">
+					</u-input>
+				</view>
+				<view class="details-comment-conent-button" @click="submitCommet">提交</view>
+			</view>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
+	export default {
+		data() {
+			return {
+				info: {},
+				videoContext: uni.createVideoContext('myVideo', this),
+				videoInfo: {},
+				videoIndex: 0,
+				// 视频实时时间
+				initial_time: 0,
+				// 视频已经播放时间
+				playedTime: 0,
+				rateShow: false, // 倍速浮层
+				currentRate: 1.0, // 默认倍速
+				// 视频实际时间
+				video_real_time: 0,
+				classesId: '',
+				isPlay: true,
+				query: {
+					pageNum: 1,
+					pageSize: 5,
+					tabId: ''
+				},
+				total: 0,
+				commentList: [],
+				form: {
+					tabId: '',
+					starLevel: 0,
+					content: ''
+				},
+				currentDuration: 0
+			}
+		},
+		onLoad(page) {
+			if (page.id) {
+				this.getClassesDetails(page.id);
+				this.classesId = page.id
+			}
+		},
+		beforeDestroy() {
+			let playDuration = this.video_real_time;
+			if (this.videoInfo.playDuration > this.video_real_time) {
+				this.currentDuration = this.video_real_time;
+				playDuration = this.videoInfo.playDuration
+			} else {
+				this.currentDuration = this.video_real_time
+			}
+			this.submitTimeLong({
+				tabId: this.videoInfo.id,
+				playDuration: playDuration,
+				currentDuration: this.currentDuration
+			}, 0, true)
+		},
+		methods: {
+			/**
+			 * 显示倍速浮层
+			 * @param {Object} rate
+			 */
+			showSwitchRate(rate) {
+				let that = this;
+				that.rateShow = true;
+			},
+			/**
+			 * 切换倍速
+			 * @param {Object} e
+			 */
+			switchRate(e) {
+				let that = this;
+				let rate = Number(e.currentTarget.dataset.rate);
+				that.currentRate = rate;
+				that.rateShow = false;
+				this.videoContext.playbackRate(rate);
+			},
+			/**
+			 * 视频点击
+			 * @param {Object} e
+			 */
+			videoClick(e) {
+				this.rateShow = false;
+			},
+			/**
+			 * 获取课程详情
+			 * @param {Object} id
+			 */
+			getClassesDetails(id) {
+				this.$u.api.school.getPackageCourseDetail({
+					id
+				}).then(res => {
+					if (res.code === 200) {
+						console.log(res)
+						this.info = res.data;
+						this.videoInfo = res.data.chapterList[this.videoIndex];
+						this.initial_time = Number(res.data.chapterList[this.videoIndex].currentDuration)
+						this.video_real_time = Number(res.data.chapterList[this.videoIndex].playDuration)
+						this.playedTime = Number(res.data.chapterList[this.videoIndex].playDuration)
+						this.query.tabId = res.data.chapterList[this.videoIndex].id
+						this.form.tabId = res.data.chapterList[this.videoIndex].id
+						this.query.pageNum = res.data.page;
+						this.isPlay = true
+						this.getCommentList();
+					}
+				})
+			},
+			/**
+			 * 课程章节点击
+			 * @param {Object} index
+			 */
+			classesClick(index) {
+				this.isPlay = false;
+				let playDuration = this.video_real_time;
+				if (this.videoInfo.playDuration > this.video_real_time) {
+					this.currentDuration = this.video_real_time;
+					playDuration = this.videoInfo.playDuration
+				} else {
+					this.currentDuration = this.video_real_time
+				}
+				this.submitTimeLong ({
+					tabId: this.videoInfo.id,
+					playDuration: playDuration,
+					currentDuration: this.currentDuration
+				}, index);
+			},
+			/**
+			 * 控制视频不能快进
+			 * @param {Object} e
+			 */
+			timeUpdate(e) {
+				let isReady = 1; // 是否开启可以视频快进 1 禁止开启
+				if (this.videoInfo.finishPercent === 100) {
+					isReady = 3;
+				}
+				//跳转到指定播放位置 initial-time 时间为秒
+				let that = this;
+				//播放的总时长
+				let duration = e.detail.duration
+				//实时播放进度 秒数
+				let currentTime = parseInt(e.detail.currentTime)
+				//当前视频进度
+				let jump_time = 0
+				if (that.video_real_time == 0) {
+					jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
+				} else {
+					jump_time = parseInt(that.video_real_time)
+				}
+				console.log('jump_time', jump_time)
+				console.log('that.initial_time', that.initial_time)
+				console.log('this.playedTime', this.playedTime)
+				console.log('that.video_real_time', that.video_real_time)
+				if (jump_time > this.playedTime) {
+					isReady = 1;
+				} else {
+					isReady = 3;
+				}
+				if(isReady === 1){
+					if (currentTime > jump_time && currentTime - jump_time > 3) {
+						let videoContext = wx.createVideoContext('myVideo')
+						videoContext.seek(that.video_real_time)
+						wx.showToast({
+							title: '未完整看完该视频，不能快进',
+							icon: 'none',
+							duration: 2000,
+						})
+					}
+				}
+				that.video_real_time = currentTime //实时播放进度
+			},
+			/**
+			 * 提交课程时长
+			 */
+			submitTimeLong({
+				tabId,
+				playDuration,
+				currentDuration
+			}, index, flag) {
+				if (tabId) {
+					this.$u.api.training.videoTimeLongApi({
+						tabId,
+						playDuration,
+						currentDuration
+					}).then(res => {
+						if (res.code === 200) {
+							if (!flag) {
+								this.$refs.uToast.show({
+									title: '已记录章节时长!',
+									type: 'success'
+								})
+								this.videoInfo = this.info.chapterList[index]
+								this.form.tabId = this.videoInfo.id
+								this.query.tabId = this.videoInfo.id
+								this.videoIndex = index
+								this.getClassesDetails(this.classesId);
+							}
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							})
+						}
+					})
+				}
+			},
+			/**
+			 * 获取评论列表
+			 */
+			getCommentList() {
+				if (this.query.tabId) {
+					this.$u.api.training.getClassesCommentApi(this.query).then(res => {
+						if (res.code === 200) {
+							this.total = Number(res.data.total);
+							this.commentList = res.data.rows
+						}
+					})
+				}
+			},
+			/**
+			 * @param {Object} e 分页触发
+			 */
+			pageChange(e) {
+				this.query.pageNum = e.current
+				this.getCommentList()
+			},
+			/**
+			 * 提交评论
+			 */
+			submitCommet() {
+				if (this.form.tabId) {
+					if (this.form.starLevel && this.form.content) {
+						this.$u.api.training.addClassesCommentApi(this.form).then(res => {
+							if (res.code === 200) {
+								this.$refs.uToast.show({
+									title: '评论成功!',
+									type: 'success'
+								})
+								this.form.content = ''
+								this.form.starLevel = 0
+								this.getCommentList();
+							} else {
+								this.$refs.uToast.show({
+									title: res.msg,
+									type: 'error'
+								})
+							}
+						})
+					}
+					if (!this.form.starLevel) {
+						this.$refs.uToast.show({
+							title: '请选择星级',
+							type: 'warning'
+						})
+					}
+					if (!this.form.content) {
+						this.$refs.uToast.show({
+							title: '请输入评论内容',
+							type: 'warning'
+						})
+					}
+				} else {
+					this.$refs.uToast.show({
+						title: '未找到课程章节,无法提交评论!',
+						type: 'warning'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './courseDetailed.scss';
+</style>

h5_web/pages/skillsTraining/registrationNotice/registrationNotice.scss

@@ -0,0 +1,56 @@
+/* 报班通知 */
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+}
+/* #endif */
+.registration {
+	&-list {
+		padding: 26rpx 30rpx;
+		&-item {
+			background-color: #fff;
+			padding: 36rpx 32rpx;
+			margin-bottom: 20rpx;
+			border-radius: 10rpx;
+			display: flex;
+			.left {
+				margin-right: 22rpx;
+			}
+			.right {
+				width: calc(100% - 204rpx);
+				line-height: 50rpx;
+				.name {
+					font-size: 34rpx;
+					color: #373737;
+					font-weight: 500;
+				}
+				.school {
+					font-size: 24rpx;
+					color: #525252;
+				}
+				.content {
+					overflow: hidden;
+					text-overflow:ellipsis;
+					white-space: nowrap;
+					width: 100%;
+				}
+				.button {
+					background-color: #709078;
+					width: 120rpx;
+					height: 50rpx;
+					line-height: 50rpx;
+					text-align: center;
+					border-radius: 40rpx;
+					font-size: 24rpx;
+					color: #fff;
+					margin-top: 20rpx;
+				}
+				.end {
+					background-color: #CECECE;
+				}
+			}
+		}
+	}
+}

h5_web/pages/skillsTraining/registrationNotice/registrationNotice.vue

@@ -0,0 +1,71 @@
+<!-- 报班通知 -->
+<template>
+	<view class="registration">
+		<z-paging
+			ref="paging"
+			v-model="noticeList"
+			@query="queryList"
+		>
+			<view class="registration-list">
+				<view class="registration-list-item" v-for="(item, index) in noticeList" :key="index">
+					<view class="left">
+						<u-image :src="item.img" mode="aspectFill" width="204" height="220" border-radius="10"/>
+					</view>
+					<view class="right">
+						<view class="name">{{ item.name }}</view>
+						<view class="school">{{ item.school }}</view>
+						<view class="content">{{ item.content }}</view>
+						<view class="button" :class="{'end': item.status === 1}">{{ item.status === 1 ? '结束' : '报名' }}</view>
+					</view>
+				</view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				noticeList: []
+			}
+		},
+		methods: {
+			/**
+			 * 下拉分页组件触发
+			 * @param {Number} pageNum
+			 * @param {Number} pageSize
+			 */
+			queryList(pageNum, pageSize) {
+				this.$refs.paging.complete([
+					{
+						id: 1,
+						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
+						name: '厨师培训',
+						school: '贵州装备制造职业学院',
+						content: '核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规'
+					},
+					{
+						id: 2,
+						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
+						name: '厨师培训',
+						school: '贵州装备制造职业学院',
+						content: '核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规',
+						status: 1
+					},
+					{
+						id: 3,
+						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
+						name: '厨师培训',
+						school: '贵州装备制造职业学院',
+						content: '核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规核心课程汽车构造让知及汽保工具规'
+					}
+				])
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import './registrationNotice.scss';
+</style>

h5_web/pages/skillsTraining/skillsPackage/skillsPackage.scss

@@ -0,0 +1,174 @@
+/* 技能包 */
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+}
+/* #endif */
+.package {
+	padding-bottom: 150rpx;
+	&-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: 196rpx;
+				}
+			}
+			.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;
+				}
+				.status {
+					width: 100%;
+					height: 44rpx;
+					line-height: 44rpx;
+					text-align: center;
+					background-color: #709078;
+					color: rgba($color: #fff, $alpha: 0.7);
+					font-size: 24rpx;
+					border-radius: 40rpx;
+					margin-top: 20rpx;
+				}
+			}
+		}
+		
+		&-details {
+			padding: 40rpx 32rpx;
+			background-color: #fff;
+			border-radius: 10rpx;
+			margin-top: 20rpx;
+			
+			&-classes {
+				border-bottom: solid 1px #CDCDCD;
+				padding-bottom: 20rpx;
+				margin-bottom: 32rpx;
+				.title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 26rpx;
+					color: #9D9D9D;
+					padding-bottom: 34rpx;
+					text {
+						color: #424242;
+						font-size: 36rpx;
+						margin-right: 22rpx;
+					}
+				}
+				.list {
+					.swiper-item {
+						width: 50%!important;
+						height: 100%;
+						.classes-name {
+							color: #2E2E2E;
+							font-size: 26rpx;
+							margin: 10rpx 0;
+						}
+						.classes-subtitle {
+							font-size: 24rpx;
+							color: #818181;
+						}
+					}
+				}
+			}
+			
+			&-skill {
+				.title {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-size: 26rpx;
+					color: #9D9D9D;
+					padding-bottom: 34rpx;
+					text {
+						color: #424242;
+						font-size: 36rpx;
+						margin-right: 22rpx;
+					}
+				}
+			}
+		}
+	}
+	
+	&-btn {
+		width: 100%;
+		height: 96rpx;
+		line-height: 96rpx;
+		text-align: center;
+		font-size: 36rpx;
+		color: #fff;
+		background-color: #709078;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+	}
+}

h5_web/pages/skillsTraining/skillsPackage/skillsPackage.vue

@@ -0,0 +1,126 @@
+<!-- 技能包 -->
+<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="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"></u-rate>
+						报名人数：10/20
+					</view>
+					<view class="status">未开班</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')">更多
+							<u-icon name="arrow-right" color="#9D9D9D"></u-icon>
+						</view>
+					</view>
+					<view class="list">
+						<swiper class="swiper" :indicator-dots="false" :autoplay="false" height="196rpx">
+							<swiper-item class="swiper-item" v-for="(item, index) in details.classesList" :key="index" @click="jumpPage('pages/skillsTraining/courseDetailed/courseDetailed')">
+								<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>
+					</view>
+				</view>
+				<!-- 技能详解 -->
+				<view class="package-content-details-skill">
+					<view class="title">
+						<view>
+							<text>技能详解</text>深入了解本课程
+						</view>
+					</view>
+					<view class="content">
+						<u-parse :html="details.content"></u-parse>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="package-btn" @click="jumpPage('/pages/skillsTraining/submitSuccess/submitSuccess')">报名</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				details: {
+					star: 3,
+					classesList: [{
+							img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
+							name: '解锁！轮胎更换诀窍',
+							subtitle: '线上课程'
+						},
+						{
+							img: 'https://img.redocn.com/sheying/20160805/caoyuanshaoyaohuahuahai_6869505.jpg',
+							name: '解锁！轮胎更换诀窍',
+							subtitle: '线上课程'
+						},
+						{
+							img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
+							name: '解锁！轮胎更换诀窍',
+							subtitle: '线上课程'
+						},
+						{
+							img: 'https://file03.16sucai.com/2017/1100/16sucai_p20161119096_1e4.JPG',
+							name: '解锁！轮胎更换诀窍',
+							subtitle: '线上课程'
+						}
+					],
+					content: `<p>露从今夜白，月是故乡明</p>
+					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />`
+				}
+			}
+		},
+		methods: {
+			/**
+			 * 跳转到指定页面
+			 * @param {Object} url
+			 * @param {Object} params
+			 */
+			jumpPage(url, params) {
+				this.$u.route({
+					url,
+					params
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './skillsPackage.scss';
+</style>

h5_web/pages/skillsTraining/skillsTraining - 副本.scss

@@ -0,0 +1,115 @@
+.banner{
+	width: 100%;
+	margin-bottom: 24rpx;
+}
+.iconNav{
+	.iconNav-item{
+		width: 25%;
+		margin: 24rpx 0;
+		text-align: center;
+		.iconNav-item-img{width: 98rpx;height: 98rpx;}
+	}
+	&.no-head{
+		.card-head{display: none;}
+		/deep/ .u-card__head{padding: 0!important;}
+		/deep/ .u-card__body{padding-top: 0!important;}
+	}
+}
+.skill-list{
+	.u-body-item{
+		width: 48%;
+		height: 320rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+		position: relative;
+		margin-bottom: 24rpx;
+		image{width: 100%;height: 100%;}
+		.text{
+			position: absolute;
+			left: 24rpx;
+			right: 24rpx;
+			bottom: 24rpx;
+			z-index: 6;
+			color: #d8d8d8;
+			.name{font-size: 30rpx;}
+		}
+		&::after{
+			content: '';
+			width: 100%;
+			height: 100rpx;
+			position: absolute;
+			left: 0;
+			bottom: 0;
+			background: linear-gradient(0deg,#000,rgba(255,255,255,0));
+			z-index: 5;
+		}
+	}
+}
+.school-list{
+	.school-logo-wrap{
+		margin-bottom: 48rpx;
+		.school-logo{
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			opacity: 0.5;
+			&.active{
+				opacity: 1;
+			}
+		}
+	}
+	.name{
+		margin-bottom: 24rpx;
+		.text{
+			font-weight: bold;
+		}
+	}
+}
+.support{
+	.big-news{
+		height: 400rpx;
+		position: relative;
+		margin-bottom: 24rpx;
+		image{width: 100%;height: 100%;}
+		.text{
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			padding: 24rpx;
+			color: #fff;
+			background: rgba(0,0,0,.5);
+			z-index: 6;
+			.name{font-size: 35rpx;}
+		}
+	}
+	.u-body-item{
+		.u-body-item-title{
+			margin-bottom: 15rpx;
+		}
+		.foot{
+			font-size: 24rpx;
+			color: #ddd;
+			.time{
+				margin-left: 24rpx;
+			}
+		}
+	}
+	.u-card-wrap {
+		background-color: $u-bg-color;
+		padding: 1px;
+	}
+	.u-body-item {
+		// font-size: 32rpx;
+		color: #333;
+		padding: 20rpx 10rpx;
+	}
+		
+	.u-body-item image {
+		width: 120rpx;
+		flex: 0 0 120rpx;
+		height: 120rpx;
+		border-radius: 8rpx;
+		margin-left: 12rpx;
+	}
+}

h5_web/pages/skillsTraining/skillsTraining - 副本.vue

@@ -0,0 +1,283 @@
+<template>
+	<view>
+		<image class="banner" src="../../static/img/banner-skillsTraining.png" mode="scaleToFill"></image>
+		<view class="statistics u-flex u-row-between f-padding f-mb">
+			<view class="statistics-item u-flex">我的学习时长：206小时</view>
+			<view class="statistics-item u-flex">我的考试通过数：32</view>
+		</view>
+		<u-card class="iconNav no-head" :border="false" :head-border-bottom="false" :foot-border-top="false" :full="true" border-radius="0">
+			<view class="card-head" slot="head">
+				<view class="card-head-title">综合服务</view>
+			</view>
+			<view class="iconNav-body u-flex u-flex-wrap u-row-left" slot="body">
+				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')">
+					<image class="iconNav-item-img" src="../../static/img/index-service-01.png" mode="aspectFill"></image>
+					<view class="iconNav-item-text">网络课程</view>
+				</view>
+				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
+					<image class="iconNav-item-img" src="../../static/img/index-service-02.png" mode="aspectFill"></image>
+					<view class="iconNav-item-text">线下实训</view>
+				</view>
+				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
+					<image class="iconNav-item-img" src="../../static/img/index-service-03.png" mode="aspectFill"></image>
+					<view class="iconNav-item-text">参加考试</view>
+				</view>
+				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
+					<image class="iconNav-item-img" src="../../static/img/index-service-04.png" mode="aspectFill"></image>
+					<view class="iconNav-item-text">我的班级</view>
+				</view>
+			</view>
+		</u-card>
+		<u-search class="search f-padding" placeholder="搜索课程" v-model="keyword" @focus="selectShow = true" @search="search" @custom="search" ></u-search>
+		<u-select v-model="selectShow"  mode="mutil-column-auto" :list="selectList" @confirm="selectConfirm"></u-select>
+		
+		<u-card class="skill-list"
+		:body-style="{'padding-bottom':'0'}"
+		:border="false" 
+		:foot-border-top="false" 
+		:full="true" border-radius="0">
+			<view class="card-head" slot="head">
+				<view class="card-head-title">技能包</view>
+			</view>
+			<view class="news-list-body u-flex u-row-between u-flex-wrap" slot="body">
+				<u-nodata notice="暂无新闻" v-if="skillList.length==0"></u-nodata>
+				<view v-for="(item,index) in skillList" 
+				@click="skillClick(item)"
+				:key="item.artId" 
+				class="u-body-item">
+					<image :src="item.img" mode="scaleToFill"></image>
+					<view class="text">
+						<view class="name">{{item.name}}</view>
+						<view class="school">{{item.school}}</view>
+					</view>
+				</view>
+			</view>
+		</u-card>
+		
+		<u-card class="school-list"
+		:body-style="{'margin-bottom':'0','padding-bottom':'0'}"
+		:border="false" 
+		:foot-border-top="false" 
+		:full="true" border-radius="0">
+			<view class="card-head u-flex u-row-between" slot="head">
+				<view class="card-head-title">合作院校</view>
+				<view class="right" @click="openPage('pages/schools/schools')">
+					查看更多
+					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
+				</view>
+			</view>
+			<view class="school-list-body" slot="body">
+				<u-nodata notice="暂无合作院校" v-if="schoolList.length==0"></u-nodata>
+				<view class="school-logo-wrap u-flex u-row-between">
+					<image 
+					@click="schoolToggle(index)"
+					:class="{active:schoolActive==index}"
+					class="school-logo" 
+					v-for="(item,index) in schoolList" :key="item.id" 
+					:src="item.schoolLogoUrl" 
+					mode="aspectFit"></image>
+				</view>
+				<view class="name u-flex u-row-between" @click="schoolClick(schoolList[schoolActive])">
+					<view class="text">{{schoolList[schoolActive].schoolName}}</view>
+					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
+				</view>
+				<view class="content">
+					{{schoolList[schoolActive].detatil}}
+				</view>
+			</view>
+		</u-card>
+		<u-card class="support"
+		:body-style="{'margin-bottom':'24rpx'}"
+		:border="false" 
+		:foot-border-top="false" 
+		:full="true" border-radius="0">
+			<view class="card-head u-flex u-row-between" slot="head">
+				<view class="card-head-title">政策支持</view>
+			</view>
+			<view class="support-body" slot="body">
+				<u-nodata notice="暂无新闻" v-if="schoolList.length==0"></u-nodata>
+				<view class="big-news" @click="$u.route('/pages/newsDetails/newsDetails',{artId:bigNews.artId})">
+					<image :src="bigNews.artImage" mode="aspectFill"></image>
+					<view class="text">{{bigNews.artTitle}}</view>
+				</view>
+				<view v-for="(item,index) in newsList"
+				@click="$u.route('/pages/newsDetails/newsDetails',{artId:item.artId})"
+				:key="item.artId" 
+				class="u-body-item u-flex u-border-bottom u-col-between u-row-between">
+					<view class="news-text">
+						<view class="u-body-item-title u-line-2">{{item.artTitle}}</view>
+						<view class="foot u-flex">
+							<view class="">{{item.artCategoryName}}</view>
+							<view class="time">{{$u.timeFormat(item.createTime.replace(/-/g, '/'), 'mm月dd日 hh时MM分')}}</view>
+						</view>
+					</view>
+					<image :src="item.artImage" mode="aspectFill"></image>
+				</view>
+			</view>
+		</u-card>
+	</view>
+</template>
+<script>
+	import mock from "../../static/js/mock.js";
+	export default{
+		data(){
+			return{
+				schoolActive:0,
+				keyword:'',
+				selectShow:false,
+				newsList:[],
+				bigNews:[],
+				skillList:mock.skillList,
+				schoolList:[],
+				selectList:[
+					{
+						value: 1,
+						label: '贵州交通职业技术学院',
+						children: [
+							{
+								value: 2,
+								label: '技术1'
+							},
+							{
+								value: 5,
+								label: '技术2'
+							}
+						]
+					},
+					{
+						value: 8,
+						label: '贵州医学院',
+						children: [
+							{
+								value: 9,
+								label: '技术3'
+							}
+						]
+					}
+				],
+			}
+		},
+		onLoad(){
+			this.getNewsList();
+			this.getSchoolList();
+		},
+		onShow(){
+			
+		},
+		methods:{
+			getSchoolList(){
+				this.$u.api.getSchoolList({pageNum:1,pageSize:5}).then(res=>{
+					if(res.code ==200){
+						this.schoolList = res.rows
+					}else{
+						uni.showToast({
+							icon:'none',
+							title:res.msg
+						})
+					}
+				})
+			},
+			openPage(path,msg) {
+			  this.$u.route({
+			    url: path,
+				params:{
+					msg:msg
+				}
+			  })
+			},
+			getNewsList(){
+				let params ={
+					artCategoryId:2,
+					pageNum:1,
+					pageSize:10
+				}
+				this.$u.api.getIndexNewsList(params)
+				.then(res=>{
+					this.newsList = res.rows;
+					this.bigNews = this.newsList[0];
+					this.newsList.shift();
+					console.log('this.newsList', this.newsList)
+					// console.log('newsList',JSON.parse(JSON.stringify(res.rows)));
+				})
+			},
+			selectConfirm(e){
+				console.log('selectConfirm',e);
+				this.keyword = e[0].label +' ' + e[1].label
+			},
+			search(e){
+				this.$u.route({
+					url: 'pages/index/index',
+					type:'switchTab'
+				});
+				console.log('selectConfirm',e)
+			},
+			schoolToggle(index){
+				this.schoolActive = index;
+				console.log('schoolToggle index',index)
+			},
+			skillClick(item){
+				console.log('item',item);
+				let analysisParams ={
+					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
+					pages:location.href,//页面路径
+					btnName:'',//按钮名称
+					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
+					ipAddress:'',//IP地址
+					typeName:'技能培训关注度',//类型名称 例：学校关注度 、适应性考试等
+					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
+					categoryName:item.name,//类别名称 例：XX学校，SS考试
+				};
+				// uni.request({
+				//     url:'/apis/cityjson?ie=utf-8',
+				// 	method:'GET',
+				// 	success: (res) => {
+				// 		// console.log('this',this);
+				//         const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
+				// 		let ip = reg.exec(res.data);
+				// 		analysisParams.ipAddress = ip[0];
+				// 		console.log('analysisParams',analysisParams);
+				// 	}
+				// });
+				this.$u.api.postAnalysis(analysisParams).then(res=>{
+					console.log('res',res);
+				});
+				this.$u.route({
+					url: '/pages/inbuild/inbuild',
+					params: {
+						msg: '',
+						artId:item.artId
+					}
+				});
+			},
+			schoolClick(item){
+				console.log('schoolClick item',item);
+				let analysisParams ={
+					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
+					pages:location.href,//页面路径
+					btnName:'',//按钮名称
+					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
+					ipAddress:'',//IP地址
+					typeName:'学校关注度',//类型名称 例：学校关注度 、适应性考试等
+					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
+					categoryName:item.schoolName,//类别名称 例：XX学校，SS考试
+				};
+				this.$u.api.postAnalysis(analysisParams).then(res=>{
+					console.log('res',res);
+					if(res.code == 200){
+						location.href = item.schoolUrl
+					}else{
+						uni.showToast({
+							icon:'none',
+							title:res.msg
+						})
+					}
+				});
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import  './skillsTraining.scss'
+</style>

h5_web/pages/skillsTraining/skillsTraining.scss

@@ -1,115 +1,189 @@
-.banner{
-	width: 100%;
-	margin-bottom: 24rpx;
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
 }
-.iconNav{
-	.iconNav-item{
-		width: 25%;
-		margin: 24rpx 0;
-		text-align: center;
-		.iconNav-item-img{width: 98rpx;height: 98rpx;}
+/* #endif */
+::v-deep {
+	uni-swiper .uni-swiper-dot {
+		width: 10rpx;
+		height: 10rpx;
 	}
-	&.no-head{
-		.card-head{display: none;}
-		/deep/ .u-card__head{padding: 0!important;}
-		/deep/ .u-card__body{padding-top: 0!important;}
+	uni-swiper .uni-swiper-dot-active {
+		width: 26rpx;
+		height: 10rpx;
+		border-radius: 6rpx;
 	}
 }
-.skill-list{
-	.u-body-item{
-		width: 48%;
-		height: 320rpx;
-		border-radius: 8rpx;
-		overflow: hidden;
-		position: relative;
-		margin-bottom: 24rpx;
-		image{width: 100%;height: 100%;}
-		.text{
-			position: absolute;
-			left: 24rpx;
-			right: 24rpx;
-			bottom: 24rpx;
-			z-index: 6;
-			color: #d8d8d8;
-			.name{font-size: 30rpx;}
-		}
-		&::after{
-			content: '';
+.training {
+	&-banner {
+		width: 100%;
+		height: 100%;
+		
+		image {
 			width: 100%;
-			height: 100rpx;
-			position: absolute;
-			left: 0;
-			bottom: 0;
-			background: linear-gradient(0deg,#000,rgba(255,255,255,0));
-			z-index: 5;
+			height: 408rpx;
 		}
 	}
-}
-.school-list{
-	.school-logo-wrap{
-		margin-bottom: 48rpx;
-		.school-logo{
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 50%;
-			opacity: 0.5;
-			&.active{
-				opacity: 1;
+	
+	&-total {
+		margin-top: -8rpx;
+		padding: 0 30rpx;
+		height: 164rpx;
+		background: linear-gradient(90deg, #FEA460 0%, #FB6C59 100%);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		color: rgba($color: #fff, $alpha: 0.6);
+		font-size: 30rpx;
+		
+		&-left {
+			view {
+				&:first-child {
+					font-size: 40rpx;
+					font-weight: 500;
+					margin-bottom: 6rpx;
+					color: rgba($color: #fff, $alpha: 0.9);
+				}
 			}
 		}
 	}
-	.name{
-		margin-bottom: 24rpx;
-		.text{
-			font-weight: bold;
+	
+	&-notice {
+		padding: 42rpx 30rpx;
+		
+		&-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 22rpx;
+			
+			view {
+				&:first-child {
+					color: #424242;
+					font-size: 36rpx;
+				}
+				&:last-child {
+					color: #A3A3A3;
+					font-size: 24rpx;
+				}
+			}
 		}
-	}
-}
-.support{
-	.big-news{
-		height: 400rpx;
-		position: relative;
-		margin-bottom: 24rpx;
-		image{width: 100%;height: 100%;}
-		.text{
-			position: absolute;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			padding: 24rpx;
-			color: #fff;
-			background: rgba(0,0,0,.5);
-			z-index: 6;
-			.name{font-size: 35rpx;}
+		
+		&-content {
+			padding: 40rpx 32rpx 20rpx;
+			border-radius: 10rpx;
+			background-color: #fff;
+			
+			.swiper {
+				height: 270rpx;
+				&-item {
+					display: flex;
+					align-items: center;
+					
+					.left {
+						width: 204rpx;
+						height: 220rpx;
+						margin-right: 22rpx;
+					}
+					
+					.right {
+						text-align: left;
+						view {
+							&:first-child {
+								font-size: 34rpx;
+								color: #101010;
+								font-weight: 500;
+								margin-bottom: 12rpx;
+							}
+							&:nth-child(2) {
+								font-size: 24rpx;
+								color: #525252;
+							}
+							&:nth-child(3) {
+								font-size: 24rpx;
+								color: #9A9A9A;
+								margin-top: 8rpx;
+							}
+						}
+						.btn {
+							background-color: #709078;
+							width: 120rpx;
+							height: 50rpx;
+							line-height: 50rpx;
+							text-align: center;
+							border-radius: 40rpx;
+							font-size: 24rpx;
+							color: #fff;
+							margin-top: 20rpx;
+						}
+					}
+				}
+			}
 		}
 	}
-	.u-body-item{
-		.u-body-item-title{
-			margin-bottom: 15rpx;
+	
+	&-package {
+		padding: 0 30rpx 160rpx;
+		
+		&-title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 22rpx;
+			
+			view {
+				&:first-child {
+					color: #424242;
+					font-size: 36rpx;
+				}
+				&:last-child {
+					color: #A3A3A3;
+					font-size: 24rpx;
+				}
+			}
 		}
-		.foot{
-			font-size: 24rpx;
-			color: #ddd;
-			.time{
-				margin-left: 24rpx;
+		
+		&-list {
+			padding: 66rpx 32rpx 28rpx;
+			background-color: #fff;
+			border-radius: 10rpx;
+			display: flex;
+			flex-wrap: wrap;
+			
+			&-item {
+				width: calc(50% - 12rpx);
+				margin-right: 24rpx;
+				margin-bottom: 38rpx;
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+				view {
+					&:nth-child(2) {
+						color: #3F3F3F;
+						font-size: 28rpx;
+						margin: 12rpx 0 8rpx;
+					}
+					&:last-child {
+						font-size: 22rpx;
+						color: #A2A2A2;
+					}
+				}
 			}
 		}
 	}
-	.u-card-wrap {
-		background-color: $u-bg-color;
-		padding: 1px;
-	}
-	.u-body-item {
-		// font-size: 32rpx;
-		color: #333;
-		padding: 20rpx 10rpx;
-	}
-		
-	.u-body-item image {
-		width: 120rpx;
-		flex: 0 0 120rpx;
-		height: 120rpx;
-		border-radius: 8rpx;
-		margin-left: 12rpx;
+	
+	&-bottom {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 96rpx;
+		line-height: 96rpx;
+		text-align: center;
+		font-size: 36rpx;
+		color: #fff;
+		background-color: #709078;
 	}
 }

h5_web/pages/skillsTraining/skillsTraining.vue

@@ -1,283 +1,139 @@
+<!-- 技能培训 -->
 <template>
-	<view>
-		<image class="banner" src="../../static/img/banner-skillsTraining.png" mode="scaleToFill"></image>
-		<view class="statistics u-flex u-row-between f-padding f-mb">
-			<view class="statistics-item u-flex">我的学习时长：206小时</view>
-			<view class="statistics-item u-flex">我的考试通过数：32</view>
+	<view class="training">
+
+		<!-- banner -->
+		<view class="training-banner">
+			<image src="../../static/img/banner-skillsTraining.png" mode="aspectFill"></image>
 		</view>
-		<u-card class="iconNav no-head" :border="false" :head-border-bottom="false" :foot-border-top="false" :full="true" border-radius="0">
-			<view class="card-head" slot="head">
-				<view class="card-head-title">综合服务</view>
-			</view>
-			<view class="iconNav-body u-flex u-flex-wrap u-row-left" slot="body">
-				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')">
-					<image class="iconNav-item-img" src="../../static/img/index-service-01.png" mode="aspectFill"></image>
-					<view class="iconNav-item-text">网络课程</view>
-				</view>
-				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
-					<image class="iconNav-item-img" src="../../static/img/index-service-02.png" mode="aspectFill"></image>
-					<view class="iconNav-item-text">线下实训</view>
-				</view>
-				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
-					<image class="iconNav-item-img" src="../../static/img/index-service-03.png" mode="aspectFill"></image>
-					<view class="iconNav-item-text">参加考试</view>
-				</view>
-				<view class="iconNav-item" @click="openPage('pages/inbuild/inbuild')" >
-					<image class="iconNav-item-img" src="../../static/img/index-service-04.png" mode="aspectFill"></image>
-					<view class="iconNav-item-text">我的班级</view>
-				</view>
+
+		<view class="training-total" @click="jumpPage('/pages/mine/skillsTraining/skillsTraining')">
+			<view class="training-total-left">
+				<view>我的技能培训</view>
+				<view>学习时长：206小时</view>
 			</view>
-		</u-card>
-		<u-search class="search f-padding" placeholder="搜索课程" v-model="keyword" @focus="selectShow = true" @search="search" @custom="search" ></u-search>
-		<u-select v-model="selectShow"  mode="mutil-column-auto" :list="selectList" @confirm="selectConfirm"></u-select>
-		
-		<u-card class="skill-list"
-		:body-style="{'padding-bottom':'0'}"
-		:border="false" 
-		:foot-border-top="false" 
-		:full="true" border-radius="0">
-			<view class="card-head" slot="head">
-				<view class="card-head-title">技能包</view>
+			<view class="training-total-right">
+				<u-icon name="arrow-right" size="44" color="#fff"></u-icon>
 			</view>
-			<view class="news-list-body u-flex u-row-between u-flex-wrap" slot="body">
-				<u-nodata notice="暂无新闻" v-if="skillList.length==0"></u-nodata>
-				<view v-for="(item,index) in skillList" 
-				@click="skillClick(item)"
-				:key="item.artId" 
-				class="u-body-item">
-					<image :src="item.img" mode="scaleToFill"></image>
-					<view class="text">
-						<view class="name">{{item.name}}</view>
-						<view class="school">{{item.school}}</view>
-					</view>
+		</view>
+
+		<!-- 报班通知 -->
+		<view class="training-notice">
+			<view class="training-notice-title">
+				<view>报班通知</view>
+				<view @click="jumpPage('pages/skillsTraining/registrationNotice/registrationNotice')">
+					<text>更多</text>
+					<u-icon name="arrow-right"></u-icon>
 				</view>
 			</view>
-		</u-card>
-		
-		<u-card class="school-list"
-		:body-style="{'margin-bottom':'0','padding-bottom':'0'}"
-		:border="false" 
-		:foot-border-top="false" 
-		:full="true" border-radius="0">
-			<view class="card-head u-flex u-row-between" slot="head">
-				<view class="card-head-title">合作院校</view>
-				<view class="right" @click="openPage('pages/schools/schools')">
-					查看更多
-					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
-				</view>
+			<view class="training-notice-content">
+				<swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="1000" :duration="500" indicator-color="#D8D8D8" indicator-active-color="#D8D8D8">
+					<swiper-item v-for="(item, index) in enrollList" :key="index">
+						<view class="swiper-item">
+							<view class="left">
+								<u-image :src="item.img" mode="aspectFill" border-radius="10" height="220"/>
+							</view>
+							<view class="right">
+								<view>{{ item.name }}</view>
+								<view>{{ item.school }}</view>
+								<view>报名时间：{{ item.dateRange }}</view>
+								<view class="btn" @click="jumpPage('/pages/skillsTraining/skillsPackage/skillsPackage')">报名</view>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
 			</view>
-			<view class="school-list-body" slot="body">
-				<u-nodata notice="暂无合作院校" v-if="schoolList.length==0"></u-nodata>
-				<view class="school-logo-wrap u-flex u-row-between">
-					<image 
-					@click="schoolToggle(index)"
-					:class="{active:schoolActive==index}"
-					class="school-logo" 
-					v-for="(item,index) in schoolList" :key="item.id" 
-					:src="item.schoolLogoUrl" 
-					mode="aspectFit"></image>
-				</view>
-				<view class="name u-flex u-row-between" @click="schoolClick(schoolList[schoolActive])">
-					<view class="text">{{schoolList[schoolActive].schoolName}}</view>
-					<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
-				</view>
-				<view class="content">
-					{{schoolList[schoolActive].detatil}}
+		</view>
+		
+		<!-- 技能包 -->
+		<view class="training-package">
+			<view class="training-package-title">
+				<view>技能包</view>
+				<view>
+					<text>更多</text>
+					<u-icon name="arrow-right"></u-icon>
 				</view>
 			</view>
-		</u-card>
-		<u-card class="support"
-		:body-style="{'margin-bottom':'24rpx'}"
-		:border="false" 
-		:foot-border-top="false" 
-		:full="true" border-radius="0">
-			<view class="card-head u-flex u-row-between" slot="head">
-				<view class="card-head-title">政策支持</view>
-			</view>
-			<view class="support-body" slot="body">
-				<u-nodata notice="暂无新闻" v-if="schoolList.length==0"></u-nodata>
-				<view class="big-news" @click="$u.route('/pages/newsDetails/newsDetails',{artId:bigNews.artId})">
-					<image :src="bigNews.artImage" mode="aspectFill"></image>
-					<view class="text">{{bigNews.artTitle}}</view>
-				</view>
-				<view v-for="(item,index) in newsList"
-				@click="$u.route('/pages/newsDetails/newsDetails',{artId:item.artId})"
-				:key="item.artId" 
-				class="u-body-item u-flex u-border-bottom u-col-between u-row-between">
-					<view class="news-text">
-						<view class="u-body-item-title u-line-2">{{item.artTitle}}</view>
-						<view class="foot u-flex">
-							<view class="">{{item.artCategoryName}}</view>
-							<view class="time">{{$u.timeFormat(item.createTime.replace(/-/g, '/'), 'mm月dd日 hh时MM分')}}</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>
+						<u-image :src="item.img" height="190"mode="aspectFill" border-radius="10"/>
 					</view>
-					<image :src="item.artImage" mode="aspectFill"></image>
+					<view>{{ item.name }}</view>
+					<view>{{ item.school }}</view>
 				</view>
 			</view>
-		</u-card>
+		</view>
+		
+		<!-- 问题咨询 -->
+		<view class="training-bottom">
+			问题咨询（0851-863789）
+		</view>
 	</view>
 </template>
+
 <script>
-	import mock from "../../static/js/mock.js";
-	export default{
-		data(){
-			return{
-				schoolActive:0,
-				keyword:'',
-				selectShow:false,
-				newsList:[],
-				bigNews:[],
-				skillList:mock.skillList,
-				schoolList:[],
-				selectList:[
+	export default {
+		data() {
+			return {
+				enrollList: [
+					{
+						id: 1,
+						img: 'http://img.mp.itc.cn/upload/20161115/15c7309f1a074a08a2b9630651720c27_th.jpg',
+						name: '汽车检测与维修',
+						school: '贵州工业职业技术学院',
+						dateRange: '2021.10.15-2021.11.24'
+					},
 					{
-						value: 1,
-						label: '贵州交通职业技术学院',
-						children: [
-							{
-								value: 2,
-								label: '技术1'
-							},
-							{
-								value: 5,
-								label: '技术2'
-							}
-						]
+						id: 2,
+						img: 'http://img.mp.itc.cn/upload/20161115/15c7309f1a074a08a2b9630651720c27_th.jpg',
+						name: '汽车检测与维修',
+						school: '贵州工业职业技术学院',
+						dateRange: '2021.10.15-2021.11.24'
 					},
 					{
-						value: 8,
-						label: '贵州医学院',
-						children: [
-							{
-								value: 9,
-								label: '技术3'
-							}
-						]
+						id: 3,
+						img: 'http://www.gzlis.edu.cn/uploadfile/201906/20190605152111236.jpg',
+						name: '汽车检测与维修',
+						school: '贵州工业职业技术学院',
+						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: '贵州装备制造职业学院'
+					}
+				]
 			}
 		},
-		onLoad(){
-			this.getNewsList();
-			this.getSchoolList();
-		},
-		onShow(){
-			
-		},
-		methods:{
-			getSchoolList(){
-				this.$u.api.getSchoolList({pageNum:1,pageSize:5}).then(res=>{
-					if(res.code ==200){
-						this.schoolList = res.rows
-					}else{
-						uni.showToast({
-							icon:'none',
-							title:res.msg
-						})
-					}
-				})
-			},
-			openPage(path,msg) {
-			  this.$u.route({
-			    url: path,
-				params:{
-					msg:msg
-				}
-			  })
-			},
-			getNewsList(){
-				let params ={
-					artCategoryId:2,
-					pageNum:1,
-					pageSize:10
-				}
-				this.$u.api.getIndexNewsList(params)
-				.then(res=>{
-					this.newsList = res.rows;
-					this.bigNews = this.newsList[0];
-					this.newsList.shift();
-					console.log('this.newsList', this.newsList)
-					// console.log('newsList',JSON.parse(JSON.stringify(res.rows)));
-				})
-			},
-			selectConfirm(e){
-				console.log('selectConfirm',e);
-				this.keyword = e[0].label +' ' + e[1].label
-			},
-			search(e){
-				this.$u.route({
-					url: 'pages/index/index',
-					type:'switchTab'
-				});
-				console.log('selectConfirm',e)
-			},
-			schoolToggle(index){
-				this.schoolActive = index;
-				console.log('schoolToggle index',index)
-			},
-			skillClick(item){
-				console.log('item',item);
-				let analysisParams ={
-					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
-					pages:location.href,//页面路径
-					btnName:'',//按钮名称
-					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
-					ipAddress:'',//IP地址
-					typeName:'技能培训关注度',//类型名称 例：学校关注度 、适应性考试等
-					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
-					categoryName:item.name,//类别名称 例：XX学校，SS考试
-				};
-				// uni.request({
-				//     url:'/apis/cityjson?ie=utf-8',
-				// 	method:'GET',
-				// 	success: (res) => {
-				// 		// console.log('this',this);
-				//         const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
-				// 		let ip = reg.exec(res.data);
-				// 		analysisParams.ipAddress = ip[0];
-				// 		console.log('analysisParams',analysisParams);
-				// 	}
-				// });
-				this.$u.api.postAnalysis(analysisParams).then(res=>{
-					console.log('res',res);
-				});
-				this.$u.route({
-					url: '/pages/inbuild/inbuild',
-					params: {
-						msg: '',
-						artId:item.artId
-					}
-				});
-			},
-			schoolClick(item){
-				console.log('schoolClick item',item);
-				let analysisParams ={
-					platform:'1',//平台:1-H5 2-APP 3-小程序 4-PC端
-					pages:location.href,//页面路径
-					btnName:'',//按钮名称
-					btnEvent:'1',//按钮事件: 1-点击 2-长按 3-滑动
-					ipAddress:'',//IP地址
-					typeName:'学校关注度',//类型名称 例：学校关注度 、适应性考试等
-					typeCode:'',//类型编码 例：类型名称首字母缩写(XXGZD)
-					categoryName:item.schoolName,//类别名称 例：XX学校，SS考试
-				};
-				this.$u.api.postAnalysis(analysisParams).then(res=>{
-					console.log('res',res);
-					if(res.code == 200){
-						location.href = item.schoolUrl
-					}else{
-						uni.showToast({
-							icon:'none',
-							title:res.msg
-						})
-					}
-				});
+		methods: {
+			/**
+			 * 跳转到指定页面
+			 * @param { String } url
+			 * @param {Object} parmas
+			 */
+			jumpPage(url, parmas) {
+				this.$u.route({ url, parmas })
 			}
-			
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	@import  './skillsTraining.scss'
+	@import './skillsTraining.scss';
 </style>

h5_web/pages/skillsTraining/skillsTrainingCourse/skillsTrainingCourse.scss

@@ -0,0 +1,35 @@
+/* 技能培训课程 */
+/* #ifndef H5 */
+page {
+	height: 100%;
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+}
+/* #endif */
+.course {
+	
+	&-list {
+		padding: 26rpx 30rpx;
+		&-item {
+			background-color: #fff;
+			padding: 30rpx 32rpx;
+			border-radius: 10rpx;
+			display: flex;
+			margin-bottom: 20rpx;
+			.left {
+				margin-right: 22rpx;
+			}
+			.right {
+				view {
+					color: #9A9A9A;
+					font-size: 24rpx;
+					line-height: 50rpx;
+					&:first-child {
+						font-size: 30rpx;
+						color: #0B0B0B;
+					}
+				}
+			}
+		}
+	}
+}

h5_web/pages/skillsTraining/skillsTrainingCourse/skillsTrainingCourse.vue

@@ -0,0 +1,53 @@
+<!-- 技能培训课程 -->
+<template>
+	<view class="course">
+		<z-paging ref="paging" v-model="courseList" @query="queryList">
+			<view class="course-list">
+				<view class="course-list-item" v-for="(item, index) in courseList" :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.teacherName }}</view>
+					</view>
+				</view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				courseList: []
+			}
+		},
+		methods: {
+			/**
+			 * @param {Object} pageNum
+			 * @param {Object} pageSize
+			 */
+			queryList(pageNum, pageSize) {
+				this.$refs.paging.complete([
+					{
+						img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
+						name: '解锁！轮胎更换诀窍',
+						teacherName: 'xxx'
+					},
+					{
+						img: 'https://file02.16sucai.com/d/file/2014/0427/071875652097059bbbffe106f9ce3a93.jpg',
+						name: '解锁！轮胎更换诀窍轮胎更换诀窍轮胎更换诀窍轮胎更换诀窍',
+						teacherName: 'xxx'
+					}
+				])
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './skillsTrainingCourse.scss';
+</style>

h5_web/pages/skillsTraining/submitSuccess/submitSuccess.vue

@@ -0,0 +1,70 @@
+<!-- 报名提交成功 -->
+<template>
+	<view class="box">
+		
+		<!-- 导航栏 -->
+		<u-navbar :is-back="false" title="提交成功" :background="{backgroundColor: '#3D5D4C'}" title-color="#fff"></u-navbar>
+		<view class="box-content">
+			<view class="box-content-image">
+				<u-image src="../../../static/img/success-icon.png" mode="aspectFill" width="176" height="176"></u-image>
+			</view>
+			<view class="box-content-tips1">意向已提交</view>
+			<view class="box-content-tips2">恭喜您，已将培训意向提交贵州工业职业技术学院，后续老师会根据报名情况确定是否开班，并联系您办理报名入学手续。</view>
+			<view class="box-content-btn" @click="returnIndex">返回首页</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			returnIndex() {
+				uni.switchTab({
+					url: '../../index/index'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.box {
+	&-content {
+		text-align: center;
+		padding: 0 30rpx;
+		margin-top: 168rpx;
+		&-image {
+			width: 176rpx;
+			height: 176rpx;
+			margin: 0 auto;
+		}
+		&-tips1 {
+			font-size: 32rpx;
+			color: #000;
+			margin-top: 36rpx;
+		}
+		&-tips2 {
+			color: #545454;
+			font-size: 24rpx;
+			line-height: 40rpx;
+			margin-top: 22rpx;
+		}
+		&-btn {
+			width: 388rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			background-color: #709078;
+			border-radius: 40rpx;
+			font-size: 30rpx;
+			color: #fff;
+			margin: 360rpx auto 0;
+		}
+	}
+}
+</style>

h5_web/pages/upgrade/courseDetail/courseDetail.scss

@@ -0,0 +1,266 @@
+/* 适应性培训线上课程 */
+page {
+	background-color: #f2f2f2;
+	font-family: 'PingFangSC-Regular, PingFang SC';
+	
+	.details {
+		
+		&-video {
+			
+			&-con {
+				width: 100%;
+				height: 400rpx;
+			}
+		}
+		
+		&-content {
+			background-color: #fff;
+			padding: 20rpx 30rpx;
+			margin-top: -6rpx;
+			border-radius: 0 0 18rpx 18rpx;
+			
+			&-title {
+				color: #424242;
+				font-size: 36rpx;
+				font-weight: 500;
+			}
+			
+			&-progress {
+				padding: 26rpx 0;
+				color: #EF651F;
+				font-size: 26rpx;
+			}
+			
+			&-teacher {
+				font-size: 32rpx;
+				color: #424242;
+				margin-bottom: 22rpx;
+			}
+			
+			&-info {
+				color: #545454;
+				font-size: 24rpx;
+				line-height: 44rpx;
+			}
+		}
+		
+		&-classes {
+			background-color: #fff;
+			border-radius: 18rpx 18rpx 0 0;
+			padding: 42rpx 30rpx;
+			margin-top: 26rpx;
+			&-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				color: #424242;
+				font-size: 36rpx;
+				view {
+					&:last-child {
+						color: #A3A3A3;
+						font-size: 24rpx;
+					}
+				}
+			}
+			&-list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 30rpx;
+				&-item {
+					margin-right: 20rpx;
+					view {
+						&:first-child {
+							padding: 20rpx 34rpx;
+							background-color: #C4C4C4;
+							color: #fff;
+							font-size: 40rpx;
+							border-radius: 16rpx;
+						}
+						&:last-child {
+							text-align: center;
+							margin-top: 10rpx;
+							color: #827F7F;
+							font-size: 24rpx;
+						}
+					}
+				}
+				.active {
+					view {
+						&:first-child {
+							background: linear-gradient(168deg, #A5C8AC 0%, #709078 100%);
+						}
+						&:last-child {
+							color: #709078;
+						}
+					}
+				}
+			}
+		}
+		
+		&-line {
+			height: 1px;
+			width: 100%;
+			background-color: #fff;
+			padding: 0 30rpx;
+			view {
+				height: 1px;
+				width: 100%;
+				background-color: #CDCDCD;
+			}
+		}
+		
+		&-comment {
+			background-color: #fff;
+			border-radius: 0 0 18rpx 18rpx;
+			padding: 30rpx;
+			&-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 30rpx;
+				view {
+					&:first-child {
+						font-size: 36rpx;
+						color: #424242;
+					}
+					&:last-child {
+						color: #8D8D8D;
+						font-size: 24rpx;
+					}
+				}
+			}
+			&-list {
+				&-item {
+					margin-bottom: 60rpx;
+					display: flex;
+					align-items: center;
+					// &:last-child {
+					// 	padding-bottom: 60rpx;
+					// 	margin-bottom: 20rpx;
+					// 	border-bottom: solid 1px #DBDBDB;
+					// }
+					.left {
+						margin-right: 24rpx;
+					}
+					.right {
+						view {
+							line-height: 40rpx;
+							&:last-child {
+								color: #3D3D3D;
+								font-size: 28prx;
+							}
+							&:nth-child(2) {
+								font-size: 24rpx;
+								color: #A5A5A5;
+								text {
+									margin-left: 10rpx;
+								}
+							}
+							&:last-child {
+								font-size: 24rpx;
+								color: #6C6C6C;
+							}
+						}
+					}
+				}
+			}
+			&-page {
+				border-bottom: solid 1px #DBDBDB;
+				padding-bottom: 10rpx;
+			}
+			&-mine {
+				margin-top: 46rpx;
+				font-size: 36rpx;
+				color: #000000;
+				margin-bottom: 20rpx;
+			}
+			&-conent {
+				&-star {
+					margin-bottom: 22rpx;
+				}
+				&-textarea {
+					background-color: #F5F5F5;
+				}
+				&-button {
+					height: 80rpx;
+					line-height: 80rpx;
+					background-color: #709078;
+					text-align: center;
+					color: #fff;
+					font-size: 30rpx;
+					margin-top: 52rpx;
+				}
+			}
+		}
+	}
+}
+
+.video-control {
+	background-color: rgba(0, 0, 0, 0.1);
+	height: 90rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 997;
+}
+.video-wrap {
+	position: relative;
+}
+.multi-list.full-screen.vertical {
+	height: 100vh !important;
+	padding: 8vh 0;
+}
+.multi-list.full-screen.horizontal {
+	height: 100vw !important;
+	padding: 8vw 0;
+}
+.multi {
+	position: absolute;
+	right: 30rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: 998;
+	width: 100rpx;
+	color: #fff;
+	padding: 10rpx 0;
+	text-align: center;
+	transition: color ease 0.3s;
+}
+.multi.rate {
+	right: 30rpx;
+}
+.multi-list {
+	position: absolute;
+	height: 100%;
+	width: 0;
+	background-color: rgba(0, 0, 0, 0.65);
+	top: 0;
+	right: 0;
+	transition: width 0.3s ease;
+	z-index: 999;
+	box-sizing: border-box;
+	padding: 20rpx 0;
+}
+.multi-list.rate {
+	padding: 25rpx 0;
+}
+.multi-list.active {
+	width: 200rpx;
+}
+.multi-item {
+	text-align: center;
+	color: #fff;
+	line-height: 80rpx;
+	transition: color ease 0.3s;
+}
+.multi-item.rate {
+	line-height: 70rpx;
+}
+.multi-item:hover,
+.multi:hover {
+	color: #00d8ff;
+}
+.multi-item.active {
+	color: #00d8ff;
+}

h5_web/pages/upgrade/courseDetail/courseDetail.vue

@@ -0,0 +1,363 @@
+<template>
+	<view class="details">
+		<!-- 视频 -->
+		<view class="details-video" v-if="isPaly">
+			<video class="details-video-con" id="myVideo" @timeupdate="timeUpdate" :src="videoInfo.videoUrl" controls
+				:initial-time="initial_time" object-fit="fill" play-btn-position="center" @tap="videoClick">
+				<cover-view class="video-control">
+					<cover-view class="multi rate" @tap.stop="showSwitchRate">x {{ currentRate }}</cover-view>
+				</cover-view>
+				<cover-view class="multi-list rate" :class="{ active: rateShow }">
+					<cover-view v-for="(item, index) in ['0.5', '1.0', '1.5', '2.0']" :key="index"
+						class="multi-item rate" :data-rate="item" @tap="switchRate"
+						:class="{ active: item == currentRate }">
+						{{ item }}
+					</cover-view>
+				</cover-view>
+			</video>
+		</view>
+		<!-- 介绍 -->
+		<view class="details-content">
+			<view class="details-content-title">{{ videoInfo.chapterName }}</view>
+			<view class="details-content-progress">本课程
+				共{{ info.amount }}课，已学完{{ info.finishCount }}课，共进度{{ info.finishPercent || 0 }}%</view>
+			<view class="details-content-teacher">主讲老师：{{ info.presenter }}</view>
+			<view class="details-content-info">{{ videoInfo.chapterInfo }}</view>
+		</view>
+
+		<!-- 课程章节 -->
+		<view class="details-classes">
+			<view class="details-classes-header">
+				<view>精选课程</view>
+				<view>更多
+					<u-icon name="arrow-right" size="22" color="#A3A3A3" />
+				</view>
+			</view>
+			<view class="details-classes-list">
+				<view class="details-classes-list-item" v-for="(item, index) in info.chapterList" :key="index"
+					:class="{'active': index === videoIndex }" @click="classesClick(index)">
+					<view>{{ index + 1 }}</view>
+					<view>{{ item.flag === 2 ? '已学' : (item.finishPercent + '%') }}</view>
+				</view>
+			</view>
+		</view>
+		<view class="details-line">
+			<view></view>
+		</view>
+		<!-- 评论 -->
+		<view class="details-comment">
+			<view class="details-comment-header">
+				<view>课程评论</view>
+				<view>共{{ total }}条评论</view>
+			</view>
+			<view class="details-comment-list">
+				<view class="details-comment-list-item" v-for="(item, index) in commentList" :key="index">
+					<view class="left">
+						<u-avatar :src="item.createByAvatar" size="96" mode="square"></u-avatar>
+					</view>
+					<view class="right">
+						<view>{{ item.createBy }}</view>
+						<view>
+							<u-rate :count="5" size="24" disabled="" active-color="#C4C4C4" v-model="item.starLevel">
+							</u-rate>
+							<text>{{ item.createTime }}</text>
+						</view>
+						<view>{{ item.content }}</view>
+					</view>
+				</view>
+			</view>
+			<view class="details-comment-page" v-if="total">
+				<wyb-pagination :padding="0" :totalItems="total" :current="query.pageNum" @change="pageChange" />
+			</view>
+
+			<view class="details-comment-mine">
+				<text>我的评论</text>
+			</view>
+
+			<view class="details-comment-conent">
+				<view class="details-comment-conent-star">
+					<u-rate :count="5" size="40" active-color="#FFBC00" v-model="form.starLevel"></u-rate>
+				</view>
+				<view class="details-comment-content-textarea">
+					<u-input v-model="form.content" placeholder="请输入您的评价" type="textarea"
+						:custom-style="{ backgroundColor: '#F5F5F5', padding: '30rpx', borderRadius: '10rpx', minHeight: '280rpx' }">
+					</u-input>
+				</view>
+				<view class="details-comment-conent-button" @click="submitCommet">提交</view>
+			</view>
+		</view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import wybPagination from '@/components/wyb-pagination/wyb-pagination.vue'
+	export default {
+		data() {
+			return {
+				info: {},
+				videoContext: uni.createVideoContext('myVideo', this),
+				videoInfo: {},
+				videoIndex: 0,
+				// 视频实时时间
+				initial_time: 0,
+				// 视频已经播放时间
+				playedTime: 0,
+				rateShow: false, // 倍速浮层
+				currentRate: 1.0, // 默认倍速
+				// 视频实际时间
+				video_real_time: 0,
+				classesId: '',
+				isPaly: true,
+				query: {
+					pageNum: 1,
+					pageSize: 5,
+					tabId: ''
+				},
+				total: 0,
+				commentList: [],
+				form: {
+					tabId: '',
+					starLevel: 0,
+					content: ''
+				},
+				currentDuration: 0
+			}
+		},
+		onLoad(page) {
+			if (page.id) {
+				this.getClassesDetails(page.id);
+				this.classesId = page.id
+			}
+		},
+		beforeDestroy() {
+			let playDuration = this.video_real_time;
+			if (this.videoInfo.playDuration > this.video_real_time) {
+				this.currentDuration = this.video_real_time;
+				playDuration = this.videoInfo.playDuration
+			} else {
+				this.currentDuration = this.video_real_time
+			}
+			this.submitTimeLong({
+				tabId: this.videoInfo.id,
+				playDuration: playDuration,
+				currentDuration: this.currentDuration
+			}, 0, true)
+		},
+		methods: {
+			/**
+			 * 显示倍速浮层
+			 * @param {Object} rate
+			 */
+			showSwitchRate(rate) {
+				let that = this;
+				that.rateShow = true;
+			},
+			/**
+			 * 切换倍速
+			 * @param {Object} e
+			 */
+			switchRate(e) {
+				let that = this;
+				let rate = Number(e.currentTarget.dataset.rate);
+				that.currentRate = rate;
+				that.rateShow = false;
+				this.videoContext.playbackRate(rate);
+			},
+			/**
+			 * 视频点击
+			 * @param {Object} e
+			 */
+			videoClick(e) {
+				this.rateShow = false;
+			},
+			/**
+			 * 获取课程详情
+			 * @param {Object} id
+			 */
+			getClassesDetails(id) {
+				this.$u.api.school.getPackageCourseDetail({
+					id
+				}).then(res => {
+					if (res.code === 200) {
+						console.log(res)
+						this.info = res.data;
+						this.videoInfo = res.data.chapterList[this.videoIndex];
+						this.initial_time = Number(res.data.chapterList[this.videoIndex].currentDuration)
+						this.video_real_time = Number(res.data.chapterList[this.videoIndex].playDuration)
+						this.playedTime = Number(res.data.chapterList[this.videoIndex].playDuration)
+						this.query.tabId = res.data.chapterList[this.videoIndex].id
+						this.form.tabId = res.data.chapterList[this.videoIndex].id
+						this.query.pageNum = res.data.page;
+						this.isPaly = true
+						this.getCommentList();
+					}
+				})
+			},
+			/**
+			 * 课程章节点击
+			 * @param {Object} index
+			 */
+			classesClick(index) {
+				this.isPaly = false;
+				let playDuration = this.video_real_time;
+				if (this.videoInfo.playDuration > this.video_real_time) {
+					this.currentDuration = this.video_real_time;
+					playDuration = this.videoInfo.playDuration
+				} else {
+					this.currentDuration = this.video_real_time
+				}
+				this.submitTimeLong ({
+					tabId: this.videoInfo.id,
+					playDuration: playDuration,
+					currentDuration: this.currentDuration
+				}, index);
+			},
+			/**
+			 * 控制视频不能快进
+			 * @param {Object} e
+			 */
+			timeUpdate(e) {
+				let isReady = 1; // 是否开启可以视频快进 1 禁止开启
+				if (this.videoInfo.finishPercent === 100) {
+					isReady = 3;
+				}
+				//跳转到指定播放位置 initial-time 时间为秒
+				let that = this;
+				//播放的总时长
+				let duration = e.detail.duration
+				//实时播放进度 秒数
+				let currentTime = parseInt(e.detail.currentTime)
+				//当前视频进度
+				let jump_time = 0
+				if (that.video_real_time == 0) {
+					jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
+				} else {
+					jump_time = parseInt(that.video_real_time)
+				}
+				console.log('jump_time', jump_time)
+				console.log('that.initial_time', that.initial_time)
+				console.log('this.playedTime', this.playedTime)
+				console.log('that.video_real_time', that.video_real_time)
+				if (jump_time > this.playedTime) {
+					isReady = 1;
+				} else {
+					isReady = 3;
+				}
+				if(isReady === 1){
+					if (currentTime > jump_time && currentTime - jump_time > 3) {
+						let videoContext = wx.createVideoContext('myVideo')
+						videoContext.seek(that.video_real_time)
+						wx.showToast({
+							title: '未完整看完该视频，不能快进',
+							icon: 'none',
+							duration: 2000,
+						})
+					}
+				}
+				that.video_real_time = currentTime //实时播放进度
+			},
+			/**
+			 * 提交课程时长
+			 */
+			submitTimeLong({
+				tabId,
+				playDuration,
+				currentDuration
+			}, index, flag) {
+				if (tabId) {
+					this.$u.api.training.videoTimeLongApi({
+						tabId,
+						playDuration,
+						currentDuration
+					}).then(res => {
+						if (res.code === 200) {
+							if (!flag) {
+								this.$refs.uToast.show({
+									title: '已记录章节时长!',
+									type: 'success'
+								})
+								this.videoInfo = this.info.chapterList[index]
+								this.form.tabId = this.videoInfo.id
+								this.query.tabId = this.videoInfo.id
+								this.videoIndex = index
+								this.getClassesDetails(this.classesId);
+							}
+						} else {
+							this.$refs.uToast.show({
+								title: res.msg,
+								type: 'error'
+							})
+						}
+					})
+				}
+			},
+			/**
+			 * 获取评论列表
+			 */
+			getCommentList() {
+				if (this.query.tabId) {
+					this.$u.api.training.getClassesCommentApi(this.query).then(res => {
+						if (res.code === 200) {
+							this.total = Number(res.data.total);
+							this.commentList = res.data.rows
+						}
+					})
+				}
+			},
+			/**
+			 * @param {Object} e 分页触发
+			 */
+			pageChange(e) {
+				this.query.pageNum = e.current
+				this.getCommentList()
+			},
+			/**
+			 * 提交评论
+			 */
+			submitCommet() {
+				if (this.form.tabId) {
+					if (this.form.starLevel && this.form.content) {
+						this.$u.api.training.addClassesCommentApi(this.form).then(res => {
+							if (res.code === 200) {
+								this.$refs.uToast.show({
+									title: '评论成功!',
+									type: 'success'
+								})
+								this.form.content = ''
+								this.form.starLevel = 0
+								this.getCommentList();
+							} else {
+								this.$refs.uToast.show({
+									title: res.msg,
+									type: 'error'
+								})
+							}
+						})
+					}
+					if (!this.form.starLevel) {
+						this.$refs.uToast.show({
+							title: '请选择星级',
+							type: 'warning'
+						})
+					}
+					if (!this.form.content) {
+						this.$refs.uToast.show({
+							title: '请输入评论内容',
+							type: 'warning'
+						})
+					}
+				} else {
+					this.$refs.uToast.show({
+						title: '未找到课程章节,无法提交评论!',
+						type: 'warning'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import './courseDetail.scss';
+</style>

h5_web/pages/upgrade/professionalIntroduction/professionalIntroduction.scss

@@ -21,7 +21,7 @@
 			border-radius: 10rpx;
 			padding: 40rpx 36rpx;
 			display: flex;
-			justify-content: space-between;
+			// justify-content: space-between;
 			
 			&-left {
 				margin-right: 24rpx;
@@ -31,12 +31,14 @@
 				.name {
 					display: flex;
 					align-items: center;
-					justify-content: space-between;
+					// justify-content: space-between;
 					view {
 						&:first-child {
 							background: linear-gradient(153deg, #F89E42, #FF7833);
-							font-size: 24rpx;
-							padding: 2rpx 16rpx;
+							font-size: 20rpx;
+							width: 100rpx;
+							padding: 4rpx 0;
+							text-align: center;
 							border-radius: 20rpx;
 							color: #fff;
 						}
@@ -54,12 +56,12 @@
 				}
 				
 				.study {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+					// display: flex;
+					// justify-content: space-between;
+					// align-items: center;
 					font-size: 24rpx;
 					margin-top: 18rpx;
-					margin-bottom: 40rpx;
+					margin-bottom: 20rpx;
 					color: #A2A2A2;
 				}
 				

h5_web/pages/upgrade/professionalIntroduction/professionalIntroduction.vue

@@ -15,18 +15,15 @@
 				<view class="professional-content-info-right">
 					<view class="name">
 						<view>专业</view>
-						<view>工商管理</view>
-						<view>（630601）</view>
+						<view>{{ details.name }}</view>
+						<!-- <view>（630601）</view> -->
 					</view>
 					<view class="study">
-						<view>
-							难度<u-rate :count="5" v-model="studyDifficulty" active-color="#EF651F" disabled size="24" :gutter="4"/>
-							</view>
-						<view>
-							学习时间：3年
-						</view>
+						难度 <u-rate :count="5" v-model="details.difficult" active-color="#EF651F" disabled size="24" :gutter="4"/>
+					</view>
+					<view class="study">
+						学习时间：{{ details.cycle }}年
 					</view>
-					<view class="price">费用<text>¥100.00</text></view>
 				</view>
 			</view>
 			
@@ -46,22 +43,12 @@
 							:autoplay="false"
 							height="196rpx"
 						>
-							<swiper-item class="swiper-item">
-								<u-image src="../../../static/img/major-机电一体化技术.png" width="95%" height="196"/>
-								<view class="classes-name">初级经济师-工商管理</view>
-								<view class="classes-teacher">讲师：李开复</view>
-							</swiper-item>
-							<swiper-item class="swiper-item">
-								<u-image src="../../../static/img/major-机电一体化技术.png" width="95%" height="196"/>
-								<view class="classes-name">初级经济师-工商管理</view>
-								<view class="classes-teacher">讲师：李开复</view>
-							</swiper-item>
-							<swiper-item class="swiper-item">
-								<u-image src="../../../static/img/major-机电一体化技术.png" width="95%" height="196"/>
-								<view class="classes-name">初级经济师-工商管理</view>
-								<view class="classes-teacher">讲师：李开复</view>
+							<swiper-item class="swiper-item" v-for="(item, index) in details.courseList" :key="index" @click="jumpPage('/pages/upgrade/courseDetail/courseDetail', { id: item.id })">
+								<u-image :src="item.img" width="95%" height="196"/>
+								<view class="classes-name">{{ item.name }}</view>
+								<view class="classes-teacher">讲师：{{ item.teacherName }}</view>
 							</swiper-item>
-					</swiper>
+						</swiper>
 					</view>
 				</view>
 				<!-- 专业介绍 -->
@@ -70,8 +57,7 @@
 						<view><text>专业介绍</text>深入了解本课程</view>
 					</view>
 					<view class="content">
-						建筑工程学院前身为贵州职业技术学院工程系，于2009年建成并开始招生，2016年更名为建筑工程学院。现开设有建筑工程技术、工程造价、建设工程管理、建筑室内设计、园林工程技术、市政工程技术、工程测量技术等7个专业，其中建筑工程技术为省级骨干专业，并以建筑工程技术专业为核心建成1个省级重点专业群。
-						在校生规模达3500余人。学院现有教职工60人，其中专任教师44人，管理、教辅人员16人，在专任教师队伍中教授2人，具有副高职称人员17人，中级职称22人，初级职称3人.有近20名教师持有国家一级注册建造师、国家二级注册建筑师、注册造价工程师、注册监理工程师、注册设备工程师、注册二级建造师、网络工程师等执业资格证书。大部分教师具有高教、工程双系列职称，教师双师素质覆盖率为95%。学院下设学院办公室、辅导员办公室、院团总支以及建筑工程技术教研室、建筑室内设计教研室、工程造价与建设工程管理教研室、市政工程技术与园林工程教研室、工程测量教研室、综合实训教研室。建设有建筑工程省级开放实训基地、现代建筑建造技术省级协同创新中心，贵州侗人古建（杨应琪、顾学尧）省级大师工作室。学院紧跟经济社会发展，深耕贵州，不断深化产教融合、校企合作，创新人才培养模式，为贵州经济社会发展提供智力支持和人才支撑。2013年成为贵州建设教育协会成员，2018年成为中国建设教育协会会员单位，2020年成为建筑识图1+X证书试点单位。
+						<u-parse :html="details.description"></u-parse>
 					</view>
 				</view>
 			</view>
@@ -86,11 +72,44 @@
 				background: {
 					backgroundColor: '#3D5D4C'
 				},
-				studyDifficulty: 4
+				learnpackageId: '',
+				details: {}
+			}
+		},
+		onLoad(page) {
+			if (page.id) {
+				this.learnpackageId = page.id
+			}
+		},
+		onShow() {
+			if (this.learnpackageId) {
+				this.getDetails(this.learnpackageId)
 			}
 		},
 		methods: {
-
+			/**
+			 * 获取专业详情
+			 * @param {Object} id
+			 */
+			getDetails(id) {
+				this.$u.api.school.getLearnpackageDetails({ id }).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+						this.details = res.data
+					}
+				})
+			},
+			/**
+			 * 跳转到指定页面
+			 * @param {Object} url
+			 * @param {Object} params
+			 */
+			jumpPage(url, params) {
+				this.$u.route({
+					url,
+					params
+				})
+			}
 		}
 	}
 </script>

h5_web/pages/upgrade/upgrade/upgrade.scss

@@ -141,3 +141,7 @@
 		left: 0;
 	}
 }
+.no-data {
+	width: 100%;
+	text-align: center;
+}

h5_web/pages/upgrade/upgrade/upgrade.vue

@@ -24,7 +24,7 @@
 			
 			<view class="upgrade-content-select">
 				<view class="upgrade-content-select-left">
-					<u-input v-model="schoolName" placeholder="请选择学院" type="select" @click="schoolShow = true" :border="true"/>
+					<u-input v-model="schoolName" placeholder="请选择学院" type="select" @click="clickSchoolShow" :border="true"/>
 				</view>
 				<view class="upgrade-content-select-right">
 					<view @click="jumpPage('/pages/schoolDetails/schoolDetails', { schoolId: schoolId })">学院详情</view>
@@ -33,19 +33,22 @@
 			
 			<view class="upgrade-content-list">
 				<view class="upgrade-content-list-advertisement">
-					<image src="../../../static/img/advertisement.png" @click="jumpPage('/pages/recruitStudents/recruitStudents')"/>
+					<image src="../../../static/img/advertisement.png" @click="jumpPage('/pages/recruitStudents/recruitStudents', { id: schoolId, name: schoolName }, 'acitivity')"/>
 				</view>
 				
 				<view class="upgrade-content-list-hot">
 					<view class="title">热门活动</view>
 					<view class="list">
-						<view class="item" v-for="(item, index) in hotMajorList" :key="index" @click="jumpPage('/pages/upgrade/professionalIntroduction/professionalIntroduction')">
+						<view class="item" v-for="(item, index) in hotMajorList" :key="index" @click="recordBrowseTotal(item)">
 							<view class="image">
-								<u-image :src="item.url" width="100%" height="190"/>
+								<u-image :src="item.img" width="100%" height="190" border-radius="10"/>
 							</view>
-							<view>{{ item.majorName }}</view>
+							<view>{{ item.name }}</view>
 							<view>{{ item.schoolName }}</view>
 						</view>
+						<view class="no-data">
+							<u-empty v-if="hotMajorList.length === 0" text="无热门活动" mode="list"></u-empty>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -55,7 +58,7 @@
 		<view class="upgrade-consult-button">
 			问题咨询（0851-863789）
 		</view>
-		<u-select v-model="schoolShow" :list="schoolList" @confirm="schoolChange"/>
+		<u-select v-model="schoolShow" :list="schoolList" @confirm="schoolChange" :default-value="schoolDefaultIndex"/>
 		<u-toast ref="uToast"/>
 	</view>
 </template>
@@ -77,20 +80,23 @@
 				schoolName: '',
 				schoolId: '',
 				schoolShow: false,
+				schoolDefaultIndex: [],
 				// 热门专业
-				hotMajorList: [
-					{ url: require('../../../static/img/skill-01.png'), majorName: '汽修', schoolName: '学校1' },
-					{ url: require('../../../static/img/skill-02.png'), majorName: '汽修', schoolName: '学校1' },
-					{ url: require('../../../static/img/skill-03.png'), majorName: '汽修', schoolName: '学校1' },
-					{ url: require('../../../static/img/skill-04.png'), majorName: '汽修', schoolName: '学校1' }
-					
-				]
+				hotMajorList: []
 			}
 		},
-		onLoad() {
+		onShow() {
 			this.getSchoolList()
 		},
 		methods: {
+			clickSchoolShow() {
+				this.schoolList.forEach((item, index) => {
+					if (this.schoolId === item.id) {
+						this.schoolDefaultIndex = [index]
+					}
+				})
+				this.schoolShow = true
+			},
 			/**
 			 * 学院下拉
 			 * @param {Object} e
@@ -98,23 +104,24 @@
 			schoolChange(e) {
 				this.schoolName = e[0].label
 				this.schoolId = e[0].value
+				this.getProfessonList(this.schoolId)
 			},
 			/**
 			 * 获取学校列表
 			 */
 			getSchoolList() {
-				this.$u.api.school.getSchoolList({
-					pageNum: 1,
-					pageSize: 1000
-				}).then(res => {
+				this.$u.api.school.getList().then(res => {
 					if (res.code === 200) {
-						this.schoolList = res.rows.map((item) => {
+						this.schoolList = res.data.map((item) => {
 							return {
 								...item,
 								value: item.id,
-								label: item.schoolName
+								label: item.school_name
 							}
 						})
+						this.schoolName = this.schoolList[0].label
+						this.schoolId = this.schoolList[0].value
+						this.getProfessonList(this.schoolId)
 					} else {
 						this.$refs.uToast.show({
 							title: res.msg,
@@ -128,8 +135,28 @@
 					})
 				})
 			},
-			jumpPage(url, params) {
-				if (params) {
+			/**获取学院下专业
+			 * @param {Object} id
+			 */
+			getProfessonList(id) {
+				this.$u.api.school.getProfesson({id}).then(res => {
+					if (res.code === 200) {
+						this.hotMajorList = res.rows;
+					} else {
+						this.$refs.uToast.show({
+							title: res.msg,
+							type: 'error'
+						})
+					}
+				})
+			},
+			/**
+			 * 跳转指定页面
+			 * @param {Object} url
+			 * @param {Object} params
+			 */
+			jumpPage(url, params, type) {
+				if (params && !type) {
 					if (params.schoolId) {
 						this.$u.route({
 							url: url,
@@ -143,9 +170,29 @@
 					}
 				} else {
 					this.$u.route({
-						url: url
+						url: url,
+						params: params
 					})
 				}
+			},
+			/**
+			 * 学历提升关注度统计
+			 * @param {Object} item
+			 */
+			recordBrowseTotal(item) {
+				const query = {
+					platform: '1', // 平台:1-H5 2-APP 3-小程序 4-PC端
+					pages: location.href,//页面路径
+					btnName: '查看专业详情',//按钮名称
+					btnEvent: '1',//按钮事件: 1-点击 2-长按 3-滑动
+					ipAddress: '',//IP地址
+					typeName: '学历提升关注度',//类型名称 例：学校关注度 、适应性考试等
+					typeCode: 'XLTSGZD',// 类型编码 例：类型名称首字母缩写(XXGZD)
+					categoryName: item.name,//类别名称 例：XX学校，SS考试
+				}
+				this.$u.api.postAnalysis(query).then(res => {
+					this.jumpPage('/pages/upgrade/professionalIntroduction/professionalIntroduction', { id: item.id }, 'acitivity')
+				})
 			}
 		}
 	}