zc_saas_h5/components/course/courseChapter.vue

<template>
	<view style="margin: 20rpx 0;">
		<view class="title" @click="openChapter(menuItem)">
		<image src="/static/icon/up1.png" class="icon_up" v-if="down"></image>
		<image src="/static/icon/down1.png" class="icon_up" v-if="!down"></image>
		<text style="margin-left: 30rpx;">{{menuItem.name}}</text>
		</view>
		<view v-show="!down">
			<view v-for="(itemM,indexM) in list" :key="indexM">
				<view v-if="itemM.type!=2">
					<courseSection :sectionMaxNum="sectionMaxNum" :preItem="list[indexM-1] || preItem" :learningOrder="learningOrder" :courseId="courseId" @playEnd="refreshList($event)" :goodsId="goodsId" :isBuy="isBuy" :nextMenuItem="findNextSection(indexM)" :isRebuild="isRebuild" :gradeId="gradeId" :menuItem="itemM" :levelId="levelId+'-'+itemM.sectionId"></courseSection>
					<u-line v-if="indexM<list.length-1"></u-line>
				</view>
				<view v-if="itemM.type==2">
					<u-line ></u-line>
					<view class="examBox"  @click="toDo(itemM.typeId,goodsId,itemM.moduleId,itemM.chapterId,itemM,indexM)">
						<view class="exam">
							<view class="eTag">{{itemM.doType==1?'练习':'考试'}}</view>
							<view style="margin-left: 15rpx;">{{itemM.name}}</view>
						</view>
						<view v-if="isRebuild||itemM.rebuild>0" class="tagRe">待重修</view>
						<view v-else>
							<view :class="{tagGreen:itemM.learning == 1,tagRe:itemM.learning == 0 || itemM.rebuild>0}">
								<text v-if="itemM.rebuild > 0">待重测</text>
								<text v-else-if="itemM.learning == 1">合格</text>
								<text v-else-if="itemM.learning == 0">不合格</text>
							
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapGetters,mapMutations } from 'vuex';
import courseSection from '@/components/course/courseSection.vue';
export default {
	name: 'courseChapter',
	props: {
		preItem:{
			default:undefined
		},
		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
			type:Number,
			default:0
		},
		needOpen:{ //是否默认展开
			type:Boolean,
			default:false,
		},
		menuItem: {
			type: Object,
			default: {}
		},
		isBuy: {
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		goodsId: {
			type: Number,
			default: 0
		},
		courseId: {
			type: Number,
			default: 0
		},
		isRebuild: {
			type: Boolean,
			default: false
		},
		gradeId: {
			type: Number,
			default: 0
		},
		sectionMaxNum:{
			default:undefined
		}
	},
	components: {
		courseSection
	},
	data() {
		return {
			down:true,
			list:[],
			examList:{},
			canLearn:false, //是否全部视频看完才可以练习、测试
		};
	},
	onLoad() {},
	created() {
	},
	mounted() {
		if(this.needOpen && this.chapterOpen) {
			this.updateChapterOpen(false)
			this.openChapter(this.menuItem)
		}
	},
	onPageShow() {
		if(this.isBuy) {
			this.refreshList({isRebuild:this.isRebuild});
		}
		
	},
	methods: {
		 ...mapMutations(['updateChapterOpen']),
		 goodsTodayStudySectionNum() {
		 	return new Promise(resolve => {
		 		this.$api.goodsTodayStudySectionNum({goodsId:this.goodsId,gradeId:this.gradeId}).then(res => {
		 			if(res.data.code == 200) {
		 				resolve(res.data.data)
		 			}
		 		})
		 	})
		 },
		refreshList(isRebuild) {
			console.log(9999)
			let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
			if(this.isRebuild){
				this.getReSectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
			}else{
				this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
//				this.getMenuExamList(item.id,item.courseId,moduleId)
			}
			
			
			this.$emit('playEnd',{isRebuild:isRebuild.isRebuild})
			console.log(10000)
			// let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
			// this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
		},
		findNextSection(index){
			for(let i=index+1;i<this.list.length;i++){
				return this.list[i];
			}
			return {}
		},
		studyRecordMenuAllList() {
			return new Promise(resolve => {
				
				this.$api.studyRecordMenuAllList({
					courseId:this.courseId,
					gradeId:this.gradeId,
					goodsId:this.goodsId
				}).then(res => {
					if(res.data.code == 200) {
						resolve(res.data.data)
					}
				})
			})
		},
		/**
		 * 去做题
		 */
		async toDo(id,goodsId =0,moduleId = 0, chapterId = 0,item,index) {
			
			// let learnNum = await this.goodsTodayStudySectionNum()
			
			// if(this.sectionMaxNum > 0) {
			// 	if(learnNum >= this.sectionMaxNum) {
			// 		uni.showToast({
			// 			icon:'none',
			// 			title:`每天最多学习${this.sectionMaxNum}节`
			// 		})
			// 		return;
			// 	}
			// }
			console.log(this.learningOrder,'this.learningOrder')
			if(this.learningOrder == 1) {
				if(this.canLearn) {
					
					let num = await this.bankRecordDoNum(item.typeId)
					//有次数限制
					if(item.answerNum - num > 0 && item.answerNum > 0) {
						// this.$set(this.list[index],'doNum',(item.doNum+1))
						console.log(this.list[index])
						uni.navigateTo({
							url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
						})
					//没有答题次数限制
					} else if(item.answerNum == 0) {
						uni.navigateTo({
							url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
						}) 
					} else {
						uni.showToast({
							icon:'none',
							title:'该试卷只能答题'+item.answerNum+'次'
						})
						
						return;
					}
				} else {
					uni.showToast({
						icon:'none',
						title:'请按顺序学完视频课程再进行练习和测试'
					})
				}
			} else if(this.learningOrder == 2 && !item.rebuild) {
				let canLearn = this.list[index-1].learning == 1; 
				let rows = await this.studyRecordMenuAllList();
				let isStop = false;
				let newRows = [];
				for(let i = 0; i < rows.length; i++ ) {
					let moduleTrue = rows[i].moduleId == moduleId;
					let chapterTrue = rows[i].chapterId == chapterId;
					if(moduleTrue && chapterTrue) {
						isStop = true;
						if(rows[i].sectionType != 2) {
							newRows.push(rows[i])
						}
					} else {
						if(!isStop) {
							if(rows[i].sectionType != 2) {
								newRows.push(rows[i])
							}
							
						} else {
							break;
						}
						
					}
				}
				console.log(newRows)
				let isAllLearn = newRows.every(item => {
					return item.studyStatus == 1;
				})
				
				if(isAllLearn) { //之前的都学完了
					
				// if(canLearn) { //视频的上一节学完
					
					let num = await this.bankRecordDoNum(item.typeId)
					//有次数限制
					if(item.answerNum - num > 0 && item.answerNum > 0) {
						// this.$set(this.list[index],'doNum',(item.doNum+1))
						console.log(this.list[index])
						uni.navigateTo({
							url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
						})
					//没有答题次数限制
					} else if(item.answerNum == 0) {
						uni.navigateTo({
							url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
						}) 
					} else {
						uni.showToast({
							icon:'none',
							title:'该试卷只能答题'+item.answerNum+'次'
						})
						
						return;
					}
				} else {
					uni.showToast({
						icon:'none',
						title:'请学完视频课程再进行练习和测试'
					})
				}
			} else {
				let num = await this.bankRecordDoNum(item.typeId)
				//有次数限制
				if(item.answerNum - item.doNum > 0 && item.answerNum > 0) {
					// this.$set(this.list[index],'doNum',(item.doNum+1))
					console.log(this.list[index])
					uni.navigateTo({
						url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
					})
				//没有答题次数限制
				} else if(item.answerNum == 0) {
						uni.navigateTo({
							url:'/pages2/class/questionBank?courseId='+this.courseId+'&gradeId='+this.gradeId+'&isFromVideo=1&id='+id+'&goodsid='+goodsId+'&moduleId='+moduleId+'&chapterId='+chapterId+''
						})
				} else {
					uni.showToast({
						icon:'none',
						title:'该试卷只能答题'+item.answerNum+'次'
					})
					
					return;
				}
			}
			
		},
		bankRecordDoNum(examId) {
			return new Promise(resolve => {
				this.$api.bankRecordDoNum({
					goodsId:this.goodsId,
					gradeId:this.gradeId,
					chapterId:this.menuItem.id,
					courseId:this.courseId,
					moduleId:0,
					examId:examId,
				}).then(res => {
					resolve(res.data.data)
				})
			})
		},
		openChapter(item){
			console.log(this.menuItem)
			this.down = !this.down
			if(!this.down&&this.list.length==0){
				console.log(item.id,69)
				if(this.isBuy){
					let moduleId = item.moduleId?item.moduleId:0
					if(this.isRebuild){
						this.getReSectionList(item.id,item.courseId,moduleId)
					}else{
						this.getBuySectionList(item.id,item.courseId,moduleId)
		//				this.getMenuExamList(item.id,item.courseId,moduleId)
					}
				}else{
					this.getSectionList(item.id)
				}
				
			}
		},
		getMenuExamList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.menuExamList({chapterId:chapterId,courseId:courseId,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					self.examList = res.data.rows
				}
			});
		},
		getSectionList(chapterId) {
			let self = this
			this.$api.sectionList(chapterId).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						item.menuType = 3;
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					
					let newArr = res.data.data.filter(item => {
						console.log(item)
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
		getReSectionList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,rebuild:1,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						item.menuType = 3;
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					let newArr = res.data.data.filter(item => {
						console.log(item)
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
		getBuySectionList(chapterId,courseId,moduleId) {
			let self = this
			this.$api.reSectionList({chapterId:chapterId,gradeId:this.gradeId,courseId:courseId,moduleId:moduleId}).then(res => {
				if(res.data.code==200){
					for(let i=0;i<res.data.data.length;i++){
						let item = res.data.data[i]
						item.id = item.sectionId
						item.menuType = 3;
						//判断是否试听
						item.tryListen = false
						if(self.goodsAuditionConfigIdList.indexOf(item.id)!==-1){
							item.tryListen = true
						}	
					}
					let newArr = res.data.data.filter(item => {
						return item.type != 2;
					})
					this.canLearn = newArr.every(item => {
						console.log(item)
						if(item.learning == 1) {
							return true;
						} else {
							return false;
						}
					})
					self.list = res.data.data
				}
			});
		},
	},computed: { ...mapGetters(['goodsAuditionConfigIdList','chapterOpen']) },
};
</script>

<style scoped>

	.tagRe{
		width: 80rpx;
		height: 28rpx;
		background: #FF3B30;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tagGreen{
		width: 80rpx;
		height: 28rpx;
		background: #34C759;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.eTag{
		width: 56rpx;
		height: 28rpx;
		background: #007AFF;
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.examBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.exam{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
.title{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; 
	margin-bottom:30rpx;
}
</style>