MinNan/pages/schedule/index.vue

<template>
	<view class="wrap">
		<u-navbar :autoBack="true" title="培训" bgColor="rgba(255,255,255,255)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></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="selecter">
			<scroll-view scroll-y class="left-aside" :style="{ height: categoryScrollHeight + 'px' }">
				<block v-for="(item, index) in categoryList" :key="index">
					<view class="b-item" :class="{ active: index === categoryIndex }" @click="onCategorySelect(index)">
						{{ item.name }}
					</view>
				</block>
				<!-- 加载中 -->
				<load-more :loadingType="loadingType" loadingText=" "></load-more>
			</scroll-view>
			<view class="right-aside">
				<view class="goods-state">
					<text class="b-amount">
						<text>共有</text>
						<text class="s-num">{{ totalCount }}</text>
						<text>个培训</text>
					</text>
					<view class="b-filter">
						<view class="b-item" v-for="(item, index) in filterList" :key="index" :class="{ 'f-active': index == filterIndex }" @click="onFilterSelect(index)">
							<view class="s-tit">{{ item.name }}</view>
						</view>
					</view>
				</view>
				<block v-if="typeList.length > 0">
					<scroll-view class="type-list" scroll-x scroll-with-animation :scroll-into-view="'type-' + typeScroll" v-if="typeList.length > 0">
						<view class="b-items">
							<view
								class="b-item"
								:id="'type-' + index"
								v-for="(item, index) in typeList"
								:key="index"
								:class="{ active: index === typeIndex }"
								@click="onTypeSelect(index, true)"
							>
								{{ item.name }}
							</view>
						</view>
					</scroll-view>
					<scroll-view
						class="group-list"
						scroll-y
						scroll-with-animation
						:upper-threshold="100"
						:lower-threshold="100"
						:scroll-top="scrollTop"
						:scroll-into-view="'group-' + groupScroll"
						@scroll="onScroll"
						:style="{ height: groupScrollHeight + 'px' }"
					>
						<block v-if="groupLoad">
							<view class="group-item" v-for="(group, index) in groupList" :id="'group-' + index" :key="index">
								<view class="group-title">{{ group.name }}</view>
								<view class="group-main">
									<view class="schedule-com" v-for="item in group.scheduleList" :key="item.id">
										<schedule-item :item="item" scene="index"></schedule-item>
									</view>
									<!-- 加载中 -->
									<load-more :loadingType="group.loadingType" :loadingText="group.loadingText"></load-more>
								</view>
							</view>
						</block>
						<!-- 加载中 -->
						<load-more v-else :loadingType="loadingType" :loadingText="loadingText"></load-more>
					</scroll-view>
				</block>
				<scroll-view
					v-else
					class="schedule-list"
					scroll-y
					scroll-with-animation
					:lower-threshold="100"
					@scrolltolower="onScrollToLower"
					:style="{ height: goodsScrollHeight + 'px' }"
				>
					<view class="schedule-com" v-for="(item, index) in scheduleList" :key="index">
						<schedule-item :item="item" scene="index"></schedule-item>
					</view>
					<!-- 加载中 -->
					<load-more :loadingType="loadingType" :loadingText="loadingText"></load-more>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
// import { getCategoryList, getScheduleList } from '@/service/api/schedule.js';
import mixinsCommon from '@/mixins/common.js';
let that;
export default {
	mixins: [mixinsCommon],
	data() {
		return {
			keyword: '',
			scrollTop: 0,
			categoryIndex: 0,
			categoryList: [
				{
					id: 0,
					name: '所有培训',
					level: 1,
					children: []
				}
			],
			categoryScrollHeight: 100,
			typeScroll: 0,
			typeIndex: 0,
			typeList: [],
			filterIndex: 0,
			filterList: [
				{
					name: '全部',
					value: 'all'
				},
				{
					name: '免费',
					value: 'free'
				},
				{
					name: 'VIP',
					value: 'vip'
				}
			],
			totalCount: 0,
			groupLoad: false,
			groupScroll: 0,
			groupList: [],
			groupScrollHeight: 100,
			scheduleList: [],
			goodsScrollHeight: 100,
			page: 1,
			loadingType: -1,
			loadingText: ''
		};
	},
	onLoad() {
		that = this;
		this.initScrollHeight();
		this.loadingType = 1;
		this.$api.getCategoryList({}, function (res) {
			console.log(res, 6969);
			that.loadingType = -1;
			if (res.code == 1) {
				that.categoryList = [...that.categoryList, ...res.data];
				that.onCategorySelect(0);
			}
		});
		// getCategoryList().then(([err, res]) => {
		// 	this.loadingType = -1;
		// 	if (!err) {
		// 		this.categoryList = [...this.categoryList, ...res];
		// 		this.onCategorySelect(0);
		// 	}
		// });
	},
	methods: {
		redirect(type, data) {
			switch (type) {
				case 'audit':
					this.$app.routePage(null, '/pages/goods/audit');
					break;
			}
		},
		onInput(e) {
			console.log('onInput', e);
			this.keyword = e.detail.value;
		},
		onFilterSelect(index) {
			this.filterIndex = index;
			this.onCategorySelect(this.categoryIndex);
		},
		onSearch() {
			if (this.keyword) {
				this.onCategorySelect(0);
			}
		},
		// 选择大类
		onCategorySelect(index) {
			// 清除搜索
			if (this.keyword && index !== 0) {
				this.keyword = '';
			}
			this.loadingType = 1;
			this.totalCount = 0;
			this.categoryIndex = index;
			this.groupLoad = false;
			if (!this.keyword && this.categoryList[index].children && this.categoryList[index].children.length > 0) {
				this.typeList = this.categoryList[index].children;
				let groupList = [];
				this.typeList.forEach((item) => {
					groupList.push({
						id: item.id,
						name: item.name,
						scrollTop: -1,
						scheduleList: [],
						loadingType: 2,
						loadingText: '暂无数据'
					});
				});
				this.groupList = groupList;
				this.onTypeSelect(0, true);
			} else {
				this.typeList = [];
				this.loadScheduleList(true);
			}
		},
		// 选择小类
		onTypeSelect(index, scrole) {
			console.log('onTypeSelect', index);
			// 清除搜索
			if (this.keyword) {
				this.keyword = '';
			}
			this.typeIndex = index;
			this.typeScroll = index;
			this.loadGroupGoods(index, scrole); // 加载当前组
			this.loadPrevGoods(); // 加载上一组
			this.loadNextGoods(); // 加载下一组
		},
		// 监听右侧栏滚动
		onScroll(e) {
			// console.log('onScroll', e)
			// 待优化
			let scrollTop = e.detail.scrollTop;
			let groupIndex = 0;
			this.groupList.forEach((item, index) => {
				if (item.scrollTop <= scrollTop && item.scheduleList.length > 0) {
					groupIndex = index;
				}
			});
			if (this.typeIndex != groupIndex) {
				console.log('scroll', groupIndex, scrollTop);
				this.onTypeSelect(groupIndex); // 选中子分类
			}
		},
		// 右侧栏滚动到底
		onScrollToLower(e) {
			console.log('onScrollToLower', e);
			this.loadScheduleList();
		},
		// 向前加载数据
		loadPrevGoods() {
			if (this.typeIndex > 0) {
				this.loadGroupGoods(this.typeIndex - 1);
			}
		},
		// 向后加载数据
		loadNextGoods() {
			if (this.typeIndex < this.typeList.length - 1) {
				this.loadGroupGoods(this.typeIndex + 1);
			}
		},
		loadGroupGoods(index, scroll) {
			console.log('loadGroupGoods', index, scroll);
			if (this.groupList[index].scheduleList.length === 0) {
				this.groupList[index].loadingType = 1;
				if (this.groupLoad === false && this.loadingType === -1) {
					this.loadingType = 1;
				}
				console.log('groupList', this.groupList);
				const typeId = this.typeList[this.typeIndex].id;
				const filterGroup = this.filterList[this.filterIndex].value;
				this.$api.getScheduleList(
					{
						category_id: this.typeList[this.typeIndex].id,
						group: this.filterList[this.filterIndex].value,
						keyword: this.keyword,
						page: this.page,
						page_size: 10
					},
					function (res) {
						console.log('5555', res);
						that.groupList[index].loadingType = -1;
						if (that.groupLoad === false && that.loadingType === 1) {
							that.loadingType = -1;
							that.groupLoad = true;
						}
						console.log('groupLoad', that.groupLoad);
						if (res.code == 1) {
							that.totalCount += res.data.total;
							if (res.data.items.length > 0) {
								that.groupList[index].scheduleList = res.data.items;
							} else {
								that.groupList[index].loadingType = 2;
								that.groupList[index].loadingText = '暂无数据';
							}
							// 计算group的偏移
							setTimeout(() => {
								that.calcGroupTop();
								if (scroll) {
									that.groupScroll = index;
								}
							}, 100);
						} else {
							that.groupList[index].loadingType = 3;
						}
					}
				);

				// getScheduleList(typeId, filterGroup, this.keyword, 1, 100).then(([err, res]) => {
				// 	console.log('getScheduleList', err, res);
				// 	this.groupList[index].loadingType = -1;
				// 	if (this.groupLoad === false && this.loadingType === 1) {
				// 		this.loadingType = -1;
				// 		this.groupLoad = true;
				// 	}
				// 	console.log('groupLoad', this.groupLoad);
				// 	if (!err) {
				// 		this.totalCount += res.total;
				// 		if (res.items.length > 0) {
				// 			this.groupList[index].scheduleList = res.items;
				// 		} else {
				// 			this.groupList[index].loadingType = 2;
				// 			this.groupList[index].loadingText = '暂无数据';
				// 		}
				// 		// 计算group的偏移
				// 		setTimeout(() => {
				// 			this.calcGroupTop();
				// 			if (scroll) {
				// 				this.groupScroll = index;
				// 			}
				// 		}, 100);
				// 	} else {
				// 		this.groupList[index].loadingType = 3;
				// 	}
				// });
			} else {
				if (scroll) {
					this.groupScroll = index;
				}
			}
		},
		loadScheduleList(refresh) {
			console.log('loadScheduleList', refresh);
			if (refresh) {
				this.page = 1;
				this.scheduleList = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			const categoryId = this.categoryList[this.categoryIndex].id;
			const filterGroup = this.filterList[this.filterIndex].value;
			this.$api.getScheduleList(
				{
					category_id: this.categoryList[this.categoryIndex].id,
					group: this.filterList[this.filterIndex].value,
					keyword: this.keyword,
					page: this.page,
					page_size: 10
				},
				function (res) {
					console.log(res, 3636);
					that.loadingType = -1;
					if (res.code == 1) {
						that.totalCount = res.data.total;
						if (res.data.items.length > 0) {
							that.scheduleList = [...that.scheduleList, ...res.data.items];
						} else {
							that.loadingType = 2;
							if (that.page == 1) {
								that.loadingText = '暂无数据';
							}
						}
					} else {
						that.loadingType = 3;
					}
				}
			);
			// getScheduleList(categoryId, filterGroup, this.keyword, this.page, 10).then(([err, res]) => {
			// 	console.log('getScheduleList', err, res);
			// 	this.loadingType = -1;
			// 	if (!err) {
			// 		this.totalCount = res.total;
			// 		if (res.items.length > 0) {
			// 			this.scheduleList = [...this.scheduleList, ...res.items];
			// 		} else {
			// 			this.loadingType = 2;
			// 			if (this.page == 1) {
			// 				this.loadingText = '暂无数据';
			// 			}
			// 		}
			// 	} else {
			// 		this.loadingType = 3;
			// 	}
			// });
		},
		// 计算分组偏移
		calcGroupTop() {
			let height = 0;
			let calc = false;
			this.groupList.forEach((item, index) => {
				// if (calc === false && item.scheduleList.length === 0) {
				// 	calc = true
				// }
				// if (calc) {
				let groupView = uni
					.createSelectorQuery()
					.in(this)
					.select('#group-' + index);
				groupView
					.fields(
						{
							size: true
						},
						(res) => {
							console.log('Query fields', index, res);
							if (res) {
								item.scrollTop = height;
								height += res.height;
							}
						}
					)
					.exec();
				// } else {
				// 	height += item.scrollTop
				// }
			});
			this.sizeCalcState = true;
		},
		initScrollHeight() {
			const systemInfo = uni.getSystemInfoSync();
			const windowHeight = systemInfo.windowHeight;
			const searchBarHeight = this.$logic.rpx2px(90);
			const stateBarHeight = this.$logic.rpx2px(90);
			const typeListHeight = this.$logic.rpx2px(90);
			this.categoryScrollHeight = windowHeight - searchBarHeight;
			this.goodsScrollHeight = this.categoryScrollHeight - stateBarHeight;
			this.groupScrollHeight = this.goodsScrollHeight - typeListHeight;
		}
	}
};
</script>

<style>
.wrap {
	height: 100%;
	background-color: #f8f8f8;
}

.wrap {
	position: relative;
}

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

.selecter {
	display: flex;
	height: 100%;
}

.left-aside {
	padding-bottom: 100upx;
	flex-shrink: 0;
	width: 145rpx;
	height: 100%;
	background-color: #f1f2f1;
}

.left-aside .b-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 90upx;
	font-size: 28upx;
	position: relative;
}

.left-aside .b-item.active {
	color: #da5650;
	background: #f8f8f8;
}

.left-aside .b-item.active:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 36upx;
	width: 8upx;
	background-color: #da5650;
	border-radius: 0 4px 4px 0;
	opacity: 0.8;
}

.right-aside {
	flex: 1;
}

.right-aside .goods-state {
	padding: 0 20upx;
	height: 90upx;
	background: #f1f2f1;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.right-aside .goods-state .b-amount {
	color: #999;
	font-size: 26upx;
}

.right-aside .goods-state .b-amount .s-num {
	margin: 0 5upx;
}

.right-aside .goods-state .b-filter {
	display: flex;
	align-items: center;
}

.right-aside .goods-state .b-filter .b-item {
	padding: 0 20upx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right-aside .goods-state .b-filter .b-item.f-active {
	font-weight: bold;
}

.right-aside .goods-state .b-filter .b-item .s-tit {
	color: #666666;
	font-size: 26upx;
}

.right-aside .type-list {
	display: flex;
	width: 550upx;
	height: 90upx;
	background: #fff;
	white-space: nowrap;
}

.right-aside .type-list .b-items {
	padding: 20upx;
}

.right-aside .type-list .b-item {
	display: inline-block;
	margin-right: 20upx;
	padding: 0 20upx;
	height: 50upx;
	line-height: 50upx;
	background: #f8f8f8;
	border-radius: 10upx;
	color: rgba(0, 0, 0, 0.5);
	font-size: 24upx;
}

.right-aside .type-list .b-item:last-child {
	margin-right: 0;
}

.right-aside .type-list .b-item.active {
	color: #fff;
	background: #da5650;
}

.right-aside .group-list {
	height: 100%;
	background: #f8f8f8;
}

.right-aside .group-list .group-item {
	padding-top: 30upx;
}

.right-aside .group-list .group-title {
	padding: 0 20upx;
	margin-bottom: 10upx;
	color: #666;
	font-size: 28upx;
	font-weight: bold;
}

.right-aside .group-list .group-main .schedule-com {
	border-bottom: 1upx solid #eee;
}

.right-aside .group-list .group-main .schedule-com:last-child {
	border-bottom: none;
}

.right-aside .schedule-list .schedule-com {
	border-bottom: 1upx solid #eee;
}

.right-aside .schedule-list .schedule-com:last-child {
	border-bottom: none;
}
</style>