xingmingyi_applet/pages/index/video/video.vue

<template>
	<view class="pageCon">
		<view class="top bb scrollx ">
			<view @click="sectionChange(item, 1)" :class="[cat == item.id ? 'sel' : '', 'li']"
				v-for="(item, index) in vedio_cats" :key="index">{{ item.name }}</view>
		</view>
		<view class="top scrollx ">
			<view @click="sectionChange(item, 2)" :class="[two_cat == item.id ? 'sel' : '', 'li']"
				v-for="(item, index) in vedio_two_cats" :key="index">{{ item.name }}</view>
		</view>
		<view class="conwarp">
			<list :flag="1" :list="video_list"></list>
		</view>
	</view>
</template>

<script>
	import list from './componets/list.vue';
	export default {
		components: {
			list
		},
		data() {
			return {
				cat: '',
				two_cat: 0, //二级分类
				keyword: '',
				nav_id: 0,
				vedio_cats: [],
				vedio_two_cats: [],
				video_list: [
					// { image: '/static/img/pro/indnotice.png', name: '知识过关', path: '/pages/knowledge/knowledge' },
				],
				page: 1,
				pagnum: 10
			};
		},
		onPullDownRefresh() {
			this.page = 1;
			this.video_list = [];
			this.getInfoList();
			setTimeout(res => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			this.getInfoList();
		},
		onLoad(opt) {
			this.nav_id = opt.nav_id || '';
			this.keyword = opt.keyword || '';
			this.cat = opt.cat || '';
			this.getInfoList();
		},
		methods: {
			sectionChange(item, key) {
				if (key == 2) {
					this.two_cat = item.id;
					this.page = 1;
					this.video_list = [];
					this.getInfoList();
				} else if (key == 1) {
					this.two_cat = 0;
					this.cat = item.id;
					this.page = 1;
					this.video_list = [];
					this.getInfoList();
					uni.setNavigationBarTitle({
						title: item.name
					});
				}
			},
			getInfoList() {
				this.status = 'loadmore';
				this.$api
					.request('index/getVideoList', {
						is_top: 0,
						keyword: this.keyword || '',
						nav_id: this.nav_id,
						cat: this.cat,
						two_cat: this.two_cat || '',
						page: this.page,
						limit: this.pagnum
					})
					.then(data => {
						console.log(data);
						if (data.code == 200) {
							this.vedio_cats = data.data.vedio_cats;
							if (!this.cat) {
								this.cat = this.vedio_cats[0].id;
								uni.setNavigationBarTitle({
									title: this.vedio_cats[0].name
								});
							} 
							// 没有二级分类 调取
							// if (!this.two_cat) {
							// 	return;
							// }
							this.getTwoList();
							this.video_list = this.video_list.concat(data.data.video_list);
							if (data.data.video_list.length < this.pagnum) {
								this.status = 'nomore';
							}
						} else {
							this.$api.toast(data.msg);
						}
					});
			},
			getTwoList() {
				this.$api
					.request('index/getTwoCate', {
						id: this.cat
					})
					.then(data => {
						console.log(data);
						if (data.code == 200) {
							this.vedio_two_cats = data.data;
							console.log(this.vedio_two_cats, data.data);
							if (!this.two_cat) {
								this.two_cat = this.vedio_two_cats[0].id || '0';
							}
							// 调取列表
							// this.page = 1;
							// this.video_list = [];
							// this.getInfoList();
						} else {
							this.$api.toast(data.msg);
						}
					});
			},
			toNext(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.pageCon {
		.top {
			padding: 22rpx 10rpx 20rpx;
			background-color: #fff;

			.li {
				padding: 8rpx 15rpx;
				background-color: #f2f2f2;
				margin-right: 20rpx;
				color: #999;
				border-radius: 20rpx;
				font-size: 22rpx;
			}

			.sel {
				border: 1px solid #025b58;
				background: rgba(2, 91, 88, 0.1);
				color: #025b58;
			}
		}

		.conwarp {
			background: #ffffff;
			margin-top: 20rpx;
			padding: 0 30rpx;
		}
	}
</style>