siyu_app/pages/course/catalogueN.nvue

<template>
	<view class="es content es-bc-white" style="position:relative;flex-direction: column;" @touchmove.stop>
		 <view class="pBox es-bc-white es-br-20 flex" style="padding: 20rpx 0; box-sizing: border-box;">
			 <view class="es-view-w-x">
			 	
				<view class="es es-h-60" >
					<view class="es es-ac  es-h-44  es-mt-5" >
						<image class="es-w-27 es-h-29" src="../../static/images/other/course/icon-6.png"></image>
						<text class="es-ml-20 es-fs-28 es-fw-600 es-f1">目录</text>
						<text class="es-ml-1 es-fs-30 es-c-99">（{{totalNum}}）</text>
					</view>
					<image @tap="closePopup()" style="position: absolute;right:10rpx;top:0rpx" class="es-w-40 es-h-40" src="../../static/images/close40.png"></image>
				</view>
			 
			 	<view class="es-f1 es-bc-f7 es-h-74 es-br es es-ac flex" style="box-sizing: border-box;margin-bottom: 24rpx;">
			 		<image class="es-icon-26 es-ml-27" src="../../static/images/other/search/search.png"></image>
			 		<view class="es-f1 es-ipt  es-ml-10 es-bc-f7 es-br-10 flex" >
			 			<input v-model="searchText"  placeholder="请输入关键字搜索" @input="onKeyInput"  class="es-h-76 es-fs-28" placeholder-class="es-c-b4" />
			 		</view>
			 		<view @tap="doSearch()" class="es-w-108 es-h-54 es-br es-bc es-mr-10   es es-ac es-pc es-fw-500 es-fs-26" >
						<text class="es-c-white es-fs-26">搜索</text>
					</view>
			 	</view>
			 
			 	<!-- 下面是目录列表 -->
				
			  <list loadmoreoffset="100" @loadmore="loadmore" :style="{'height':listHei+'px'}" >	
			       <refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh x-c ">
						<loading-indicator style="width: 22px;height: 22px;color:#999;"></loading-indicator>
						<text class="es-fs-32 es-ml-8">{{refreshText}}</text>
			       </refresh>
				   
				   <cell v-for="(item, index) in dataList"  :key="index">
						 <view  @click="pickCatalogAction(Number(item.courseSort)- 1)" class="es es-ac es-icon-auto es-view-w-x es-pt-15 es-pb-15 es-mb-16">
						   <image  class="bgImg" :src="Number(item.courseSort)- 1==pickCatalogIdx?'../../static/images/other/course/cate-bg1.png':'../../static/images/other/course/cate-bg2.png'  "></image>
							<view class="es-f1 flex">
								<text class="es-fs-30 es-fw-600">第{{item.courseSort}}讲</text>
								<text class="es-fs-26 es-mt-4">{{item.title}}</text>
							</view>
							
							<image  src="../../static/images/other/course/play-loading.png" class="es-w-60 es-h-31" v-if="Number(item.courseSort)- 1==pickCatalogIdx"></image>
							<view class="vip es-icon-auto  es-w-87 es-h-42 es es-ac es-fs-22 es es-ac es-pc" v-if="Number(item.courseSort)- 1!=pickCatalogIdx">
								<image class="bgImg" src="../../static/images/other/course/cate-bg3.png"></image>
								<image v-if="item.courseSort>2 && canShowVip(item)" class="es-icon-22" src="../../static/images/other/course/vip.png"></image>
								<text class="es-ml-4 es-fs-22">{{ item.courseSort>2 && canShowVip(item) ? '限时特惠' : '免费'}}</text>
							</view>
						 </view>
					</cell>
					
				   <cell v-if="showLoadMore || dataList.length > 4">
						  <view class="loading-more">
							  <text class="loading-more-text">{{loadMoreText}}</text>
						  </view>
					</cell>
					
					<cell>
						<view v-if="totalNum==0 && reqDataCode!=0"  class="y-f" style="height: 300px;padding-top: 200rpx;" >
							<image @tap="refreshPage()" class="es-w-124 es-h-80" style="width:187rpx;height:120rpx;" src="../../static/image/nodata.png"></image>
							<text @tap="refreshPage()" class="es-c-33">{{reqDataCode==1?'暂无数据':'请求超时'}}</text>
						</view>
					</cell>
									
		      </list>
		
			 </view>
			 	
		 </view>	
	</view>
</template>

<script>
	import { getCourseById,getCourseVideoList,addDuration } from '@/api/course'
	import { isEmpty } from '@/utils/common'
	export default {
		data() {
			return {
				dataList:[],
				pickCatalog:{videoUrl:"",thumbnail:"",duration:0,videoId:0,seconds:0},
				pickCatalogIdx:0,
				searchText:"",
				videoContext: null,
				video: {
					  percent: 10, //进度百分比
				},
				courseId:null,
				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,
				loadMoreText:"加载中...",
				showLoadMore:false,
				isLastPage:false,
				refreshing: false,
				refreshText: '下拉刷新',
				pageNum:1,
				listHei:0,
				totalNum:0,
				reqDataCode:0, //1:正常加载 -1 请求超时
				myUserInfo: {},
			}
		},
		mounted() {
			try {
				console.log("qxj catalogueN reqDataCode:"+this.reqDataCode);
				let that=this;
				this.subNVue= uni.getSubNVueById('catalogueN');
				uni.$on('catalogue', (data) => {  
					console.log("qxj catalogue ondata:"+JSON.stringify(data));
					that.courseId=data.courseId;
					that.videoId=data.videoId;
					that.pickCatalogIdx=data.pickCatalogIdx;
					if(that.reqDataCode==1){
						return;
					}
					that.getCourseInfo();
					that.upCallback();
				}); 
				
				uni.$on('pickCatalogIdx', (data) => {
					that.pickCatalogIdx=data.pickCatalogIdx;
					if(data.type == 'catalogueN') {
						that.closePopup()
					}
				}); 
				
				const res = uni.getSystemInfoSync();
				// this.listHei=res.windowHeight*1.05;
				this.listHei= res.windowHeight*0.85 - uni.upx2px(200);
				
				if(!this.$isLogin()){
					let useInfo=uni.getStorageSync('userInfo');
					if(!!useInfo && useInfo!=null){
						this.myUserInfo=JSON.parse(useInfo);
					}
				}
			} catch (e) {
				
			}
		},
		onUnload() {
			// 注销全局配置监听
			uni.$off("catalogue");
			uni.$off("pickCatalogIdx");
		},
		methods: {
			getCourseInfo(){
			   getCourseById(this.courseId).then(res => {
					if(res.code==200){
						this.courseData=res.data;
					}
				},
				rej => {}
			   );
			},
			onpullingdown(e) {
			    if (this.refreshing) return;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshText = '下拉更新'
				} else {
					this.refreshText = '释放更新'
				}
			 },
			 onrefresh(e) {
			   console.log('onRefreshing...');
			    this.refreshing = true;
				this.pageNum=1;
			    this.upCallback();
			    if (this.refreshing) return;
			},
			loadmore(){
				if(this.isLastPage){
					return;
				}
				console.log("loadmore");
				this.pageNum++;
				this.showLoadMore = true;
				setTimeout(() => {
					this.upCallback();
				}, 300);
			},
			pickCatalogAction(index){   
				const data = {
					index: index,
					type: 'catalogueN'
				}
				uni.$emit('pickCatalogAction',data);
			},
			/*下拉刷新的回调 */
			upCallback() {   	
				/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
				if(this.courseId==null){
					this.courseId=7;
				}
				const params={"courseId":this.courseId,"keyword":this.searchText};
				uni.showLoading({title:""});
				getCourseVideoList(params,this.pageNum).then(res => {
					    uni.hideLoading();
						if(res.code==200){
							setTimeout(()=>{
								if(this.pageNum == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(res.data.list); //追加新数据
								
								this.totalNum=res.data.total;
								this.reqDataCode=1;
								this.refreshing = false;
								this.isLastPage=res.data.isLastPage;
								if(this.isLastPage){
									this.refreshText = '加载完成'
								}
								if(res.data.isLastPage){
									this.loadMoreText = "没有更多数据了!"
									this.showLoadMore=false;
								}else{
									this.loadMoreText = "加载中..."
								}
							},200);
						}else{
							this.refreshing = false;
							this.refreshText = '加载完成';
							this.reqDataCode=-1;
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.refreshing = false;
					this.refreshText = '加载完成';
					this.reqDataCode=-1;
				});
			},
			closePopup() {
				const subNVue = uni.getSubNVueById('catalogueN');
				subNVue.hide('slide-out-bottom');
			},
			doSearch(){
				this.pageNum=1;
				this.upCallback();
			},
			refreshPage(){
				 this.pageNum=1;
			     this.upCallback();
			},
			onKeyInput: function(event) {
				 this.refreshPage();
			},
			canShowVip(item){
				return true;
				if(this.myUserInfo.isVip){
					return false;
				}
				return item.isVip==1 && item.isBuy==0;
			},
		}
	}
</script>

<style>
	
	page {
		background-color: white;
	}
	
	.fl-row{
		display: flex;
		flex-direction: row;
	}
	  
	.pBox{
		background-color:#171a1d;
		box-sizing: border-box;
	}
	
	.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-image: url(../../static/images/other/course/cate-bg1.png);
	}
	
	.es-icon-course-cate-bg2 {
		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);
	}
	
	.bgImg{
		position: absolute;left: 0;right: 0;top:0;bottom: 0;
	}
	
	
	.vip{
		position: absolute;
		right: 0;
		top:0;
	}
	
	.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;
	}
	
	
	.refresh {
		display: flex;
		flex-direction: row; 
	    justify-content: center;
		height: 50px;
	}
	
	.loading-more {
		  align-items: center;
		  justify-content: center;
		  padding-top: 14px;
		  padding-bottom: 14px;
		  text-align: center;
	}
	
	.loading-more-text {
		  font-size: 28rpx;
		  color: #999;
	}

</style>