learn_applet/pages/home/index.vue

<template>
	<view class="content">
		<view class="one">
			<u-swiper :radius="0" :list="config.file" height="240px" indicator indicatorMode="dot" circular></u-swiper>
		</view>
		<view class="two" v-if="config.notice">
			<up-notice-bar :text="config.notice" duration="3000"></up-notice-bar>
		</view>
		<view class="thr">
			<view class="list" v-for="(item, index) in typeList" :key="index" @click="toList(item)">
				<text class="t-icon" :class="[item.remark]"></text>
				<view class="text">{{item.label}}</view>
			</view>
		</view>
		<view class="four">
			<up-tabs :list="subjectList" keyName="label" @click="toTab"></up-tabs>
		</view>
		<view class="five" v-if="total>0">
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in list" :key="index">
					<view class="list">
						<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>
				</up-list-item>
			</up-list>
		</view>
		<up-empty v-else mode="list" icon="/static/list.png"></up-empty>
		<view class="is_bottom" v-if="is_bottom">
			<text>{{config.bottom_title||'没有更多了！'}}</text>
		</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, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	const $apifile = inject('$apifile');
	// 基本信息
	const typeList = ref([]);
	const config = ref({ icon: [], logo: [], file: [] });
	// 列表
	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 subjectList = ref([]);
	const educationList = ref([]);
	// 遮罩层
	const show = ref(false);
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	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', is_show: true })
		// 学历
		res = await $api(`dictData`, 'GET', { code: 'education', is_use: '0' });
		if (res.errcode === 0) educationList.value = res.data;
		// 类型
		res = await $api(`dictData`, 'GET', { code: 'courseType', is_use: '0' });
		if (res.errcode === 0) typeList.value = res.data;
	};
	// 查询
	const search = async () => {
		const info : any = {
			skip: skip.value,
			limit: limit.value,
			status: '1',
			is_show: '0'
		}
		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 toTab = async (data) => {
		console.log(data);
	};
	const showChange = () => {
		show.value = false
	}
	// 去预约
	const toBuy = (item) => {
		uni.navigateTo({
			url: `/pagesHome/course/index?id=${item._id}`
		})
	}
	// 去查看
	const toList = (item) => {
		uni.navigateTo({
			url: `/pagesHome/list/index?type=${item.value}&name=${item.label}`
		})
	}
	const scrolltolower = () => {
		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 {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: var(--f1Color);

		.two {
			margin: 2vw 2vw 0 2vw;
			border-radius: 5px;
		}

		.thr {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: var(--mainColor);
			margin: 2vw;
			border-radius: 5px;
			padding: 2vw 4vw;

			.list {
				display: flex;
				flex-direction: column;
				align-items: center;

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

		.four {
			margin: 0 2vw;
			border-radius: 5px;
			background-color: var(--mainColor);
		}

		.five {
			margin: 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: 25vw;
						height: 25vw;
						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);
			}
		}
	}
</style>