zc_saas_h5/components/course/courseSection.vue

<template>
	<view style="display: flex;justify-content: space-between;align-items: center;" @click="getVideo">
		<view style="display: flex;justify-content: space-between; align-items: center;margin: 20rpx 0;width: 100%;">
			<view style="display: flex;align-items: center;flex:1;">
				<view class="tag tagColor1" v-if="menuItem.sectionType==1">视频</view>
				<view class="tag tagColor2" v-if="menuItem.sectionType==2">直播</view>
				<view class="tag tagColor3" v-if="menuItem.sectionType==3">回放</view>
				<view class="t_content">
					<view v-if="menuItem.sectionType==1" :class="playSectionId==newId && playNextId==playId?'color1':''">{{menuItem.name || ''}}</view>
					<view v-if="menuItem.sectionType==2" :class="playSectionId==newId && playNextId==playId?'color2':''">{{menuItem.name || ''}}</view>
					<view v-if="menuItem.sectionType==3" :class="playSectionId==newId && playNextId==playId?'color3':''">{{menuItem.name || ''}}</view>
					<view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.sectionType==2 && menuItem.liveStartTime">
						<view v-if="menuItem.liveStartTime>nowTime || !isBuy">
							<text>{{$method.timestampToTime(menuItem.liveStartTime, isDay =false)}}</text>-
							<text>{{$method.timestampToTime(menuItem.liveEndTime, isDay =false)}}</text>
						</view>
						<template v-if="isLast()">
							<view v-if="liveLast.watchStatus == 'live'">
								<text>直播中</text>
							</view>
							<view v-if="liveLast.watchStatus == 'end'">
								<text>当前直播回放视频请稍后再查看</text>
							</view>
						</template>
						<!-- <view v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
							<text>直播中</text>
						</view>
						<view v-if="menuItem.liveEndTime<nowTime">
							<text>回放</text>
						</view> -->
					</view>
					<view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.sectionType == 3">
						<view v-if="!menuItem.recordingUrl">
							<text>当前直播回放视频请稍后再查看</text>
						</view>
						<view v-else>
							回放中
						</view>
					</view>
				</view>
				<view v-if="menuItem.sectionType==null">{{menuItem.name || ''}}</view>
				<!-- 学习中 -->
				<view v-if="playSectionId==newId && playNextId==playId" class="learnings">
					<image src="/pages3/static/imgs/learning_icon.gif" class="learning_icon"></image>
					<text>学习中</text>
				</view>
			</view>
			<view style="font-size: 20rpx;color: #FF3B30;"  v-if="menuItem.liveStartTime && menuItem.sectionType != 3 && isBuy">
				
				<template v-if="!isLast() && !isLive">
					<view class="tagWillPlay" v-if="menuItem.liveStartTime>nowTime">
						<text>待开播</text>
					</view>
					<view class="tagPlaying" v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
						<text>直播中</text>
					</view>
					<view class="tagPlayed" v-if="menuItem.liveEndTime<nowTime">
						<text>已结束</text>
					</view>
				</template>
				
			</view>
			<!-- 直播课程没有学习状态 -->
			<template v-if="!isLive">
				<view v-if="(isRebuild||menuItem.rebuild>0)" class="tagRe">待重修</view>
				<view v-else>
					<view v-if="menuItem.learning==1" class="tagGreen">已学完</view>
				</view>
			</template>

			<view v-if="checkTest()" class="exercises" @click.stop="toDoSectionExam()">
				<text class="exe_w">习题</text>
				<u-icon name="arrow-right" color="#498AFE" size="28"></u-icon>
			</view>	
			
		</view>
		<view v-if="menuItem.tryListen&&!isBuy" class="tryBox">
			试看
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import {WEBVIEW_URL} from '@/common/request.js'
export default {
	name: 'courseSection',
	props: {
		isLive:false, //是否是直播课
		orderGoodsId:{
			default:0
		},
		preItem:{
			default:undefined,
		},
		learningOrder:{ //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
			type:Number,
			default:0
		},
		courseId: {
			type: Number,
			default: 0
		},
		goodsId: {
			type: Number,
			default: 0
		},
		menuItem: {
			type: Object,
			default: {}
		},
		isBuy: {
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		isRebuild: {
			type: Boolean,
			default: false
		},
		gradeId: {
			type: Number,
			default: 0
		},
		nextMenuItem: {
			type: Object,
			default: {}
		},
		sectionMaxNum:{
			default:undefined,
		},
		// 章->所有节试卷列表
		ChapterSectionExam: {
			type: Array,
			default: () => [],
		},
		// 区分是模块试卷还是章试卷，3是模块试卷
		testType: {
			type: Number,
			default: 0,
		},
		menuAllList: { // 课程所有子目录结构列表
			type: Array,
			default: () => []
		}
	},
	watch:{
		menuItem(val) {
			console.log(val,'val')
		}
	},
	data() {
		return {
			nowTime:0,
			newId:0,
			playId:'',
			clickLock:false, //点击锁，防止连续点击多次
			moduleSectionExam: [], // 模块下的所有节试卷列表
			chapterExams: {},
			moduleExams: {},
			// newMenuAllList: [],
		};
	},
	onLoad() {
	},
	created() {
		if (this.testType == 3) {
			// 模块下的所有节试卷列表
			this.$api.reSectionExamList({
				chapterId: 0,
				courseId: this.courseId,
				gradeId: this.gradeId
			}).then((res) => {
				if (res.data.code == 200) {
					this.moduleSectionExam = res.data.data || []
				}
			})
		}
	},
    mounted() {
		// console.log('节的播放---menuItem', this.menuItem, 'playSectionId:', this.playSectionId, 'isBuy:', this.isBuy)
		this.nowTime = Number(new  Date().getTime()/1000).toFixed(0)
		this.newId= this.menuItem.sectionId>0?this.menuItem.sectionId:this.menuItem.menuId
		let moduleId = this.menuItem.moduleId || 0;
		let chapterId = this.menuItem.chapterId || 0;
		let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
		let playNextId = `moduleId${moduleId}chapterId${chapterId}sectionId${sectionId}${this.isRebuild?'isRebuild':''}`;
		this.playId = playNextId;
		console.log('playNextId:', this.playNextId, 'playId:', this.playId);
		uni.$off('playNext'+playNextId) //绑定前先移除之前的事件
		uni.$once('playNext'+playNextId, async (data) => {
			//到时会触发每个节的监听事件，只允许当前节的接收
			let self = this
			if(this.nextMenuItem.recordingUrl&&this.isRebuild&&(this.newId==this.playSectionId) && data.fromRebuild){  // fromRebuild 来自重修目录的点击才弹出播放下一节
				//重修存在下一节
				uni.showModal({
				    title: '提示',
				    content: '是否播放下一节',
				    success: function (res) {
				        if (res.confirm) {
							let nextId= self.nextMenuItem.sectionId>0?self.nextMenuItem.sectionId:self.nextMenuItem.menuId
							//设置播放的节ID
							self.$store.commit('setPlaySectionId', {playSectionId  :nextId});
							self.$store.commit('setPlayVID', {playVID  :self.nextMenuItem.recordingUrl});
							let ids = self.levelId.split('-');
							ids[2] = nextId 
							uni.$emit('levelId', ids.join('-'))
							uni.$emit('getSection', self.nextMenuItem)
							self.$emit('playEnd',{isRebuild:self.isRebuild})
							
				        } else {
							let nextId= self.nextMenuItem.sectionId>0?self.nextMenuItem.sectionId:self.nextMenuItem.menuId
							//设置播放的节ID
							self.$store.commit('setPlaySectionId', {playSectionId  :nextId});
							self.$store.commit('setPlayVID', {playVID  :self.nextMenuItem.recordingUrl});
							let ids = self.levelId.split('-');
							ids[2] = nextId 
							self.$emit('playEnd',{isRebuild:self.isRebuild})
						}
				    }
				});
			} else {
				console.log('播放结束--节的');
				this.$emit('playEnd',{isRebuild:this.isRebuild})
			}
		});
		uni.$off('playNextSection') //绑定前先移除之前的事件
		// uni.$once('playNextSection', (data) => {
		// 	console.log('监听到播放结束的点:', data, this.menuAllList);
		// 	let nextItem = {}
		// 	if (data + 1 == this.menuAllList.length) {
		// 		this.$u.toast('已学完所有视频课程！')
		// 		return
		// 	} else {
		// 		nextItem = this.menuAllList[data + 1]
		// 	}
		// 	console.log('nextItem:', nextItem)
		// 	uni.showModal({
		// 		title: '温馨提示',
		// 		content: '当前节视频已学完，继续学习下一节？',
		// 		success: (res) => {
		// 			if (res.confirm) {
		// 				//设置播放的节ID
		// 				if(this.playSectionId>0){
		// 					console.log('切换视频1111', this.playSectionId);
		// 					//切换视频
		// 					uni.$emit('changeSection', this.playSectionId)
		// 				}
		// 				this.newId = nextItem.sectionId
		// 				this.playId = `moduleId${nextItem.moduleId || 0}chapterId${nextItem.chapterId || 0}sectionId${nextItem.sectionId || 0}`
		// 				this.$store.commit('setPlaySectionId', {playSectionId: nextItem.sectionId});
		// 				this.$store.commit('setPlayVID', {playVID: nextItem.recordingUrl}); // nextItem.recordingUrl
		// 				this.$store.commit('updatePlayNextId',this.playId)

		// 				console.log('====');
		// 				let ids = this.levelId.split('-');
		// 				ids[2] = nextItem.sectionId 
		// 				uni.$emit('levelId', ids.join('-'))
		// 				uni.$emit('getSection', nextItem)
		// 				this.$emit('playEnd',{isRebuild:this.isRebuild})
						
		// 			} else {
		// 				//设置播放的节ID
		// 				this.$store.commit('setPlaySectionId', {playSectionId: nextItem.sectionId});
		// 				this.$store.commit('setPlayVID', {playVID: nextItem.recordingUrl});
		// 				let ids = this.levelId.split('-');
		// 				ids[2] = nextItem.sectionId 
		// 				this.$emit('playEnd',{isRebuild:this.isRebuild})
		// 			}
		// 		}
		// 	});
		// })
	},
	methods: {
		isLast() {
			if(this.liveLast) {
				let sectionASame = this.liveLast.sectionId == (this.menuItem.sectionId || this.menuItem.menuId)
				let chapterSame = this.liveLast.chapterId == (this.menuItem.chapterId || 0)
				let moduleSame = this.liveLast.moduleId == (this.menuItem.moduleId || 0);
				return sectionASame && chapterSame && moduleSame
			} else {
				return false;
			}
			
		},
		toDoSectionExam() {
			// this.$emit('togoBack', 1)
			if (this.testType == 3) {
				this.ModuleExam()
			} else {
				this.ChapterExam()
			}
		},
		checkTest() {
			let data = this.testType == 3 ? this.moduleSectionExam : this.ChapterSectionExam
			let id = this.testType == 3 ? this.menuItem.menuId : this.menuItem.sectionId
			if (!data) {
				return false
			}
			return data.some((e) => e.sectionId == id)
		},
		ChapterExam() {
			this.chapterExams = this.ChapterSectionExam.find((e) => e.sectionId == this.menuItem.sectionId)
			let moduleId = this.chapterExams.moduleId || 0
			let chapterId = this.chapterExams.chapterId || 0
			let sectionId = this.chapterExams.sectionId || this.chapterExams.menuId
			uni.navigateTo({
              url:"/pages2/class/questionBank?courseId=" + this.courseId + "&gradeId=" + this.gradeId + "&isFromVideo=1&id=" + this.chapterExams.typeId +
                "&goodsid=" + this.goodsId + "&moduleId=" + moduleId + "&chapterId=" + chapterId + "&sectionId=" + sectionId + "&orderGoodsId=" +
				this.orderGoodsId + "&type=2",
            });
		},
		ModuleExam() {
			let sectionId = this.menuItem.sectionId || this.menuItem.menuId
			this.moduleExams = this.moduleSectionExam.find((e) => e.sectionId == sectionId)
			let moduleId = this.moduleExams.moduleId || 0
			let chapterId = this.moduleExams.chapterId || 0
			
			uni.navigateTo({
				url:"/pages2/class/questionBank?courseId=" + this.courseId + "&gradeId=" + this.gradeId + "&isFromVideo=1&id=" + this.moduleExams.typeId +
                "&goodsid=" + this.goodsId + "&moduleId=" + moduleId + "&chapterId=" + chapterId + "&sectionId=" + sectionId + "&orderGoodsId=" +
				this.orderGoodsId + "&type=2",
            });
		},
		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)
					}
				})
			})
		},
		gradeCheckGoodsStudy() {
			return new Promise(resolve => {
				this.$api.gradeCheckGoodsStudy({
					goodsId:this.goodsId,
					gradeId:this.gradeId,
					moduleId:this.menuItem.moduleId || 0,
					chapterId:this.menuItem.chapterId || 0,
					sectionId:this.menuItem.sectionId || this.menuItem.menuId
				}).then( res => {
					resolve(res.data.data)
				})
			})
		},
		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)
					}
				})
			})
		},
		getVideo(){
			console.log('this.this.newMenuAllList:', this.menuAllList);
			if(this.clickLock) {
				return;
			}

			this.clickLock = true;
			
			if(this.learningOrder == 2 && !this.menuItem.isRebuild && !this.isLive) { //要按从头到尾顺序学习, 且不是重修课程
				if(this.preItem) {
					// let rows = await this.studyRecordMenuAllList();
					let rows = this.menuAllList
					let newRows = [];
					for(let i = 0; i < rows.length; i++ ) {
						let moduleTrue = rows[i].moduleId == this.menuItem.moduleId || rows[i].moduleId == 0
						let chapterTrue = rows[i].chapterId == this.menuItem.chapterId || rows[i].chapterId == 0;
						let sectionTrue = (rows[i].sectionId == this.menuItem.sectionId) || (rows[i].sectionId ==  this.menuItem.menuId);
						if(moduleTrue && chapterTrue && sectionTrue) {
							break;
						} else {
							if(rows[i].sectionType != 2) {
								newRows.push(rows[i])
							}
							
						}
					}
					let isAllLearn = newRows.every(item => {
						return item.studyStatus == 1;
					})
					console.log('isAllLearn:', isAllLearn);
					if(isAllLearn) {
						this.playVideo();
					} else {
						uni.showToast({
							icon:'none',
							title:'请按顺序学习视频课程'
						})
					}
					
				} else { //第一章第一节
					this.playVideo();
				}
			} else { 
				this.playVideo();
			}
			
			
			setTimeout(() => {
				this.clickLock = false;
			},3000)
			
		},
		studyRecordGetChannelBasicInfo(channelId) {
			return new Promise((resolve) => {
				this.$api
					.studyRecordGetChannelBasicInfo({
						channelId,
					})
					.then((res) => {
						resolve(res.data.data);
					});
			});
		},
		async playVideo() {
			if(this.menuItem.sectionType==1 || this.menuItem.sectionType == 3){
				//1视频 3回放
				if(!this.isBuy){
					//非购买
					if(!this.menuItem.tryListen){
						//不允许试听
						this.clickLock = false;
						return
					} else {
						this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
						this.$store.commit('setPlayVID', {playVID  :this.menuItem.recordingUrl});
						this.menuItem.courseId = this.courseId;
						uni.$emit('getSection', this.menuItem)
						return;
					}
					
				}
				
				let learnNum = await this.goodsTodayStudySectionNum()
				let hasLearn = await this.gradeCheckGoodsStudy();
				
				if(this.sectionMaxNum > 0) {
					if(learnNum >= this.sectionMaxNum && !hasLearn) {
						uni.showToast({
							icon:'none',
							title:`每天最多学习${this.sectionMaxNum}节`
						})
						this.clickLock = false;
						return;
					}
				}
				if(!this.menuItem.recordingUrl){
					uni.showToast({
						title: '暂无播放地址数据',
						icon: 'none'
					});
					this.clickLock = false;
					return;
				}
				/* if(this.playSectionId==this.newId){
					//切换为同一节
					return
				} */
				// 回放
				if (this.menuItem.sectionType == 3) {
					let moduleId = this.menuItem.moduleId || 0;
					let chapterId = this.menuItem.chapterId || 0;
					let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
					let uuid = new Date().valueOf() + ""
					// buyCourse 是否购买课程：1是 0否,type=vod是回放
					let encode = encodeURIComponent(WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+
					'&channelId='+this.menuItem.liveUrl+'&gradeId='+this.gradeId+'&courseId='+this.courseId+'&goodsId='+this.goodsId+'&orderGoodsId='+this.orderGoodsId+
					'&sectionId='+sectionId+'&chapterId='+chapterId+'&moduleId='+moduleId+'&buyCourse=1'+'&ident='+uuid+'&sectionType=3'+'&vid='+this.menuItem.recordingUrl)
					uni.navigateTo({
						url:`../../pages/webview/index?url=`+encode
					})
					return
				}
				if(this.playSectionId>0){
					//切换视频
					let oldSectionId = this.playSectionId
					uni.$emit('changeSection', oldSectionId)
				}
				// console.log('===设置播放的节IDthis.menuItem,', this.menuItem, this.playId);
				//设置播放的节ID
				this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
				this.$store.commit('setPlayVID', {playVID  :this.menuItem.recordingUrl});
				this.$store.commit('updatePlayNextId',this.playId)
				uni.$emit('levelId', this.levelId)
				uni.$emit('getSection', this.menuItem)
				uni.$emit('isRebuild',this.isRebuild)
			}
			if(this.menuItem.sectionType==2){
				//直播
				if(!this.isBuy){
					//非购买
					this.clickLock = false;
					return
				}
				
				let learnNum = await this.goodsTodayStudySectionNum()
				let hasLearn = await this.gradeCheckGoodsStudy();
				
				if(this.sectionMaxNum > 0 && !this.isLive) {
					if(learnNum >= this.sectionMaxNum && !hasLearn) {
						uni.showToast({
							icon:'none',
							title:`每天最多学习${this.sectionMaxNum}节`
						})
						this.clickLock = false;
						return;
					}
				}
				if(!this.menuItem.liveUrl){
					uni.showToast({
						title: '暂无直播地址数据',
						icon: 'error'
					});
					return;
				}
				
				let data = await this.studyRecordGetChannelBasicInfo(this.menuItem.liveUrl);
				let nowTime = +this.$method.timest();
				
				if (this.menuItem.liveStartTime > nowTime) {
					if (data.watchStatus == "end" || data.watchStatus == "playback") {
						this.clickLock = false;
						uni.showToast({
							title: '直播未开始',
							icon: 'none'
						});
						return;
					}
				} else if (
					this.menuItem.liveStartTime < nowTime &&
					this.menuItem.liveEndTime > nowTime
				) {
					if (data.watchStatus == "end" || data.watchStatus == "playback") {
						this.clickLock = false;
						uni.showToast({
							title: '暂无直播',
							icon: 'none'
						});
						return;
					}
				} else if (this.menuItem.liveEndTime < nowTime) {
					if (!data) {
						uni.showToast({
							title: '直播已结束',
							icon: 'none'
						});
						return;
					}
					if (data.watchStatus == "end" || data.watchStatus == "playback") {
						this.clickLock = false;
						uni.showToast({
							title: '直播已结束',
							icon: 'none'
						});
						return;
					}
				}
				let moduleId = this.menuItem.moduleId || 0;
				let chapterId = this.menuItem.chapterId || 0;
				let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
				let uuid = new Date().valueOf() + ""
         		 // buyCourse 是否购买课程：1是 0否
				let encode = encodeURIComponent(WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+
				'&channelId='+this.menuItem.liveUrl+'&gradeId='+this.gradeId+'&courseId='+this.courseId+'&goodsId='+this.goodsId+'&orderGoodsId='+this.orderGoodsId+
				'&sectionId='+sectionId+'&chapterId='+chapterId+'&moduleId='+moduleId+'&buyCourse=1'+'&ident='+uuid+'&sectionType=2')
				uni.navigateTo({
					url:`../../pages/webview/index?url=`+encode
				})
				
				return;
			}
			
		}
	},
	computed: { ...mapGetters(['playSectionId','playChannelId','playVID','playNextId','userInfo','liveLast']) }
	
};
</script>

<style scoped lang="scss">
	.tagGreen{
		width: 80rpx;
		height: 28rpx;
		background: #34C759;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tagWillPlay{
		width: 80rpx;
		height: 28rpx;
		background: #EBF4FF;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #007AFF;
		text-align: center;
	}
	.tagPlaying{
		width: 80rpx;
		height: 28rpx;
		background: #FFF7EB;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FF9500;
		text-align: center;
	}
	.tagPlayed{
		width: 80rpx;
		height: 28rpx;
		background: #EEEEEE;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #666666;
		text-align: center;
	}
	.tagRe{
		width: 80rpx;
		height: 28rpx;
		background: #FF3B30;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tryBox{
		width: 103rpx;
		height: 48rpx;
		background: #fff;
		border-radius: 24rpx;
		color: #3577E8;
		font-size: 24rpx;
		line-height: 48rpx;
		text-align: center;
		border: 1rpx solid #3577E8;
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
	.t_content3{
		color: #007AFF;
	}
	.t_content2{
		color: #007AFF;
	}
	.t_content1{
		color: #007AFF;
	}
	.t_content{
		font-size: 30rpx;
		margin-left: 10rpx;
		color: #666666;
		flex:1;
	}
	.tagColor3{
		border: 2rpx solid #FF9500;
		color: #FF9500;
	}
	.tagColor2{
		border: 2rpx solid #FF3B30;
		color: #FF3B30;
	}
	.tagColor1{
		border: 2rpx solid #007AFF;
		color: #007AFF;
	}
	.color3{
		color: #FF9500;
	}
	.color2{
		color: #FF3B30;
	}
	.color1{
		color: #007AFF;
	}
	.tag{
		border-radius: 8rpx;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
	}
	.exercises {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #498AFE;
		>text {
			margin-right: 6rpx;
		}
	}
	.learnings {
		font-size: 24rpx;
		color: #0A7DDA;
		display: flex;
		align-items: center;
		margin-right: 8rpx;
		.learning_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 4rpx;
		}
	}
</style>