learn_applet/pagesHome/list/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1">
				<input type="text" v-model="nick_name" placeholder="请输入想要搜索的内容">
			</view>
			<view class="one_2">
				<button size="mini" class="button" type="primary" @click="searchInfo">搜索</button>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<scroll-view scroll-y="true" class="scroll-view">
					<view class="list-scroll-view">
						<view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in subjectList"
							:key="index" @tap="toChange(index,item)">
							<text>{{item.label}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="two_2">
				<view class="two_2_1">
					<up-tabs :list="gradeList" keyName="label" @click="toTab"></up-tabs>
				</view>
				<view class="two_2_2" v-if="total>0">
					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
						<view class="list-scroll-view">
							<view class=" one_2_1">
								<view class="list" v-for="(tag,index) in list" :key="index" @tap="toBuy(tag)">
									{{tag.nick_name}}
								</view>
							</view>
							<view class="is_bottom" v-if="is_bottom">
								<text>{{config.bottom_title}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<up-empty v-else mode="list" icon="/static/list.png"></up-empty>
			</view>
		</view>
		<up-overlay :show="show">
			<login @showChange='showChange'></login>
		</up-overlay>
	</view>
</template>

<script setup lang="ts">
	import login from "@/components/login.vue"
	import { inject, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	// 基本信息
	const config = ref({ logo: [], file: [] });
	const type = ref('');
	const subject = ref('-1');
	const grade = ref('-1');
	// 列表
	const list = ref([]);
	const total = ref(0);
	const skip = ref(0);
	const limit = ref(5);
	const page = ref(0);
	// 数据是否触底
	const is_bottom = ref(false);
	// 遮罩层
	const show = ref(false);
	const nick_name = ref('');
	// 字典表
	const educationList = ref([]);
	const active = ref(0);
	const subjectList = ref([]);
	const gradeList = ref([]);
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	onLoad(async (options) => {
		type.value = options && options.type
		uni.setNavigationBarTitle({
			title: options && options.name + '课程' || '课程'
		});
	});
	onShow(async () => {
		await searchConfig();
		await searchOther();
		await clearPage();
		await search();
		if (!user.value) show.value = true
	})
	onPullDownRefresh(async () => {
		await clearPage();
		await search();
		uni.stopPullDownRefresh();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 学历
		res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
		if (res.errcode === 0) educationList.value = res.data;
		// 学科
		res = await $api(`dictData`, 'GET', { code: 'subject', is_use: '0' });
		if (res.errcode === 0) subjectList.value = res.data;
		subjectList.value.unshift({ label: '全部', value: '-1' })
		// 年级
		res = await $api(`dictData`, 'GET', { code: 'grade', is_use: '0' });
		if (res.errcode === 0) gradeList.value = res.data;
		gradeList.value.unshift({ label: '全部', value: '-1' })
	};
	// 名称搜索
	const searchInfo = async () => {
		await clearPage();
		await search();
	};
	// 查询
	const search = async () => {
		const info : any = {
			skip: skip.value,
			limit: limit.value,
			status: '1',
			is_show: '0'
		}
		if (nick_name.value) info.nick_name = nick_name.value
		const res = await $api('teacher', 'GET', info);
		if (res.errcode === 0) {
			list.value = list.value.concat(res.data)
			total.value = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	const showChange = () => {
		show.value = false
	}
	const getDict = (data, model) => {
		let res
		if (model == 'education') res = educationList.value.find((f) => f.value == data)
		return res.label || '暂无'
	}
	// 左侧一级选择
	const toChange = (index, e) => {
		console.log(index, e);
		active.value = index
		subject.value = e.value
		// that.clearPage();
		// that.searchMarket();
	}
	// 改变标签
	const toTab = async (data) => {
		console.log(data);
	};
	// 分页
	const toPage = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			page.value = page.value + 1;
			skip.value = page.value * limit.value;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	// 清空列表
	const clearPage = () => {
		list.value = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>
<style lang="scss" scoped>
	.content {
		background-color: var(--f1Color);

		.one {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2vw;
			background-color: var(--mainColor);

			.one_1 {
				padding: 0 2vw;
				width: 75vw;

				input {
					padding: 2vw;
					background-color: var(--f1Color);
					font-size: var(--font14Size);
					border-radius: 5px;
				}
			}

			.one_2 {
				.button {
					background-color: var(--3c9Color);
					color: var(--mainColor);
				}
			}
		}

		.two {
			height: 90vh;
			display: flex;
			flex-direction: row;
			margin: 2vw 0 0 0;

			.two_1 {
				position: relative;
				width: 25vw;
				background-color: #fafafa;
				display: flex;
				flex-direction: column;

				.list {
					text-align: center;
					padding: 3.1vw 0;
					border-bottom: 1px solid var(--f1Color);

					text {
						font-size: var(--font14Size);
					}
				}

				.listActive {
					background-color: var(--3c9Color);
					color: var(--mainColor);
				}
			}

			.two_2 {
				width: 75vw;
				flex-grow: 1;
				position: relative;
				display: flex;
				flex-direction: column;

				.two_2_1 {
					background-color: var(--mainColor);
				}

				.two_2_2 {
					flex-grow: 1;
					position: relative;
					display: flex;
					flex-direction: column;
					margin: 2vw 2vw 0 2vw;

					.list {
						display: flex;
						padding: 2vw;
						border-radius: 5px;
						background-color: var(--mainColor);
					}
				}

				.is_bottom {
					width: 100%;
					text-align: center;

					text {
						padding: 2vw 0;
						display: inline-block;
						color: var(--f85Color);
						font-size: var(--font12Size);
					}
				}
			}
		}

		.scroll-view {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			.list-scroll-view {
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>