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;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?'color1':''">{{menuItem.name}}</view>
					<view v-if="menuItem.sectionType==2" :class="playSectionId==newId?'color2':''">{{menuItem.name}}</view>
					<view v-if="menuItem.sectionType==3" :class="playSectionId==newId?'color3':''">{{menuItem.name}}</view>
					<view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.sectionType==2 && menuItem.liveStartTime">
						<view v-if="menuItem.liveStartTime>nowTime">
							<text>{{$method.timestampToTime(menuItem.liveStartTime, isDay =false)}}</text>-
							<text>{{$method.timestampToTime(menuItem.liveEndTime, isDay =false).substr(11,9)}}</text>
						</view>
						<!-- <view v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
							<text>直播中</text>
						</view>
						<view v-if="menuItem.liveEndTime<nowTime">
							<text>回放</text>
						</view> -->
					</view>
				</view>
				<view v-if="menuItem.sectionType==null">{{menuItem.name}}</view>
			</view>
			<view style="font-size: 20rpx;color: #FF3B30;"  v-if="menuItem.liveStartTime && menuItem.sectionType != 3">
				<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>
			</view>
			<view v-if="(isRebuild||menuItem.rebuild>0)" class="tagRe">待重修</view>
			<view v-else>
				<view v-if="menuItem.learning==1" class="tagGreen">已看完</view>
			</view>
			
		</view>
		<view v-if="menuItem.tryListen&&!isBuy" class="tryBox">
			试看
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import eventHub from '@/common/eventHub.js'
export default {
	name: 'courseSection',
	props: {
		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: {}
		},
	},
	watch:{
		menuItem(val) {
			console.log(val,'val')
		}
	},
	data() {
		return {
			nowTime:0,
			newId:0,
			clickLock:false, //点击锁，防止连续点击多次
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
		this.nowTime = Number(new  Date().getTime()/1000).toFixed(0)
		this.newId= this.menuItem.sectionId>0?this.menuItem.sectionId:this.menuItem.menuId
		console.log(this.isRebuild)
		console.log(this.nextMenuItem,'nextMenuItem')
		console.log(this.menuItem,'this.menuItem')
		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':''}`;
		uni.$off('playNext'+playNextId) //绑定前先移除之前的事件
		uni.$once('playNext'+playNextId, (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) {
				            console.log('用户点击确定');
							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})
							// uni.$off('playend')
							// uni.$on('playend',res => {
							// 	console.log('playend2')
							// 	this.$emit('playEnd',{isRebuild:this.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 {
				this.$emit('playEnd',{isRebuild:this.isRebuild})
			}
		});
	},
	methods: {
		getVideo(){
			if(this.clickLock) {
				return;
			}
			this.clickLock = true;
			console.log(this.learningOrder,'this.learningOrder')
			console.log(this.preItem,'this.preItem')
			if(this.learningOrder == 2 && !this.isRebuild) { //要按从头到尾顺序学习, 且不是重修课程
				if(this.preItem) {
					if(this.preItem.menuType == 3) { //上一个是节
						if(this.preItem.learning == 1) { //上一节学完
							this.playVideo();
						} else {
							uni.showToast({
								icon:'none',
								title:'请按顺序学习视频课程'
							})
						}
					} else if(this.preItem.menuType == 2) { //上一个是章
						this.$api.reSectionList({chapterId: this.preItem.menuId || this.preItem.chapterId,gradeId:this.gradeId,courseId:this.courseId,moduleId:this.preItem.moduleId || 0}).then(res => {
							if(res.data.code==200){
								let lastItem = res.data.data[res.data.data.length -1];
								if(lastItem.learning == 1) {
									this.playVideo();
								} else {
									uni.showToast({
										icon:'none',
										title:'请按顺序学习视频课程'
									})
								}
							}
						});
					} else if(this.preItem.menuType == 1) { //上一个是模块
						this.$api.reChapterList({moduleId:this.preItem.menuId,gradeId:this.gradeId,courseId:this.courseId}).then(res => {
							if(res.data.code==200){
								let lastChapterItem = res.data.data[res.data.data.length -1];
								
								this.$api.reSectionList({chapterId:lastChapterItem.chapterId,gradeId:this.gradeId,courseId:this.courseId,moduleId:this.menuItem.menuId || this.menuItem.moduleId}).then(res => {
									if(res.data.code==200){
										let lastSectionItem = res.data.data[res.data.data.length -1];
										if(lastSectionItem.learning == 1) {
											this.playVideo();
										} else {
											uni.showToast({
												icon:'none',
												title:'请按顺序学习视频课程'
											})
										}
									}
								});
							}
						});
					} 
				} else { //第一章第一节
					this.playVideo();
				}
			} else { 
				this.playVideo();
			}
			
			
			setTimeout(() => {
				this.clickLock = false;
			},3000)
			
		},
		playVideo() {
			if(this.menuItem.sectionType==1||this.menuItem.sectionType==3){
				//录播
				if(!this.isBuy){
					//非购买
					if(!this.menuItem.tryListen){
						//不允许试听
						this.clickLock = false;
						return
					}
					
				}
				if(!this.menuItem.recordingUrl){
					uni.showToast({
						title: '暂无播放地址数据',
						icon: 'error'
					});
					this.clickLock = false;
					return;
				}
				/* if(this.playSectionId==this.newId){
					//切换为同一节
					return
				} */
				if(this.playSectionId>0){
					//切换视频
					let oldSectionId = this.playSectionId
					uni.$emit('changeSection', oldSectionId)
				}
				//设置播放的节ID
				this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
				this.$store.commit('setPlayVID', {playVID  :this.menuItem.recordingUrl});
				uni.$emit('levelId', this.levelId)
				uni.$emit('getSection', this.menuItem)
				uni.$emit('isRebuild',this.isRebuild)
				console.log(this.menuItem,'menuItem')
				// uni.$off('playend')
				// uni.$on('playend',res => {
				// 	console.log('playend2')
				// 	this.$emit('playEnd',{isRebuild:this.isRebuild})
				// })
				console.log(999)
			}
			if(this.menuItem.sectionType==2){
				//直播
				if(!this.isBuy){
					//非购买
					this.clickLock = false;
					return
				}
				if(!this.menuItem.liveUrl){
					uni.showToast({
						title: '暂无直播地址数据',
						icon: 'error'
					});
				}
				if(this.playSectionId==this.newId){
					//切换为同一频道
					this.clickLock = false;
					return
				}
				//设置播放的节ID
				this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
				this.$store.commit('setPlayChannelId', {playChannelId  :this.menuItem.liveUrl});
				uni.$emit('levelId', this.levelId)
				uni.$emit('getChannel', this.menuItem)
				uni.$emit('isRebuild',this.isRebuild)
				console.log(this.menuItem,'menuItem')
				// uni.$off('playend')
				// uni.$on('playend',res => {
				// 	console.log('playend1')
				// 	this.$emit('playEnd',{isRebuild:this.isRebuild})
				// })
				console.log(888)
			
			}
		}
	},
	computed: { ...mapGetters(['playSectionId','playChannelId','playVID']) }
	
};
</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: 96rpx;
		height: 48rpx;
		background: #007AFF;
		border-radius: 24rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 48rpx;
		text-align: center;
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
	.t_content3{
		color: #007AFF;
	}
	.t_content2{
		color: #007AFF;
	}
	.t_content1{
		color: #007AFF;
	}
	.t_content{
		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: 5rpx;
	}
</style>