saas_miniprogram/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>
					一级建造师，距离考试还有
				</text>
				<u-count-down :timestamp="leftDays" :show-days="true" separator="zh" 
					:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="28"
					bg-color="#007AFF" separator-color="#fff" color="#fff" separator-size="28">
				</u-count-down>
			</view>
			<!-- 有学习的课程 -->
			<view v-if="allCourse" class="had_courses">
				<!-- 直播 -->
				<view v-if="livingLists.length" class="lives">
					<view v-for="(live, l_index) in livingLists" :key="l_index" class="live_item">
						<view class="live_con">
							<view class="live_status">
								<image v-if="bgShow(live.liveStartTime, live.watchStatus)" src="/static/learn/living.png" class="liv_icon"></image>
								<image v-else src="/static/learn/wlive.png" class="liv_icon"></image>
								<text class="status_s">{{ live.liveStartTime | liveStatus(live.watchStatus)}}</text>
								<view class="look_bt" 
									:class="{'living': lookTimeStatus(live.liveStartTime, live.watchStatus) == 1, 
											'futuring': lookTimeStatus(live.liveStartTime, live.watchStatus) == 4,
											'curring': [2,3].includes(lookTimeStatus(live.liveStartTime, live.watchStatus))}"
									>
									<text v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 1">点击观看</text>
									<text v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 2">即将开播</text>
									<template v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 3">
										剩余：
										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="false"
											color="#fff" separator-color="#fff" font-size="24" separator-size="24" bg-color="#FFB102">
										</u-count-down>
									</template>
									<template v-if="lookTimeStatus(live.liveStartTime, live.watchStatus) == 4">
										剩余：
										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="true" separator="zh"
											color="#fff" separator-color="#fff" bg-color="#007AFF"
											:show-hours="false" :show-minutes="false" :show-seconds="false" font-size="24" separator-size="24">
										</u-count-down>
										<u-count-down :timestamp="curTimeTamp(live.liveStartTime)" :show-days="false"
											color="#fff" separator-color="#fff" bg-color="#007AFF"
											font-size="24" separator-size="24">
										</u-count-down>
									</template>
								</view>
							</view>
							<view class="liv_time">
								<text class="timeR">{{ live.liveStartTime | formate('mm月dd日')}}</text>
								<text>{{ live.liveStartTime | formate('hh:mm')}}</text>
							</view>
							<view class="liv_title">{{ live.name }}</view>
						</view>
						<image v-if="bgShow(live.liveStartTime, live.watchStatus)" src="/static/learn/living_bg.png" class="my_bg"></image>
						<image v-else src="/static/learn/wlive_bg.png" class="my_bg"></image>
						
					</view>
				</view>

				<!-- 我的课程 -->
				<view v-if="courseLists.length" class="my_courses">
					<text class="titles">我的课程</text>

					<view v-for="(item, index) in courseLists" :key="index" class="course_item">
						<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="c_downs">
							<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 class="learn_progress">
									<view class="progress_up">
										<!-- <image src="/static/icon/wk_icon3.png" class="wk_icon"></image> -->
										<view>
											学习进度：{{ item.stuAllNum+item.recordNum }}/{{ item.secAllNum+item.examNum }}
										</view>
										<view class="progress_bar" style="width: 100%;">
											<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>
									<view class="progress_down">
										
										<view class="enter_into" @click.stop="studyIn(item.goodsId,item.gradeId,item,index)">进入学习</view>
									</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>

					<template v-if="questionLists.length">
						<view v-for="(item, indexq) in questionLists" :key="indexq" class="course_item">
							<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="c_downs">
								<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 class="learn_progress">
										<view class="progress_up">
											<!-- <image src="/static/icon/wk_icon3.png" class="wk_icon"></image>
											学习进度：{{item.doNum}}/{{item.totalNum}} -->
											<view>
												学习进度：{{item.doNum}}/{{item.totalNum}}
											</view>
											<view class="progress_bar" style="width: 100%;">
												<u-line-progress :show-percent="false" height="22" active-color="#007AFF" :percent="(item.doNum/item.totalNum)*100"></u-line-progress>
											</view>
										</view>
										<view class="progress_down">
											
											<view class="enter_into" @click="studyques(item,index)">进入练习</view>
										</view>

									</view>
								</view>
							</view>
							
						</view>
					</template>
					
				</view>
			</view>
			<!-- 没有学习的课程 -->
			<view v-if="!allLoading && !allCourse" 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>

		<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="showUserConfirmInfo" @confirm="confirmUserConfirm"  ref="uModal" :async-close="true" 
			@cancel="cancelUserConfirm" :confirm-text="'确认' + (confirmCount > 0 ? '('+confirmCount+')' : '')" 
			:confirm-color="confirmCount > 0 ? '#999' : '#2979ff'" class="confirm-modal" title="实名验证确认" 
			cancel="取消" :show-cancel-button="true">
			<view class="slot-content">
				<view class="content">
					为避免个人信息不正确导致您的学习时长无效，请认真核对以下信息是否正确，如信息有误请取消当前操作，立刻联系020-38946666
					
					<view class="msg-list">
						<view class="item">
							<text class="item__left">姓名：</text>
							<text class="item__right">{{userInfo.realname}}</text>
						</view>
						<view class="item">
							<text class="item__left">手机号：</text>
							<text class="item__right">{{userInfo.telphone}}</text>
						</view>
						<view class="item">
							<text class="item__left">身份号：</text>
							<text class="item__right">{{userInfo.idCard}}</text>
						</view>
						<view class="item">
							<u-checkbox v-model="confirmChecked" :label-disabled="false">确认个人信息无误</u-checkbox>
						</view>
					</view>
				</view>
				
			</view>
		</u-modal>
    </view>
</template>

<script>
var curTime = new Date().getTime() // 当前时间的时间戳
export default {
    data() {
        return {
			leftDays: 0,
			paramC: {
				pageNum: 1,
				pageSize: 50
			},
			activeItem: {},
			itemIndex: '',
			confirmTimer:null,
			confirmCount:10,
			confirmChecked:false,
			showUserConfirmInfo:false,
			selectItem: {},
			selectClassModal: false,
			gradeList: [],
			gradeValue: -1,
			sysTime: 0,
			courseLists: [], // 课程列表
			questionLists: [], // 题库列表
			paramQ: {
				pageNum: 1,
				pageSize: 50
			},
			queitemIndex:'',
			livingLists: [], // 直播列表
			allLoading: false, // 加载样式
        }
    },
	filters: {
		liveStatus(liveTime, watchStatus) {
			// let curTime = new Date().getTime() // 当前时间的时间戳
			let value = liveTime * 1000
			if (curTime < value) { // 判断当前时间和直播开始时间
				return ' 未开播'
			} else {
				return watchStatus == 'live' ? '正在直播中' : '即将开播'
			}
		}
	},
	computed: {
		allCourse() {
			return this.courseLists.length || this.questionLists.length || this.livingLists.length ? true : false
		}
	},
	onLoad() {
		// 1668873600 ，2022.11.20的时间戳
		this.leftDays = 1668873600 - parseInt(curTime/1000)
		this.getCourseLiveQues()
	},
	async onShow() {
		await this.commonSystemTime()
		this.sysTime = +this.$method.timest()
	},
	methods: {
		bgShow(liveTime, watchStatus) {
			let value = liveTime * 1000
			if (curTime > value) { // 判断当前时间和直播开始时间
				return watchStatus == 'live' ? true : false
			}
		},
		lookTimeStatus(liveTime, watchStatus) {
			if (liveTime) {
				let value = new Date(liveTime * 1000)
				var Y = value.getFullYear()
				var M = value.getMonth() + 1 < 10 ? '0' + (value.getMonth() + 1) : value.getMonth() + 1
				var D = value.getDate() < 10 ? '0' + value.getDate() : value.getDate()
				var valZ = Y + '/' + M + '/' + D
				let curZeroTime = new Date(valZ).getTime() // 获取开始直播时间当天的零点时间戳
				if (curTime > value) { // 判断当前时间和直播开始时间
					if (watchStatus == 'live') { // 
						return 1
					} else {
						return 2
					}
				} else {
					if (curZeroTime <= curTime && curTime <= value) { //当天
						return 3
					} else {
						return 4
					}
					
				}
			}
			
		},
		curTimeTamp(liveTime) {
			let min = liveTime - parseInt(curTime / 1000)
			return min
		},
		toChoose() {
			uni.switchTab({
				url:'/pages/course/index'
			})
		},
		// 查询直播课
		getCourseLiveQues() {
			this.allLoading = true
			let arrs = [
				this.$api.courseGoodsList(this.paramC), // 查询用户拥有的商品/课程列表/course/goodsList
				this.$api.listGoodsUserQuestion(this.paramQ), // 题库列表
				this.$api.getgoodsLiveList({
					pageNum: 1,
					pageSize: 3 // 默认3条
				})
			]
			Promise.all(arrs).then((res) => {
				// if (res.data.code == 200) {
					console.log('ewds========', res)
					const [{ data: res1}, { data: res2}, {data: res3}] = res
					if (res1.code == 200) {
						this.courseLists = res1.rows || []
					}
					if (res2.code == 200) {
						this.questionLists = res2.rows || []
					}
					if (res3.code == 200) {
						this.livingLists = res3.rows || []
					}
					this.allLoading = false
					console.log('this.courseLists;', this.courseLists, this.questionLists,this.livingLists)
				// }
			}).catch(err => {
				this.allLoading = false
				// this.$u.toast('请重新刷新请求')
			})
		},
		// 查询用户拥有的商品/课程列表/course/goodsList
		// 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) {
			console.log('item', item)
			this.activeItem = item
			if (item.interfaceAccountId > 0) { //学习账号已开通

				if (item.learnStatus == 1) { //跳转第三方h5
					uni.navigateTo({
						url: `/pages3/polyv/detail?goodsId=${item.goodsId}&orderGoodsId=${item.orderGoodsId}&isOther=1`
					})
					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;
			}

			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
			}

			// /course/goodsRebuildStatus查询用户商品重修状态
			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;
			}

				// /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) { // 课程数量
							// /course/courseList查询商品下的课程列表
							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)
				})
			})
		},
		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
			})
		},
		radioGroupChange(e) {
			console.log(e)
		},
		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
					})
				}
			})
		},
		/**
		 * 返回刷新之前进入的课程数据
		 */
		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])
				}
			});
		},
	}
}
</script>

<style>
page {
	background: #eaeef1;
}
</style>
<style lang="scss" scoped>
@import './index.scss';
</style>