WenWuGuanJia/pages/course/index.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="课程" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="search">
			<view class="b-input">
				<input class="s-input" :value="keyword" @input="onInput" @confirm="onSearch" placeholder="搜索课程" />
				<view class="s-submit iconfont icon-search" @click="onSearch"></view>
			</view>
		</view>
		<view class="category-list">
			<view class="b-row">
				<view class="b-all" @click="onCategorySelect('first', -1)" :class="{ 'f-active': -1 === firstCategoryIndex }">不限</view>
				<view class="b-items">
					<view
						class="s-item"
						v-for="(item, index) in categoryList"
						:key="index"
						@click="onCategorySelect('first', index)"
						:class="{ 'f-active': index === firstCategoryIndex }"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="b-row" v-if="secondCategoryList.length > 0">
				<view class="b-all" @click="onCategorySelect('second', -1)" :class="{ 'f-active': -1 === secondCategoryIndex }">不限</view>
				<view class="b-items">
					<view
						class="s-item"
						v-for="(item, index) in secondCategoryList"
						:key="index"
						@click="onCategorySelect('second', index)"
						:class="{ 'f-active': index === secondCategoryIndex }"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="b-row" v-if="thirdCategoryList.length > 0">
				<view class="b-all" @click="onCategorySelect('third', -1)" :class="{ 'f-active': -1 === thirdCategoryIndex }">不限</view>
				<view class="b-items">
					<view
						class="s-item"
						v-for="(item, index) in thirdCategoryList"
						:key="index"
						@click="onCategorySelect('third', index)"
						:class="{ 'f-active': index === thirdCategoryIndex }"
					>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="filter-box">
			<view class="b-item" v-for="(item, index) in groupList" :key="index" :class="{ 'f-active': index == groupIndex }" @click="onGroupSelect(index)">
				<view class="s-tit">{{ item.name }}</view>
				<view class="iconfont" v-if="item.sort && index == groupIndex" :class="{ 'icon-unfold': item.sort == 'asc', 'icon-fold': item.sort == 'desc' }"></view>
			</view>
		</view>
		<view class="course-list">
			<view class="b-items">
				<course-item v-for="item in courseList" :item="item" :key="item.id"></course-item>
			</view>
			<!-- 加载中 -->
			<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
		</view>
	</view>
</template>

<script>
// import { getCategoryList, getCourseList } from '@/service/api/course.js';
// import mixinsCommon from '@/mixins/common.js';
let that;
export default {
	// mixins: [mixinsCommon],
	data() {
		return {
			groupIndex: 0,
			groupList: [
				{
					name: '全部',
					value: 'all',
					sort: ''
				},
				{
					name: '免费',
					value: 'free',
					sort: ''
				},
				{
					name: 'VIP',
					value: 'vip',
					sort: ''
				},
				{
					name: '热门',
					value: 'hot',
					sort: ''
				},
				{
					name: '价格',
					value: 'price',
					sort: 'asc'
				}
			],
			categoryList: [],
			categoryValue: 0,
			firstCategoryIndex: -1,
			secondCategoryIndex: -1,
			thirdCategoryIndex: -1,
			courseList: [],
			keyword: '',
			loadingType: 1,
			loadingText: ''
		};
	},
	computed: {
		secondCategoryList() {
			if (this.firstCategoryIndex === -1) {
				return [];
			}
			return this.categoryList[this.firstCategoryIndex].children;
		},
		thirdCategoryList() {
			if (this.secondCategoryIndex === -1) {
				return [];
			}
			return this.categoryList[this.firstCategoryIndex].children[this.secondCategoryIndex].children;
		}
	},
	onLoad(options) {
		that = this;
		this.$api.getCategoryList({}, function (res) {
			// console.log(res.data, 9999);
			that.categoryList = res.data;
		});
		// getCategoryList().then(([err, res]) => {
		// 	console.log('getCourseList', err, res);
		// 	if (!err) {
		// 		this.categoryList = res;
		// 		console.log(this.categoryList, 'this.categoryList');
		// 	}
		// });
		this.loadList(true);
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadList();
		}
	},
	methods: {
		loadList(refresh) {
			console.log('loadList', refresh);
			if (refresh) {
				this.page = 1;
				this.courseList = [];
			} else {
				this.page++;
			}

			this.loadingType = 1;
			this.loadingText = '';
			this.$api.getCourseList(
				{
					category_id: this.categoryValue,
					group: this.groupList[this.groupIndex].value,
					keyword: this.keyword,
					page: this.page,
					page_size: 10,
					sort: this.groupList[this.groupIndex].sort
				},
				function (res) {
					that.loadingType = -1;
					console.log('啦啦啦', res);
					that.loadingType = -1;
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							that.courseList = [...that.courseList, ...res.data.items];
							console.log(that.courseList, '33333333333');
						} else {
							that.loadingType = 2;
							if (that.page == 1) {
								that.loadingText = '暂无课程数据';
							}
							that.page--; // 重置分页
						}
					} else {
						that.loadingType = 3;
					}
				}
			);
			// getCourseList(this.categoryValue, this.groupList[this.groupIndex].value, this.groupList[this.groupIndex].sort, this.keyword, this.page, 10).then(([err, res]) => {
			// 	console.log('getCourseList', err, res);
			// 	this.loadingType = -1;
			// 	if (!err) {
			// 		if (res.items.length > 0) {
			// 			this.courseList = [...this.courseList, ...res.items];
			// 		} else {
			// 			this.loadingType = 2;
			// 			if (this.page == 1) {
			// 				this.loadingText = '暂无课程数据';
			// 			}
			// 			this.page--; // 重置分页
			// 		}
			// 	} else {
			// 		this.loadingType = 3;
			// 	}

			// });
		},
		onInput(e) {
			this.keyword = e.detail.value;
		},
		onSearch() {
			if (this.keyword) {
				this.onCategorySelect('first', -1);
			}
		},
		onCategorySelect(level, index) {
			if (this.keyword && !(level === 'first' && index === -1)) {
				this.keyword = '';
			}
			if (level === 'first') {
				this.firstCategoryIndex = index;
				if (index === -1) {
					this.categoryValue = 0;
				} else {
					this.categoryValue = this.categoryList[index].id;
				}
			} else if (level === 'second') {
				this.secondCategoryIndex = index;
				if (index === -1) {
					this.categoryValue = this.categoryList[this.firstCategoryIndex].id;
				} else {
					this.categoryValue = this.categoryList[this.firstCategoryIndex].children[index].id;
				}
			} else if (level === 'third') {
				this.thirdCategoryIndex = index;
				if (index === -1) {
					this.categoryValue = this.categoryList[this.firstCategoryIndex].children[this.secondCategoryIndex].id;
				} else {
					this.categoryValue = this.categoryList[this.firstCategoryIndex].children[this.secondCategoryIndex].children[index].id;
				}
			}
			this.loadList(true);
		},
		// 分类点击事件
		onGroupSelect(index) {
			console.log(index);
			if (index == this.groupIndex) {
				const sort = this.groupList[this.groupIndex].sort;
				if (sort) {
					if (sort === 'asc') {
						this.groupList[this.groupIndex].sort = 'desc';
					} else {
						this.groupList[this.groupIndex].sort = 'asc';
					}
				}
			}
			this.groupIndex = index;
			this.loadList(true);
		}
	}
};
</script>

<style>
.wrap {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.search {
	margin: auto;
	padding: 0 30upx;
	width: 690upx;
	height: 90upx;
	background: #da5650;
	display: flex;
	align-items: center;
}

.search .b-input {
	padding: 0 20upx;
	flex: 1;
	height: 70upx;
	background: #fff;
	border-radius: 10upx;
	display: flex;
	align-items: center;
}

.search .b-input .s-input {
	flex: 1;
	color: #333;
	font-size: 26upx;
}

.search .b-input .s-submit {
	margin-left: 20upx;
	color: #c3c3c3;
	font-size: 40upx;
}

.category-list {
	background: #fff;
}

.category-list .b-row {
	padding: 0 30upx;
	display: flex;
	border-bottom: 2upx solid #eee;
}

.category-list .b-all {
	padding: 20upx 0;
	font-size: 28upx;
}

.category-list .b-all.f-active {
	font-weight: bold;
}

.category-list .b-items {
	margin-left: 20upx;
	flex: 1;
	display: flex;
	flex-wrap: wrap;
}

.category-list .b-items .s-item {
	padding: 20upx 20upx;
	font-size: 28upx;
}

.category-list .b-items .s-item.f-active {
	font-weight: bold;
}

.filter-box {
	background: #fff;
	display: flex;
	align-items: center;
}

.filter-box .b-item {
	padding: 20upx 30upx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28upx;
}

.filter-box .b-item.f-active {
	font-weight: bold;
}

.filter-box .b-item .s-tit {
	color: #333;
}

.filter-box .b-item .iconfont {
	color: #999;
	font-size: 28upx;
	margin-left: 10upx;
}

.course-list {
	margin-top: 30upx;
}

.course-list .course-item {
	border-bottom: 1upx solid #eee;
}

.course-list .course-item:last-child {
	border-bottom: none;
}
</style>