xingmingyi_applet/pages/index/dlClassList.vue

<template>
	<view class="content">
		<view class="topBox">
			<u-tabs
				
				lineWidth="100"
				:is-scroll="true" 
				:list="cate_list"
				keyName="name"
				:current="current"
				:itemStyle="{ fontSize: '28rpx', height: '100rpx'}"
				:activeStyle="{ color: '#87C477',borderBottom:'2px solid #87C477' }"
				lineHeight="0" 
				sticky
				@click="topHandle"
			></u-tabs>
		</view>
		<view class="top-input dfsb">
			<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 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 {
			cate_list:[],   //独立分类
			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 || ''; //关键词
		this.nav_id = opt.nav_id || '';   //独立导航ID
		uni.setNavigationBarTitle({
			title:  opt.title 
		});
		
		this.dl_cate();
		
		if (!this.keyword) return this.getInfoList();
	},
	methods: {
		
		// 顶部按钮被点击
		topHandle(e) {
			console.log('top: ',e);
			this.cat_id = e.id;
			
			this.page = 1;
			this.list = [];
			this.getInfoList();
			// this.onload();
		},
		
		search() {
			if(this.keyword)
			{
				this.page = 1;
				this.list = [];
				this.getInfoList();
			}
			
		},
		
		//获取独立分类
		dl_cate() {
			
			this.$api
				.request('index/getDlCate', {
					dl_nav_id: this.nav_id || 0,
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.cate_list = data.data;
						// this.cat_id = data.data[0].id;
						console.log(this.cat_id);
						
						// this.getInfoList();
						
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		
		getInfoList() {
			this.status = 'loadmore';
			this.$api
				.request('index/getDlClassList', {
					keyword: this.keyword || '',
					dl_cate:this.cat_id||0,
					dl_nav:this.nav_id||'',
					page: this.page,
					limit: this.pagenum
				})
				.then(data => {
					console.log(data);
					if (data.code == 200) {
						this.banner = data.data.banner;
					
						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 {
	
	.topBox {
		width: auto;
		background-color: #fff;
	}
	/deep/ .u-tabs{
		width: 100vw;
		
	}
	
	.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>