zc_saas_h5/pages2/wd/class.vue

<template>
	<view style=" padding:0 30rpx 30rpx;">
		<nav-bar title="我的网课"></nav-bar>
		<view class="class" v-for="(item, index) in goodsList" :key="index">
			
				<view class="class_item" @click.stop="studyIn(item.goodsId,item.gradeId,item,index)">
						<image :src="$method.splitImgHost(item.coverUrl, true)" class="class_img"></image>
						<view class="class_text">
							<view class="class_title">{{ item.goodsName }}</view>
							<view class="content_box">
								<image src="/static/icon/wk_icon1.png" class="wk_icon"></image>
								共
								<text class="content">{{ item.courseNum }}</text>
								课程
								<text class="content">{{ item.secAllNum+item.examNum }}</text>
								节
								<text class="content">{{ item.classHours }}</text>
								学时
							</view>
							<view class="content_box">
								<image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
								学习有效期：
								<text class="content">{{ $method.timestampToTime(item.studyStartTime) }} - {{ $method.timestampToTime(item.studyEndTime) }}</text>
							</view>
						</view>
						
						<!-- 不在学习有效期 -->
						<template v-if="sysTime < item.studyStartTime || sysTime > item.studyEndTime">
							<view class="class-warm" v-if="item.gradeId != 0 && item.gradeStatus == 1">
								<view class="class-warm__text">
									<view class="date">
										不在学习有效期，不可以学习了哦
									</view>
								</view>
							</view>
						</template>
						
						<template v-else>
							<!-- 班级有效期过了 -->
							<template v-if="item.classEndTime && (item.classEndTime < sysTime) ">
								<view class="class-warm">
									<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill"></u-icon>
									<view class="class-warm__text">
										<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime)}} - {{$method.timestampToTime(item.classEndTime)}}</view>
										<view class="state">班级状态：已过期，有疑问请联系 <text @click="call">020-87085982</text></view>
									</view>
								</view>
							</template>
							
							<!-- 班级有效期之前 -->
							<template v-else-if="item.classStartTime && (item.classStartTime > sysTime) ">
								<view class="class-warm">
									<u-icon class="class-warm__icon" size="30" color="#FF3B30" name="error-circle-fill"></u-icon>
									<view class="class-warm__text">
										<view class="date">班级有效期：{{$method.timestampToTime(item.classStartTime)}} - {{$method.timestampToTime(item.classEndTime)}}</view>
										<view class="state">班级状态：未到学习时间，有疑问请联系 <text @click="call">020-87085982</text></view>
									</view>
								</view>
							</template>
							
							<!-- 在班级有效期之间或者没有班级有效期 -->
							<template v-else>
								
								<view class="class-warm" v-if="item.gradeId != 0 && item.gradeStatus == 1 && item.classStatus != null">
									<view class="class-warm__text">
										<view class="date">
											班级状态：
											<text v-if="item.classStatus == 1">已开班</text>
											<text v-if="item.classStatus == 0">未开班</text>
										</view>
										<view class="state" v-if="item.classStatus == 0">教务处正在为您开通班级，请耐心等待</view>
										<view class="state" v-if="item.classStatus == 1 && item.classStartTime && item.classEndTime">
											班级有效期：{{$method.timestampToTime(item.classStartTime)}}-{{$method.timestampToTime(item.classEndTime)}}
										</view>
									</view>
								</view>
								<!-- 学时审核状态不可审核 -->
								<template v-if="item.periodStatus == -1">
									
									<view class="class-warm" v-if="item.classStatus == 1 || item.classStatus === null">
										<view class="class-warm__text">
											<view class="date">
												<template v-if="sysTime >= item.studyStartTime && sysTime <= item.studyEndTime">
													学习状态：
													<text v-if="item.stuAllNum == 0">未学习</text>
													<text v-else-if="item.stuAllNum > 0 && item.stuAllNum < item.secAllNum">学习中</text>
													<text v-else-if="item.stuAllNum >= item.secAllNum">已学完</text>
												</template>
												<template v-else>
													已过学习有效期，不可以学习了哦！
												</template>
											</view>
										</view>
									</view>
									
									<view class="class-warm" v-if="item.profileTpStatus == 1">
										<view class="class-warm__text">
											<view class="date">
												资料审核状态：
												<text v-if="item.profileStatus == null">未提交资料</text>
												<text v-else-if="item.profileStatus == 1">已通过</text>
												<text v-else-if="item.profileStatus == 2">审核中</text>
												<text v-else-if="item.profileStatus == 3">待完善</text>
											</view>
										</view>
									</view>
								</template>
								
								<!-- 学时审核状态可以审核 -->
								<template v-if="item.periodStatus != -1">
									<view class="class-warm">
										<view class="class-warm__text">
											<view class="date">
												<text v-if="item.periodStatus == 0">机构审核：学时审核不通过</text>
												<text v-else-if="item.periodStatus == 1">机构审核：学时审核通过</text>
												<text v-else-if="item.periodStatus == 2">学时待审核</text>
											</view>
										</view>
									</view>
									
									<view class="class-warm" v-if="item.subscribeId != null && item.periodStatus == 1">
										<view class="class-warm__text">
											<view class="date">
												<view v-if="item.subExamStatus === null">待预约考试</view>
												<view v-else-if="item.subExamStatus === 0 &&  sysTime < item.subApplySiteStartTime">
													待考试，考试时间：{{$method.timestampToTime(item.subApplySiteStartTime)}} - {{$method.timestampToTime(item.subaApplySiteEndTime)}}
												</view>
												<view v-else-if="item.subExamStatus === 0">待出考试结果</view>
												<view v-else-if="item.subExamStatus === 1">
													<text v-if="item.subResult === null">待出考试结果</text>
													<text v-if="item.subResult === 0">考试结果：不通过，需补考</text>
													<text v-else-if="item.subResult === 1">考试结果：通过，考试成绩为{{item.subPerformance}}</text>
												</view>
												<view v-else-if="item.subExamStatus === 2">缺考，无成绩，需补考</view>
												<view v-else-if="item.subExamStatus === 3">作弊，无成绩，需补考</view>
												<view v-else-if="item.subExamStatus === 4">替考，无成绩，需补考</view>
												
												
											</view>
										</view>
									</view>
								</template>
								
							</template>
							
							
						</template>
						
						
				</view>
			
			
			<view class="bottomBox">
				<template v-if="item.gradeStatus == 1 && item.status == 1 && (item.studyEndTime > sysTime) && (item.studyStartTime < sysTime) &&  (item.classEndTime && (item.classEndTime < sysTime)) && (item.periodStatus == 0 || item.periodStatus == -1) && item.studyCount > 0">
					<view class="restart" @click.stop="selectClass(item,index)">
						选班重学
					</view>
				</template>
				
				<template v-else>
					<view class="content_box">
						<image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
						学习进度：{{ item.stuAllNum+item.recordNum }}/{{ item.secAllNum+item.examNum }}
					</view>
					<view class="box_progress">
						<view style="width: 60%;"><u-line-progress :showText="false" height="22" active-color="#ff9900" :show-percent="false" :percent="(item.stuAllNum / item.secAllNum) * 100"></u-line-progress></view>
						
						<view><u-button :class="{disabled:(item.interfacePushId > 0 && item.officialStatus != 1) || sysTime <= item.studyStartTime || sysTime >= item.studyEndTime || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart)}" type="warning" size="mini" @click.stop="studyIn(item.goodsId,item.gradeId,item,index)">进入学习</u-button></view>
					</view>
					<view class="box_progress" v-if="item.applyStatus === 1">
						<view style="flex:1;margin-right:10rpx;">
							<text style="color: #333333;">{{ item.applyName }}</text>
						</view>
						<view><u-button :plain="true" type="primary" size="mini" @click.stop="appointment(item)">预约考试</u-button></view>
					</view>
					<view class="box_progress" v-if="item.beforeStatus === 1">
						<view style="flex:1;margin-right:10rpx;">
							<text style="color: #2979ff;">{{ item.beforeName }}</text>
						</view>
						<view><u-button type="primary" size="mini" @click="appBeforeAddress(item.goodsId)">进入刷题</u-button></view>
					</view>
				</template>
				
				
			</view>
		</view>
			
		<view v-if="goodsList.length==0">
			<u-empty text="暂无网课" margin-top="500" mode="list"></u-empty>
			
		</view>
		<u-popup v-model="selectClassModal" @close="gradeValue = -1" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择班级</view>
				</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
								<view v-for="(item, index) in gradeList" :key="index" >
									<view style="display: flex;align-items: center;padding: 20rpx;">
										<view>
											<u-radio
												shape="circle"
												:name="index"
												:disabled="item.studentNum > 0 && item.studentNum == item.studentUpper"
											>
												<view :class="item.checked?'white-box blue-box':'white-box'" >
													<view>
														<view class="blackTxt">{{item.className}}</view>
														<view class="redTxt" v-if="item.classEndTime">有效期至：{{$method.timestampToTime(item.classEndTime)}}</view>
														<view class="redTxt" v-if="item.classEndTime">本班还剩{{$method.GetRTime(item.classEndTime)}}天将结束学习</view>
													</view>
												</view>
											</u-radio>
										</view>
										
									</view>
								</view>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup()">确定</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [1, 2, 3],
			goodsList: [],
			selectClassModal:false,
			gradeList:[],
			gradeValue:-1,
			param:{
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			sysTime:0,
			itemIndex:'',
			selectItem:{}
		};
	},
	onLoad(option) {
		this.sysTime = this.$method.timest();
		this.courseGoodsList();
	},
	onShow() {
		if(this.itemIndex !== '') {
			this.refreshByIndex();
		}
		this.commonSystemTime()
	},
	onReachBottom() {
		if (this.goodsList.length < this.total) {
			this.param.pageNum++;
			this.courseGoodsList();
		}
	},
	methods: {
		/**
		 * 返回刷新之前进入的课程数据
		 */
		refreshByIndex() {
			let self = this;
			this.$api.courseGoodsList({
				pageNum: this.itemIndex+1,
				pageSize: 1
			}).then(res => {
				if (res.data.code == 200) {
					this.$set(this.goodsList,this.itemIndex,res.data.rows[0])
				}
			});
		},
		commonSystemTime() {
			this.$api.commonSystemTime().then(res => {
				this.sysTime = res.data.data;
			})
		},
		selectClass(item,index) {
			console.log(item)
			this.itemIndex = index;
			this.selectItem = item;
			this.selectClassModal = true;
			this.goodsGradeList(item.goodsId);
		},
		radioGroupChange(e){
			console.log(e)
		},
		goodsGradeList(id) {
			let self = this
			this.$api.goodsGradeList({goodsId:id}).then(res => {
				if(res.data.code==200){
					self.gradeList = res.data.rows
					if(self.gradeList.length==0){
						let item = {
							className:'系统分班',
							gradeId:0
						}
						self.gradeList.push(item)
					} else {
						let isGradeFull = self.gradeList.every(item => (item.studentNum > 0 && item.studentNum == item.studentUpper))
						//所有班级都满了
						if(isGradeFull) {
							let item = {
								className:'系统分班',
								gradeId:0
							}
							self.gradeList.unshift(item)
						}
					}
				}
			});
		},
		appBeforeAddress(goodsId) {
			this.$api.appBeforeAddress({
				goodsId
			}).then(res => {
				if(res.data.code == 200) {
					uni.navigateToMiniProgram({
					  appId: res.data.data.url,
					  success(res) {
					    // 打开成功
					  }
					})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none',
					})
				}
			})
		},
		courseGoodsList() {
			let self = this;
			this.$api.courseGoodsList(this.param).then(res => {
				if (res.data.code == 200) {
					self.goodsList.push.apply(self.goodsList, res.data.rows);
					self.total = res.data.total;
				}
			});
		},
		async studyIn(v,i,item,index) {
			
			if(item.learnStatus == 1) { //跳转第三方h5
				uni.navigateTo({
					url:'/pages/webview/index?url='+item.officialLearningUrl
				})
				return;
			}
			
			//内部系统
			if(item.interfacePushId > 0 && item.officialStatus != 1) {
				uni.showModal({
					showCancel: false,
					content:'机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！'
				});
				return;
			}
			if(this.sysTime <= item.studyStartTime || this.sysTime >= item.studyEndTime ) {
				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 ;
			}
			
			
			this.itemIndex = index;
			
			if(item.gradeStatus == 1 && item.status == 1 && (item.studyEndTime > 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
				});
				return;
			}
			
			if(item.courseNum == 1 ) {
				
				this.$api.courseCourseList({
					pageNum:1,
					pageSize:1,
					goodsId:item.goodsId,
					gradeId:item.gradeId
				}).then(res => {
					if(res.data.code == 200) {
						uni.navigateTo({
							url:`/pages3/polyv/detail?id=${res.data.rows[0].courseId}&goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}`
						})
					}
				});
				return;
			}
			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)
				})
			})
		},
		appointment(item) {
			var data = {
				goodsId: item.goodsId,
				gradeId: item.gradeId
			};
			this.$api.getApplysubscribe(data).then(res => {
				if (res.data.code === 500) {
					uni.showModal({
						showCancel: false,
						content: res.data.msg
					});
				}
				if (res.data.code === 200) {
					this.$navTo.togo('/pages2/appointment/index', {
						goodsId: item.goodsId,
						gradeId: item.gradeId,
						orderGoodsId: item.orderGoodsId
					});
				}
			});
		},
		okPopup() {
			if(this.gradeValue == -1) {
				uni.showToast({
					icon:'none',
					title:'请选择班级'
				})
				return;
			}
			this.$api.changeGrade({
			  goodsId: this.selectItem.goodsId,
			  gradeId: this.gradeValue,
			  oldGradeId: this.selectItem.gradeId,
			  orderGoodsId: this.selectItem.orderGoodsId,
			  userId: this.selectItem.userId
			}).then(res => {
				if(res.data.code == 200) {
					if(this.itemIndex !== '') {
						this.refreshByIndex();
					}
					this.selectClassModal = false;
					uni.showToast({
						title:'选班成功'
					})
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.msg
					})
				}
			})
		},
		call() {
			uni.makePhoneCall({
				 phoneNumber: '020-87085982' //仅为示例
			})
		}
	}
};
</script>
<style>
page {
	background: #eaeef1;
}
</style>
<style scope lang="scss">
.box_progress {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	
	.disabled {
		opacity: 0.6;
	}
}
.bottomBox {
	background: #ffffff;
	width: 94%;
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
	margin: 0 auto;
	padding: 20rpx;
	
	.restart {
		margin:0 auto;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
		font-size: 30rpx;
		width: 440rpx;
		height: 80rpx;
		background: #FF0000;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
}
.content_box {
	font-size: 24rpx;
	display: flex;
	align-items: center;
	color: #999999;
	margin-top: 8rpx;
}
.content {
	color: #000000;
	margin: 0 8rpx;
}
.wk_icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 8rpx;
}

.class {
	margin-bottom: 30rpx;
	
	.class_item {
		width: 100%;
		background: #ffffff;
		box-shadow: 0rpx 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
		border-radius: 24rpx;
		padding: 20rpx;
		z-index: 999;
		position: relative;
		
		.class_img {
			height: 316rpx;
			width: 100%;
			border-radius: 24rpx;
		}
		
		.class_text {
			padding:0 20rpx;
			
			.class_title {
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
		
		.class-warm {
			padding:10rpx 20rpx;
			display: flex;
			align-items: flex-start;
			
			&__icon {
				margin-right:10rpx;
			}
			
			&__text {
				
				.date {
					font-size: 24rpx;
					font-weight: bold;
					color: #FF3B30;
				}
				
				.state {
					margin-top:15rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #FF3B30;
				}
			}
		}
	}
}




.popup_box {
	height: 700rpx;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	
	.line1{
		width: 80rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx;
		margin: 0 auto;
		margin-top: 15rpx;
	}
	
	
	.grade{
		height: 23rpx;
		font-size: 24rpx;
		color: #999999;
		margin: 0 auto;
		margin-top: 15rpx;
		text-align: center;
	}
	
	.confrim-btn{
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content:center;
		
		.okBtn{
			width: 200rpx;
			height: 64rpx;
			background: linear-gradient(0deg, #015EEA, #00C0FA);
			border-radius: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 64rpx;
		}
	}
}
</style>