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">
				<text class="t-icon" :class="[item.icon]"></text>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
		<view class="four">
			<up-tabs :list="subjectList" keyName="label" @click="toTab"></up-tabs>
		</view>
		<view class="five">
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in list" :key="index">
					<up-cell :title="`列表长度-${index + 1}`">
						<template #icon>
							<up-avatar shape="square" size="35" :src="item.url"
								customStyle="margin: -3px 5px -3px 0"></up-avatar>
						</template>
					</up-cell>
				</up-list-item>
			</up-list>
		</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([
		{ name: '兴趣', icon: 't-icon-xingqu', type: '0' },
		{ name: '小学', icon: 't-icon-xiaoxue', type: '1' },
		{ name: '中学', icon: 't-icon-zhongxue', type: '2' },
		{ name: '高中', icon: 't-icon-gaozhong', type: '3' },
	]);
	const config = ref({ icon: [], logo: [], file: [] });
	const list = ref([]);
	const total = ref(0);
	// 字典表
	const subjectList = ref([]);
	// 遮罩层
	const show = ref(false);
	// user
	const user = computed(() => {
		return uni.getStorageSync('user');
	})
	onShow(async () => {
		await searchConfig();
		await searchOther();
		await search();
		if (!user.value) show.value = true
		loadmore();
	})
	const urls = [
		'https://cdn.uviewui.com/uview/album/1.jpg',
		'https://cdn.uviewui.com/uview/album/2.jpg',
		'https://cdn.uviewui.com/uview/album/3.jpg',
		'https://cdn.uviewui.com/uview/album/4.jpg',
		'https://cdn.uviewui.com/uview/album/5.jpg',
		'https://cdn.uviewui.com/uview/album/6.jpg',
		'https://cdn.uviewui.com/uview/album/7.jpg',
		'https://cdn.uviewui.com/uview/album/8.jpg',
		'https://cdn.uviewui.com/uview/album/9.jpg',
		'https://cdn.uviewui.com/uview/album/10.jpg',
	];

	const scrolltolower = () => {
		loadmore();
	};
	const loadmore = () => {
		for (let i = 0; i < 30; i++) {
			list.value.push({
				url: urls[uni.$u.random(0, urls.length - 1)],
			});
		}
	};
	// 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;
	};
	// 查询
	const search = async () => { };
	// 改变标签
	const toTab = async (data) => {
		console.log(data);
	};
	const showChange = () => {
		show.value = false
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		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: 4vw;

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

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

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

		.five {
			margin: 2vw;
			border-radius: 5px;
			background-color: var(--mainColor);
		}
	}
</style>