zc_saas_h5/pages/learn/index.vue

<template>
    <view class="learnings">
		<u-navbar :is-back="false" title="学习中心" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image  src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
			</view>
		</u-navbar>
		<u-line color="#D6D6DB" />
		<view class="contents">
			<view class="diatance">
				<image class="clock" src="/static/learn/clock.png" mode=""></image>
				<text>一级建造师，距离考试还有123天</text>
			</view>
			<!-- 有学习的课程 -->
			<view class="had_courses">
				<!-- 直播 -->
				<view class="lives">

				</view>
				<!-- 我的课程 -->
				<view class="my_courses">
					<text class="titles">我的课程</text>

					<view v-for="(item, index) in courseLists" :key="index" class="course_item">
						<view class="lefts">
							<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
							<view class="live_icon">直播</view>
						</view>
						<view class="rights">
							<view>
								<view class="cou_titles">{{ item.goodsName }}</view>
								<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
									<image class="l_range" src="/static/learn/learn_range.png"></image>
									学习周期：
									<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
									<!-- <text class="l_time">{{ $method.formate(item.studyStartTime,'yyyy.mm.dd') }} - {{ $method.formate(item.studyStartTime,'yyyy.mm.dd') }}</text> -->
								</view>
							</view>
							<view class="learn_progress">
								<view class="progress_up">
									<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
									学习进度：{{ item.stuAllNum+item.recordNum }}/{{ item.secAllNum+item.examNum }}
								</view>
								<view class="progress_down">
									<view class="progress_bar" style="width: 50%;">
										<u-line-progress :showText="false" height="32" active-color="#ff9900" :show-percent="false"
											:percent="((item.stuAllNum+item.recordNum) / (item.secAllNum+item.examNum)) * 100"></u-line-progress>
									</view>
									<view class="enter_into" @click.stop="studyIn(item.goodsId,item.gradeId,item,index)">进入学习</view>
								</view>

							</view>
						</view>
					</view>
				</view>

				<!-- 我的题库 -->
				<view class="my_courses">
					<text class="titles">我的题库</text>
					<view class="bottoms">
						<navigator hover-class="none" url="/pages2/subject/collect">
							<view class="item collect">
								<view class="text">收藏集<u-icon name="arrow-right"></u-icon></view>
								<image class="img" src="/static/questionBank_collect.png"></image>
							</view>
						</navigator>
						<view class="item list">
							<navigator  hover-class="none" url="/pages2/bank/question_record">
								<view class="list-in">
									<image class="img" src="/static/questionBank_record.png" ></image>
									<view class="text">
										做题记录 <u-icon name="arrow-right"></u-icon>
									</view>
									
								</view>
							</navigator>
							
							<navigator  hover-class="none" url="/pages2/subject/wrong">
								<view class="list-in">
									<image class="img" src="/static/questionBank_wrong.png"></image>
									<view class="text">
										错题集 <u-icon name="arrow-right"></u-icon>
									</view>
								</view>
							</navigator>
						</view>
					</view>

					<view v-for="(item, indexq) in questionLists" :key="indexq" class="course_item">
						<view class="lefts">
							<image class="lefet_img" :src="$method.splitImgHost(item.coverUrl, true)" mode=""></image>
							<!-- <view class="live_icon">直播</view> -->
						</view>
						<view class="rights">
							<view>
								<view class="cou_titles">{{ item.goodsName }}</view>
								<view v-if="item.serviceStartTime && item.serviceEndTime" class="learn_ranges">
									<image class="l_range" src="/static/learn/learn_range.png"></image>
									学习周期：
									<text class="l_time">{{ item.serviceStartTime | formate('yyyy.mm.dd') }} - {{ item.serviceEndTime | formate('yyyy.mm.dd') }}</text>
								</view>
							</view>
							<view class="learn_progress">
								<view class="progress_up">
									<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
									学习进度：{{item.doNum}}/{{item.totalNum}}
								</view>
								<view class="progress_down">
									<view class="progress_bar" style="width: 50%;">
										<u-line-progress :show-percent="false" height="32" active-color="#007AFF" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
									</view>
									<view class="enter_into" @click="studyques(item,index)">进入练习</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 没有学习的课程 -->
			<view v-if="false" class="no_datas">
				<image class="courses" src="/static/learn/no_course.png" mode=""></image>
				<view class="no_learns">您目前没有可学习的课程</view>
				<view class="choose" @click="toChoose()">立即去选购</view>
			</view>
				
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			paramC: {
				pageNum: 1,
				pageSize: 50
			},
			activeItem: {},
			itemIndex: '',
			confirmTimer:null,
			confirmCount:10,
			confirmChecked:false,
			showUserConfirmInfo:false,
			selectItem: {},
			selectClassModal: false,
			gradeList: [],
			gradeValue: -1,
			sysTime: 0,
			// totalC: 0,
			courseLists: [],
			questionLists: [], // 题库
			paramQ: {
				pageNum: 1,
				pageSize: 50
			},
			queitemIndex:'',
        }
    },
	onLoad(option) {
		this.getcourseList()
		this.getlistQuestion()
	},
	async onShow() {
		await this.commonSystemTime()
		this.sysTime = +this.$method.timest()
		console.log('this.sysTime', this.sysTime)
	},
	methods: {
		toChoose() {
			uni.switchTab({
				url:'/pages/course/index'
			})
		},
		// 商品/课程列表
		getcourseList() {
			this.$api.courseGoodsList(this.paramC).then(res => {
				if (res.data.code == 200) {
					this.courseLists = res.data.rows || []
				}
			})
		},
		// 题库列表
		getlistQuestion() {
			this.$api.listGoodsUserQuestion(this.paramQ).then(res => {
				if (res.data.code == 200) {
					this.questionLists = res.data.rows || []
				}
			})
		},
		commonSystemTime() {
			return new Promise(resolve => {
				this.$api.commonSystemTime().then(res => {
					this.sysTime = res.data.data;
				})
			})
		},
		async studyIn(v, i, item, index) {
			this.activeItem = item
			if (item.interfaceAccountId > 0) { //学习账号已开通

				if (item.learnStatus == 1) { //跳转第三方h5
					// this.showMark = true;
					uni.navigateTo({
						url: `/pages3/polyv/detail?goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&isOther=1`
					})
					return;
					// uni.navigateTo({
					// 	url:'/pages/webview/index?url='+item.officialLearningUrl
					// })
					// return;
				} else {
					uni.showModal({
						showCancel: false,
						content: '您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！'
					});
					return;
				}
				return;
			}
			
			if (item.serviceStartTime && (this.sysTime <= item.serviceStartTime || this.sysTime >= item.serviceEndTime)) {
				uni.showToast({
					icon: 'none',
					title: '不在学习服务期，不能进入学习'
				})
				return;
			}

			if ((item.classStartTime && this.sysTime <= item.classStartTime) || (item.classEndTime && this
					.sysTime >= item.classEndTime)) {
				uni.showToast({
					icon: 'none',
					title: '不在班级有效期，不能进入学习'
				})
				return
			}

			if (item.learningStatus == 2) {
				uni.showToast({
					icon: 'none',
					title: '开放学习时间待定，不能进入学习'
				})
				return
			}

			if (item.classStatus == 0) {
				uni.showToast({
					icon: 'none',
					title: '尚未开班，不能进入学习'
				})
				return
			}
			console.log(this.sysTime, item.learningTimeStart)
			console.log(this.sysTime < item.learningTimeStart)
			if (item.learningStatus == 3 && (this.sysTime < item.learningTimeStart)) {
				uni.showToast({
					icon: 'none',
					title: '不在开放学习时间,不能进入学习'
				})
				return;
			}
			
			var confirmDetail = true
			if (item.educationName == '继续教育') { 
				if(item.officialName && item.businessName == '二级' && item.projectName == '建造师') { 
					confirmDetail = await this.userConfirmInfoDetail()
				}
			}
			
			if(!confirmDetail) {
				return;
			}
			
			// //内部系统
			// if (item.interfacePushId > 0 && item.officialStatus != 1) {
			// 	uni.showModal({
			// 		showCancel: false,
			// 		content: '机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！'
			// 	});
			// 	return;
			// }


			this.itemIndex = index;

			if (item.gradeStatus == 1 && item.status == 1 && (item.serviceEndTime > this.sysTime) && (item
					.classEndTime && (item.classEndTime < this.sysTime)) && (item.periodStatus == 0 || item
					.periodStatus == -1) && item.studyCount > 0) {
				this.selectClass(item, index);
				return;
			}


			let rebuildStatus = await this.courseGoodsRebuildStatus(item.goodsId, item.gradeId)

			if (rebuildStatus == 0) {
				this.$navTo.togo('/pages2/learn/details', {
					gradeId: item.gradeId,
					goodsId: item.goodsId,
					orderGoodsId: item.orderGoodsId,
				});
				return;
			}

			// if (item.educationName == '继续教育') {
				// /lock/lockStatus
				this.$api.lockLockStatus({
					action: 'jxjy',
					uuid:this.$method.getUuid()
				}).then(res => {
					if (res.data.code == 200) { //有其他端在操作，不能学习
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							mask: true,
							duration: 3000
						})
					} else if (res.data.code == 500) { //可以学习

						if (item.courseNum == 1) {
							
							this.$api.courseCourseList({
								pageNum: 1,
								pageSize: 1,
								goodsId: item.goodsId,
								gradeId: item.gradeId,
								orderGoodsId: item.orderGoodsId,
							}).then(res => {
								if (res.data.code == 200) {
									// if(item.officialName && item.businessName == '二级' && item.projectName == '建造师') {
									// 	this.userConfirmInfoDetail().then(() => {
									// 			uni.navigateTo({
									// 					url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}`
									// 				})
									// 	})
									// } else {
										uni.navigateTo({
												url: `/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}`
											})
									// }
								
							
								}
							});
							return;
						}
						
						// if(item.officialName && item.businessName == '二级' && item.projectName == '建造师') {
						// 	// this.userConfirmInfoDetail().then(() => {
						// 			this.$navTo.togo(`/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`);
						// 	// })
						// } else {
							this.$navTo.togo(`/pages2/wd/course?id=${v}&gid=${i}&orderGoodsId=${item.orderGoodsId}`);
						// }
						
					}
				})

		},
		/**
		 * @param {Object} goodsId 商品id
		 * 查询商品重修状态
		 */
		courseGoodsRebuildStatus(goodsId, gradeId) {
			return new Promise(resolve => {
				this.$api.courseGoodsRebuildStatus({
					goodsId: goodsId,
					gradeId: gradeId
				}).then(res => {
					resolve(res.data.data)
				})
			})
		},
		userConfirmInfoDetail(){
			return new Promise(resolve => {
				this.$api.userConfirmInfoDetail({
					orderGoodsId:this.activeItem.orderGoodsId,
				}).then(res => {
					if(!res.data.data) {
						clearInterval(this.confirmTimer);
						this.confirmCount = 10;
						this.showUserConfirmInfo = true;
							this.confirmTimer = setInterval(() => {
							if(this.confirmCount > 0) {
								this.confirmCount-- 
							} else {
								clearInterval(this.confirmTimer);
							}
							
						},1000)
					} else {
						if(res.data.data.pushInfo) {
							resolve(true)
						} else {
							uni.showModal({
								showCancel:false,
								title:'提示',
								content:'开通信息推送不成功，无法进入学习，请联系020-87085982！'
							})
							resolve(false)
						}
						
					}
				})
			})
		},
		selectClass(item, index) {
			console.log(item)
			this.itemIndex = index;
			this.selectItem = item;
			this.selectClassModal = true;
			this.goodsGradeList(item.goodsId);
		},
		goodsGradeList(id) {
			this.$api.goodsGradeList({
				goodsId: id
			}).then(res => {
				if (res.data.code == 200) {
					this.gradeList = res.data.rows
					if (this.gradeList.length == 0) {
						let item = {
							className: '系统分班',
							gradeId: 0
						}
						this.gradeList.push(item)
					} else {
						let isGradeFull = this.gradeList.every(item => (item.studentNum > 0 && item
							.studentNum == item.studentUpper))
						//所有班级都满了
						if (isGradeFull) {
							let item = {
								className: '系统分班',
								gradeId: 0
							}
							this.gradeList.unshift(item)
						}
					}
				}
			});
		},
		// 进入刷题
		studyques(item,index){
			console.log(item)
			this.queitemIndex = index;
			let sysTime = this.$method.timest()
			if (item.serviceStartTime && item.serviceEndTime && (sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime)) {
				uni.showToast({
					icon: 'none',
					title: '不在学习服务期，不能进入学习'
				})
				return;
			}
			uni.navigateTo({
				url:'/pages2/bank/question_detail?id='+item.goodsId+'&orderGoodsId='+item.orderGoodsId
			})
		},
	}
}
</script>

<style>
page {
	background: #eaeef1;
}
</style>
<style lang="scss" scoped>
.contents {
	width: 100%;
	.diatance {
		width: 100%;
		height: 85rpx;
		background-color: #007AFF;
		display: flex;
    	align-items: center;
		margin-top: 8rpx;
		.clock {
			width: 44rpx;
			height: 41rpx;
			margin: 0rpx 22rpx 0rpx 65rpx;
		}
		>text {
			color: #fff;
			font-size: 28rpx;
		}
	}
}
.had_courses{
	width: 100%;
	padding: 39rpx 24rpx 31rpx;
	.lives {
		widows: 100%;
		height: 150rpx;
	}
}
.my_courses {
	
	.titles {
		font-size: 32rpx;
		color: #333333;
		margin: 44rpx 0rpx 24rpx 43rpx;
		font-weight: bold;
		display: block;
	}
	.course_item {
		width: 100%;
		height: 278rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1,99,235,0.1000);
		border-radius: 24rpx;
		padding: 29rpx 29rpx 20rpx 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.lefts {
		width: 202rpx;
		height: 223rpx;
		border-radius: 12rpx;
		margin-right: 35rpx;
		position: relative;
		top: 0;
		left: 0;
		border: 1rpx solid #ddd;
		.lefet_img {
			width: 100%;
			height: 100%;
			display: block;
		}
		.live_icon {
			width: 65rpx;
			height: 35rpx;
			line-height: 35rpx;
			border-radius: 22rpx 0rpx 22rpx 0rpx;
			background-color: #FFB102;
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.rights {
		width: 400rpx;
		height: 223rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;;
		.cou_titles {
			margin-top: 14rpx;
			color: #333333;
			font-size: 28rpx;
			font-weight: bold;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.learn_ranges {
			color: #999;
			font-size: 24rpx;
			margin-top: 24rpx;
			.l_range {
				width: 20rpx;
				height: 24rpx;
				margin-right: 9rpx;
			}
			.l_time {
				color: #333;
			}
		}
		.learn_progress {
			width: 100%;
		}
		.progress_up {
			font-size: 24rpx;
			// font-weight: 400;
			color: #999999;
			display: flex;
			align-items: center;
			.wk_icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
		.progress_down {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.enter_into {
			width: 165rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #FFB102;
			border-radius: 0rpx 16rpx 16rpx 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
		}
	}
	// 收藏集，做题记录
	.bottoms {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
		.item {
			width: 335rpx;
			&.collect {
				position: relative;
				font-size: 32rpx;
				color: #FFFFFF;
				height: 240rpx;
				border-radius: 24rpx;
				padding:32rpx;
				
				.text {
					position:relative;
					z-index: 10;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				
				.img {
					position:absolute;
					left:0;
					top:0;
					width:100%;
					height:100%;
					
				}
			}
			
			&.list {
				.list-in {
					position:relative;
					width: 335rpx;
					height: 112rpx;
					background: #007AFF;
					border-radius: 24rpx;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #fff;
					
					&:first-of-type {
						margin-bottom:16rpx;
					}
					
					.text {
						padding-left:91rpx;
						position:relative;
						z-index: 10;
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}
					
					.img {
						position:absolute;
						left:0;
						top:0;
						width:100%;
						height:100%;
					}
				}
			}
		}
	}
}
.no_datas {
	margin-top: 70rpx;
	display: flex;
    flex-direction: column;
    align-items: center;
	.courses {
		width: 360rpx;
		height: 349rpx;
	}
	.no_learns {
		font-size: 32rpx;
		color: #999;
		margin: 46rpx 0rpx 56rpx;
	}
	.choose {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}
}

</style>