baiyuApp/pages/course/catalogue.vue

<template>
	<view class="content">
		
		<es-nav-bg title="课程目录"></es-nav-bg>

<!-- 		<view class="es-view-w-x es-mt-10">
			<view class="banner es-icon-auto es-br-20">
				<image :src="data.imgUrl"></image>
			</view>
		</view> -->
		
		
		<view class="video es-mt-10 es-ml-20 es-mr-20 es-mb-10 es-br-10">
			<video ref="myVideo" id="myVideo"  :src="pickCatalog.videoUrl"
			 @error="videoErrorCallback"  :enable-progress-gesture="data.isFast==1"  :enable-danmu="false" :danmu-btn="false" :danmu-list="danmuList" :initial-time="studyTimes"  
			 :poster="poster" objectFit="contain" :show-progress="data.isFast==1" :title="pickCatalog.courseName" :controls="true" :show-fullscreen-btn="true"  @controlstoggle="toggleBarChange" 
			 @timeupdate="onTimeUpdate" @fullscreenchange="onFullscreenChange" @loadedmetadata="onLoadedMetadata" >
			 </video>
			 
			 <!-- #ifdef APP-PLUS -->
			 <cover-image src="/static/images/other/yuan-1.png" class="video-1"></cover-image>
			 <cover-image src="/static/images/other/yuan-2.png" class="video-2"></cover-image>
			 <cover-image src="/static/images/other/yuan-3.png" class="video-3"></cover-image>
			 <cover-image src="/static/images/other/yuan-4.png" class="video-4"></cover-image>
			 <!-- #endif -->
		</view>
		
		<view class="es-bc-white es-br-20" style="margin-top: -194rpx;min-height: 300rpx;">
			<view class="es-h-194"></view>
			<view class="es-view-w-x es-mt-25">
				<view class="es es-ac">
					<view class="es-icon es-w-35 es-h-31 es-icon-course-icon-6"></view>
					<view class="es-ml-20 es-fs-30 es-fw-600 es-f1">目录<text
							class="es-ml-1 es-fs-24 es-c-99">（{{catalogueList.length}}）</text></view>
					<!-- <view class="es-icon-25 es-icon-course-close"></view> -->
				</view>

				<view class="es-f1 es-bc-fa es-h-70 es-br es es-ac es-mt-30">
					<view class="es-icon-26 es-ml-27 es-icon-search-search"></view>
					<view class="es-f1 es-ipt es-bc-white">
						<input v-model="searchText"  placeholder="请输入关键字搜索" class="es-fs-24" placeholder-class="es-c-b4" />
					</view>
					<view @tap="search()" class="es-w-108 es-h-58 es-br es-bc es-mr-7  es es-ac es-pc es-fw-500 es-fs-26 es-on-act">搜索
					</view>
				</view>

				<!-- 下面是目录列表 -->
				<view v-for="(item, index) in catalogueList"  :key="index" @click="pickCatalogAction(index)" 
					style="min-height: 100rpx;box-sizing: border-box;padding: 20rpx;"
					class="es-mt-20 es es-ac es-icon-auto es-view-w-x"
				  :class="index==pickCatalogIdx?'es-icon-course-cate-bg1 es-c':'es-icon-course-cate-bg2'">
					<view class="es-f1">
						<view class="es es-ac es-fs-28 es-fw-600">
							<text>第{{item.courseSort}}讲</text>
							<view class="es-w-60 es-h-31 es-ml-10 es-icon-course-play-loading es-icon" v-if="index==pickCatalogIdx"></view>
						</view>
						<view class="es-fs-22 es-mt-4">{{item.title}}</view>
					</view>
					<view
						:class="item.courseSort>2 && canShowVip(item) ? 'freeflag freeflag-member':'freeflag freeflag-free'">
						<text class="es-fs-22 es-fw-500" style="color: #fff;">
							{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '免费'}}
						</text>
					</view>
					<!-- <view class="vip es-icon-auto es-icon-course-cate-bg3 es-w-87 es-h-42 es es-ac es-fs-22 es es-ac es-pc" v-if="index!=pickCatalogIdx">
						<view class="es-icon-22 es-icon-course-cate-vip"></view>
						<text class="es-ml-4 es-fs-22">{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '免费'}}</text>
					</view> -->
				</view>
			</view>
	
		</view>
		<!-- #ifndef APP-PLUS -->
		<adMask :show="tipShow">
			<!-- 逐集观看提示弹窗 -->
			<view class="tipspop">
				<view class="jianyi_icon_box">
					<image class="jianyi_icon" src="@/static/images/ad/jianyi_icon.png" mode="aspectFill"></image>
				</view>
				<view class="tc_bg">
					<image src="@/static/images/ad/tc_bg.png" mode="widthFix" style="width: 100%;height: auto;"></image>
				</view>
				<view class="tipspop-con">
					<view class="tipspop-title">建议逐集观看，学习效果更佳</view>
					<view>是否返回逐集观看？</view>
				</view>
				<view class="tipspop-footer">
					<view class="tipspop-footer-l" @click="tipCancel">取消</view>
					<view @click="tipConfirm">确认</view>
				</view>
			</view>
		</adMask>
		<!-- #endif  -->
	</view>
</template>

<script>
	import { getCourseById,getCourseVideoList,addDuration } from '@/api/course'
	export default {
		data() {
			return {
			   catalogueList:[],
			   pickCatalog:{videoUrl:"",thumbnail:"",duration:0,videoId:0,seconds:0},
			   pickCatalogIdx:0,
			   searchText:"",
			   videoContext: null,
			   video: {
			   	  percent: 10, //进度百分比
			   },
			   data:{
					courseId:null,
					imgUrl:"",
					talentAvatar:"",
					price:"",
					remark:"",
					noteNum:0,
					courseName:"",
					description:"",
					cataIndex:0,
					isFast:false,
					isAutoPlay:false,
			   },
			   danmuList:[],
			   tempStudyTimes:0,
			   studyTimes:0,
			   audioContext: null,
			   audioPlayIng:false,
			   showFullScreenBtn:true,
			   isLearning:false,
			   myVideo:null,
			   showProgress:true,
			   videoUrl:"https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4",
			   poster: "",
			   videoId:null,
			   isAutoPlay:false,
			   tipShow: false,
			   tipsIndex: null,
			   isNext: 0
			}
		},
		onLoad(options) {
		    this.courseId=options.courseId;
			this.videoId=options.videoId;
			this.isAutoPlay=options.isAutoPlay;
			this.tempStudyTimes=options.studyTimes;
			this.getCourseInfo();
			this.getCourseVideoList();
		},
		onShow(){
			  // if(this.data!=null && !this.countdowning){
				   // this.startCountsTime();
			  // }
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this);
		},
		methods: {
			canShowVip(item){
				return true;
				if(this.myUserInfo.isVip){
					return false;
				}
				return item.isVip==1 && item.isBuy==0;
			},
            getCourseInfo(){
               getCourseById(this.courseId).then(res => {
            		if(res.code==200){
            			this.data=res.data;
						this.isNext = res.data.isNext;
            		}
            	},
            	rej => {}
               );
            },
			search() {
				this.videoId = 0
				this.getCourseVideoList()
			},
            //课程目录
            getCourseVideoList(){
            	let that=this;
            	const params={"courseId":this.courseId,"keyword":this.searchText};
            	getCourseVideoList(params,1,30).then(res => {
						if(res.code==200){
							this.catalogueList=res.data.list;  
							if(this.catalogueList.length>0){
								if(this.videoId!=null &&this.videoId!= 0){
									console.log("qxj videoId="+this.videoId);
									this.pickCatalogIdx=this.getCatalogIdx();
									console.log("qxj pickCatalogIdx:"+this.pickCatalogIdx);
									this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
								}else{
									this.pickCatalog=this.catalogueList[0];
								}
								
								if(this.tempStudyTimes>0){
									this.pickCatalog.studyTime=this.tempStudyTimes;
									this.initStudyTime(this.pickCatalog.studyTime);
								}else{
									if(this.pickCatalog.studyTime!=null){
										this.initStudyTime(this.pickCatalog.studyTime);
									}
								}
								//开始播放计时
								if(this.isAutoPlay==1){
									this.pickCatalogMethod(this.pickCatalogIdx);
								}
								this.poster=this.pickCatalog.thumbnail;
							}
						}
            		},
            		rej => {}
            	);
            },
            
			addStudyCourse(){
				if(this.catalogueList.length==0){
					return;
				}
				this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				const parmas={"courseId":parseInt(this.courseId),"duration":this.courseDuration,"videoId":this.pickCatalog.videoId};
				addDuration(parmas).then(res => {
						if(res.code==200){
							this.courseDuration=0;
						}
					},
					rej => {}
				);
			},
			
			playVideo() {
			  this.videoContext.play();
			},
			pauseVideo() {
			   console.log("pause");
			   // (uni.getElementById("myVideo"))?.pause(); //as写法测试。注意id不对时as会崩溃
			   this.videoContext.pause();
			},
			pickCatalogAction(index){
				if(this.pickCatalogIdx == index) return
				if(this.isNext == 1 && this.pickCatalogIdx != index -1) {
					this.pauseVideo()
					this.openTips(index)
					return
				}
				//添加切换之前课程目录学习记录
				this.addStudyCourse();
				this.pickCatalogMethod(index);
			},
			pickCatalogMethod(index){
				this.pickCatalogIdx=index;
				this.pickCatalog=this.catalogueList[index];
				this.studyTimes=0;//当pickCatalog.studyTime=null 或者等于视频总时长时默认切为零
				if(this.pickCatalog.studyTime!=this.pickCatalog.seconds){
					this.studyTimes=this.pickCatalog.studyTime;
				}
				this.initStudyTime(this.studyTimes);
				this.poster=this.pickCatalog.thumbnail;
				let that=this;
				setTimeout(function(){
					that.playVideo();
				},200);
			},
			initStudyTime(times){
				this.studyTimes=times;
				this.courseDuration=times;
			},
			toggleBarChange(event){
				console.log("qxj toggleBarChange");
				this.showFullScreenBtn=!this.showFullScreenBtn;
			},
			onTimeUpdate(event){
				this.courseDuration = (event.detail.currentTime*1.0).toFixed(0);
			},
			onFullscreenChange(event){
				// 检查是否全屏
				if (event.fullscreen) {
					// 如果是全屏，则退出全屏
					//this.videoContext.exitFullScreen();
				}
			},
			onLoadedMetadata(e) {
			    this.pickCatalog=this.catalogueList[this.pickCatalogIdx];
				if(this.pickCatalog.seconds==null){
					this.pickCatalog.seconds =(e.target.duration).toFixed(0);
				}
			},
			getCatalogIdx(){
				let index=0;
				for (var i = 0; i < this.catalogueList.length; i++) {
					let item=this.catalogueList[i];
					if(this.videoId==item.videoId){
						break;
					}
					index++;
				}
				return index;
			},
			videoErrorCallback(){
				
			},
			openTips(index){
				this.tipsIndex = index 
				this.tipShow = true
			},
			tipConfirm() { // 提示确认
				this.tipsIndex = null
				this.tipShow = false
				// 继续播放
				this.playVideo()
			},
			tipCancel() { // 提示取消
				this.tipShow = false
				// 播放选择的一节
				//添加切换之前课程目录学习记录
				this.addStudyCourse();
				this.pickCatalogMethod(this.tipsIndex);
			}, 
		},
		onUnload() {
			this.addStudyCourse();
			let studyData={"studyTimes":this.courseDuration,"videoId":this.pickCatalog.videoId}
			uni.$emit('backStudyTime', studyData);
		}

	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.freeflag {
		min-width: 68rpx;
		// height: 32rpx;
		padding: 3rpx 12rpx;
		text-align: center;
		line-height: 32rpx;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 16rpx 0 16rpx;
		&-free {
			// background: url('@/static/image/hall/free_lable_bg.png') no-repeat right / 100% 32rpx;
			background-color: #2583EB;
		}
	
		&-member {
			// background: url('@/static/image/hall/member_label_bg.png') no-repeat right / 100% 32rpx;
			background-color: #FFB205;
		}
	}
	
	.banner {
		height: 430rpx;
	}

	.es-icon-course-icon-6 {
		background-image: url(/static/images/other/course/icon-6.png);
	}

	.es-icon-course-close {
		background-image: url(/static/images/other/course/close.png);
	}

	.es-icon-course-cate-bg1 {
		background-color: #eef5fd;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		// background-image: url(/static/images/other/course/cate-bg1.png);
	}

	.es-icon-course-cate-bg2 {
		background-color: #F5F7FA;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		// background-image: url(/static/images/other/course/cate-bg2.png);
	}

	.es-icon-course-cate-bg3 {
		background-image: url(/static/images/other/course/cate-bg3.png);
	}

	.es-icon-course-play-loading {
		background-image: url(/static/images/other/course/play-loading.png);
	}

	.es-icon-course-cate-vip {
		background-image: url(/static/images/other/course/vip.png);
	}

	.es-icon-search-search {
		background-image: url(/static/images/other/search/search.png);
	}
	.vip{
		position: absolute;
		right: 0;
		top:0;
		min-width: 87rpx;
		padding: 6rpx 10rpx;
		box-sizing: border-box;
	}
	
	.video {
		height: 380rpx;
		position: relative;
		display: flex;
		.cover{
			position: absolute;
			left: 0;
			top: 0;
		    width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
		.playIcon{
			position: absolute;
			width:44rpx ;
			height: 44rpx;
			z-index: 10;
		    right: 26rpx;
			bottom: 50rpx;
		 }
	}
	
	.video video {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	.video .video-1,.video .video-2,.video .video-3,.video .video-4{
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		z-index: 1;
	}
	.video .video-1{
		left:0;top:0;
	}
	.video .video-2{
		right:0;top:0;
	}
	.video .video-3{
		left:0;bottom:0;
	}
	.video .video-4{
		right:0;bottom:0;
	}
	.tipspop {
		width: 630rpx;
		// height: 376rpx;
		padding-bottom: 40rpx;
		background: linear-gradient( 180deg, #FFEDE3 0%, #FFFFFF 100%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		position: relative;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #757575;
		text-align: center;
		.jianyi_icon_box {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			background: linear-gradient( 180deg, #FF9B45 0%, #2583EB 100%);
			border: 12rpx solid #FFFFFF;
			@include u-flex(row, center, center);
			position: absolute;
			left: 50%;
			top: -74rpx;
			transform: translateX(-50%);
		}
		.jianyi_icon {
			height: 64rpx;
			width: 64rpx;
		}
		.tc_bg {
			width: 100%;
			height: auto;
			border-radius: 32rpx 32rpx 0 0;
			overflow: hidden;
		}
		&-con {
			padding: 0 48rpx;
		}
		&-title {
			margin: 14rpx 0 20rpx 0;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
		}
		&-footer {
			padding-top: 34rpx;
			@include u-flex(row, center, center);
			view {
				width: 248rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				background: #2583EB;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.tipspop-footer-l{
				margin-right: 38rpx;
				background: #F4F4F4;
				color: #757575;
			}
		}
	}
	.tipsvip {
		width: 630rpx;
		// height: 624rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		line-height: 48rpx;
		.vipFrame {
			width: 100%;
			height: auto;
		}
		&-con {
			padding: 44rpx 48rpx;
			box-sizing: border-box;
		}
		&-footer {
			@include u-flex(row, center, center);
			&-btn {
				width: 534rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				background: #2583EB;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
</style>