xingmingyi_applet/pages/index/classList.vue

<template>
	<view class="content">
		<view class="top-input dfsb">
			<navigator url="/pages/index/screenList" class="sel dffs">
				条件筛选
				<u-icon name="arrow-right" color="#F89638" size="10"></u-icon>
			</navigator>
			<u-search :showAction="false" placeholder="输入关键词搜索课程" @input="search()" v-model="keyword"></u-search>
		</view>
		<view class="swiper"><u-swiper :autoplay="false" :list="banner" keyName="img" height="120" border-radius="20" @click="bannerClick"></u-swiper></view>
		<view v-if="flag == 1" class="conwarp">
			<view class="fl-five"><video-list :flag="1" :list="list"></video-list></view>
		</view>
		<view v-if="flag == 2" class="conwarp">
			<view class="fl-five"><course-list :flag="2" :list="list"></course-list></view>
		</view>
	</view>
</template>

<script>
import courseList from './components/knowVidList.vue';
import videoList from './video/componets/list.vue';
export default {
	components: {
		courseList,
		videoList
	},
	data() {
		return {
			keyword: '',
			banner: [],
			flag: '', // 1 视频  2.其他
			cat_id:0,
			nav_id: '',
			subject_id: '',
			grade_id: '',
			list: [
				// { image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
			],
			status: 'loadmore',
			page: 1,
			pagenum: 6
		};
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.getInfoList();
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loading';
		this.page = ++this.page;
		this.getInfoList();
	},
	//url: `/pages/index/knowledgeList?flag=${val}&subject_id=${val}&grade_id=${this.grade_id}&title=${item.name}`
	onLoad(opt) {
		this.flag = opt.flag || '1'; // 1 视频  2.其他
		this.keyword = opt.keyword || ''; // 1 视频  2.其他
		this.subject_id = opt.subject_id || '';
		this.grade_id = opt.grade_id || '';
		this.nav_id = opt.nav_id || '';   //导航ID
		this.cat_id = opt.cat_id || 0;   //二级分类ID
		uni.setNavigationBarTitle({
			title:  opt.title 
		});
		if (!this.keyword) return this.getInfoList();
	},
	methods: {
		search() {
			this.page = 1;
			this.list = [];
			this.getInfoList();
		},
		getInfoList() {
			this.status = 'loadmore';
			let url = this.flag == 1 ? 'index/getVideoList' : 'index/getClassList';
			this.$api
				.request(url, {
					keyword: this.keyword || '',
					is_top: 0,
					grade_id: this.grade_id || '',
					cat_id:this.cat_id||0,
					nav_id:this.nav_id||'',
					subject_id: this.subject_id || '',
					year: this.year || '',
					page: this.page,
					limit: this.pagenum
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.banner = data.data.banner;
						if (this.flag == 1) {
							this.list = this.list.concat(data.data.video_list);
							if (data.data.video_list.length < this.pagnum) {
								this.status = 'nomore';
							}
						} else {
							this.list = this.list.concat(data.data.list);
							if (data.data.list.length < this.pagnum) {
								this.status = 'nomore';
							}
						}
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		toNext(url) {
			uni.navigateTo({
				url: url
			});
		},
		bannerClick(e) {
			console.log(e);
			let item = this.banner[e];
			if (item.goods_id != 0) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/index/video/videoInfo?id=' + item.goods_id
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/navInfo?id=' + item.goods_id
					});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	.top-input {
		padding: 20rpx 30rpx;
		.sel {
			color: #f89638;
			padding: 12rpx 20rpx;
			font-size: $font-sm;
			background-color: rgba(#f89638, 0.1);
			border-radius: 30rpx;
			margin-right: 36rpx;
		}
	}
	.swiper {
		margin: 20rpx 30rpx;
	}
	.conwarp {
		background-color: #fff;
		padding: 32rpx 30rpx 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.gdHead {
			line-height: 58rpx;
			margin-bottom: 16rpx;
			.head {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 48rpx;
			}
		}
	}
}
</style>