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="(item,index) in list" :key="index" @tap="toBuy(tag)">
									<view class="left">
										<image v-if="item.icon&&item.icon.length>0&&item.icon" class="image"
											:src="item.icon[0].url">
										</image>
										<image v-else class="image" :src="config.icon[0].url"></image>
									</view>
									<view class="right">
										<view class="right_1 textOne">
											{{item.name||'暂无'}}
										</view>
										<view class="right_2">
											<view class="text">老师： </view>
											<view class="value"> {{item.teacher_name||'暂无'}} </view>
										</view>
										<view class="right_3">
											<view class="text">
												<span class="text_1">最近可约：</span>
												<span class="text_2">{{item.start_time||'休息中'}}</span>
											</view>
										</view>
										<view class="right_4">
											<view class="money">￥{{item.money||'免费'}} </view>
											<view class="button">
												<button type="warn" size="mini" @click="toBuy(item)">预约</button>
											</view>
										</view>
									</view>
								</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 active = ref(0);
	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 scrollTop = ref(0);
	// 遮罩层
	const show = ref(false);
	const nick_name = ref('');
	// 字典表
	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: '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',
			type: type.value
		}
		if (nick_name.value) info.name = nick_name.value
		if (subject.value && subject.value !== '-1') info.subject = subject.value
		if (grade.value && grade.value !== '-1') info.grade = grade.value
		const res = await $api('course/appHome', '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 toChange = async (index, e) => {
		console.log(index, e);
		active.value = index
		subject.value = e.value
		await clearPage();
		await search();
	}
	// 改变标签
	const toTab = async (data) => {
		grade.value = data.value
		await clearPage();
		await search();
	};
	// 分页
	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 toScroll = (e) => {
		let up = scrollTop.value;
		scrollTop.value = e.detail.scrollTop
		let num = Math.sign(up - e.detail.scrollTop);
		if (num == 1) is_bottom.value = false
	}
	// 清空列表
	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: 20vw;
				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;
						margin: 2vw 0 0 0;
						padding: 2vw;
						border-radius: 5px;
						background-color: var(--mainColor);

						.left {
							width: 28%;
							margin: 0 2vw 0 0;

							.image {
								width: 20vw;
								height: 20vw;
								border-radius: 2vw;
							}

						}

						.right {
							width: 70%;

							.right_1 {
								font-size: var(--font16Size);
								font-weight: bold;
							}

							.right_2 {
								display: flex;
								align-items: center;
								margin: 1vw 0 0 0;

								.text {
									font-size: var(--font14Size);
									margin: 0 1vw 0 0;
								}

								.value {
									text-align: right;
									color: var(--f85Color);
									font-size: var(--font12Size);
								}
							}

							.right_3 {
								margin: 1vw 0;

								.text {
									font-size: var(--font12Size);
									text-align: center;
									border: 1px solid var(--3c9Color);
									border-radius: 4px;
									padding: 1vw;
									background: linear-gradient(to right, #ffffff, #3c9cff59);

									.text_1 {
										color: var(--3c9Color);
										font-weight: bold;
									}

									.text_2 {
										color: var(--ff0Color);
									}
								}
							}

							.right_4 {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.money {
									width: 50%;
									font-size: var(--font14Size);
									color: var(--ff0Color);
								}

								.button {
									width: 50%;
									text-align: right;

									button {
										color: var(--mainColor);
										background: linear-gradient(to right, #1e3fdc, #3c9cff);
										font-size: var(--font12Size);
										border-radius: 5vw;
									}
								}
							}
						}
					}
				}

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