baiyuApp/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="Number(item.courseSort) - 1 == pickCatalogIdx ?'cateitem cate-bg1': 'cateitem cate-bg2'">
							<!-- <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">
								<view class="es es-ac flex">
									<text class="es-fs-30 es-fw-600 cateitem-title">第{{ item.courseSort }}讲</text>
									<image src="../../static/images/other/course/play-loading.png" class="es-w-60 es-h-31 es-ml-10" 
									v-if="Number(item.courseSort) - 1 == pickCatalogIdx"></image>
								</view>
								<text class="es-fs-26 es-mt-4 cateitem-sub">{{ item.title }}</text>
							</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-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 {
			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 scoped lang="scss">
	
page {
	background-color: white;
}
.cateitem {
	 /* es es-ac es-icon-auto es-view-w-x es-pt-15 es-pb-15 es-mb-16 */
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.cate-bg1 {
	background-color: #eef5fd;
	.cateitem-title {
		color: #2583EB !important;
	}
	.cateitem-sub {
		color: #2583EB !important;
	}
}
.cate-bg2 {
	background-color: #F5F7FA;
	.cateitem-sub {
		color: #757575
	}
}
.freeflag {
	min-width: 68rpx;
	// height: 32rpx;
	padding: 4rpx 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;
	}
}

.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;
	
}

.video .cover {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
}

.video .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>