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" v-if="item.serviceStartTime && item.serviceEndTime">
						<image src="/static/icon/wk_icon2.png" class="wk_icon"></image>
						学习服务期：
						<text class="content">{{ $method.timestampToTime(item.serviceStartTime,true,true) }} - {{ $method.timestampToTime(item.serviceEndTime,true,true) }}</text>
					</view>
				</view>

				<!-- 不在学习服务期 -->
				<template v-if="sysTime < item.serviceStartTime || sysTime > item.serviceEndTime">
					<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,true,true)}} - {{$method.timestampToTime(item.classEndTime,true,true)}}</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,true,true)}} -
									{{$method.timestampToTime(item.classEndTime,true,true)}}</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,true,true)}}-{{$method.timestampToTime(item.classEndTime,true,true)}}
								</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.serviceStartTime && sysTime <= item.serviceEndTime">
											学习状态：
											<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 == 2">学时待审核</text>
										<text v-else-if="item.periodStatus == 3">学时审核中</text>
										<text v-else-if="item.periodStatus == 1">
											<text v-if="item.periodPlush > 0">学时已上报注册中心</text>
											<text v-else>机构审核：学时审核通过</text>

										</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 < $method.TimeTotimestamp(
												$method.timestampToTime(item.subApplySiteExamTime, true) +
													' ' +
													item.subApplySiteStartTime
											)">
											待考试，考试时间：
											{{
												$method.timestampToTime(item.subApplySiteExamTime, true) +
												" " +
												item.subApplySiteStartTime
											}}
                    -
                    {{
											$method.timestampToTime(item.subApplySiteExamTime, true) +
											" " +
											item.subApplySiteEndTime
										}}
										</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.serviceEndTime > sysTime) && (item.serviceStartTime < 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.recordNum) / (item.secAllNum+item.examNum)) * 100"></u-line-progress>
						</view>

						<view>
							<u-button
								:class="{disabled:(item.interfacePushId > 0 && item.officialStatus != 1) || sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime || (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 && !((item.interfacePushId > 0 && item.officialStatus != 1) || sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))">
						<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 && !((item.interfacePushId > 0 && item.officialStatus != 1) || sysTime <= item.serviceStartTime || sysTime >= item.serviceEndTime || (item.classStartTime && sysTime <= item.classStartTime) || (item.classEndTime && sysTime >= item.classEndTime) || item.learningStatus == 2 || item.classStatus == 0 || (item.learningStatus == 3 && sysTime < item.learningTimeStart))">
						<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,item)">进入刷题</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,true,true)}}
														</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>
		<u-modal v-model="showMark" title="提示" @confirm="markConfirm" confirm-text="复制学习网址" :show-cancel-button="true"
			cancel-text="关闭">
			<view class="slot-content">
				<view>您的学习账号已经开通，请按照步骤操作，进行学习。</view>
				<view>1.复制学习地址:{{markContent}}</view>
				<view>2.在【浏览器中】打开复制的学习网址</view>
				<view>3.打开学习网址后，选择【个人用户】进行登录</view>
				<view>(1)账号：您个人的身份证号码</view>
				<view>(2)密码：身份证号码，再加111111</view>
			</view>

		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markContent: 'http://admin.zhujianpeixun.com/',
				showMark: false,
				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()
			this.sysTime = +this.$method.timest();
		},
		onReachBottom() {
			if (this.goodsList.length < this.total) {
				this.param.pageNum++;
				this.courseGoodsList();
			}
		},
		methods: {
			/**
			 * 复制网址
			 */
			markConfirm() {
				uni.setClipboardData({
			 	data: this.markContent,
			  success: function() {
						console.log('success');
					}
				});
			},
			/**
			 * 返回刷新之前进入的课程数据
			 */
			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,item) {
				this.$api.appBeforeAddress({
					// goodsId,
					orderGoodsId:item.orderGoodsId
				}).then(res => {
					if (res.data.code == 200) {
						uni.navigateToMiniProgram({
							appId: res.data.data.url,
							success(res) {
								// 打开成功
					 	}
						})
					} else {
						uni.showModal({
							title:'提示',
							content:res.data.msg,
							showCancel:false,
						})
					}
				})
			},
			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.interfaceAccountId > 0) { //学习账号已开通

					if (item.learnStatus == 1) { //跳转第三方h5
						this.showMark = true;

						return;
						// uni.navigateTo({
						// 	url:'/pages/webview/index?url='+item.officialLearningUrl
						// })
						// return;
					} else {
						uni.showModal({
							showCancel: false,
							content: '您的学习账号未开通，请稍后再尝试，有疑问，请联系020-87085982！'
						});
						return;
					}


					return;
				}

				//内部系统
				if (item.interfacePushId > 0 && item.officialStatus != 1) {
					uni.showModal({
						showCancel: false,
						content: '机构正在为您报名中，请耐心等待，有疑问请联系020-87085982！'
					});
					return;
				}
				if (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;
				}


				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 == '继续教育') {
					this.$api.lockLockStatus({
						action: 'jxjy'
					}).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) {
					  			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}`);
						}
					})
				} else {
					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) {
								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: 367rpx;
				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;
			}
		}
	}

	.slot-content {
		padding: 0 20rpx;
	}
</style>