match_applet/pagesHome/create/person.vue

<template>
	<view class="content">
		<view class="one">
			<input type="text" v-model="searchInfo.name" @input="toInput" placeholder="添加对手">
		</view>
		<view class="two">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
				<view class="list-scroll-view">
					<view class="title">约过的战队</view>
					<view class="list" v-for="(item, index) in list" :key="index" @tap="toSelect(item)">
						<view class="list_1">
							<view class="left">
								<image class="image" mode="aspectFill" :src="item.logo||config.logoUrl"></image>
							</view>
							<view class="right">
								<view class="name">
									{{item.name||'暂无名称'}}
								</view>
								<view class="other">
									<view class="other_1">{{item.city||'未入驻'}}</view>
									<view class="other_2">胜{{item.win||0}},平{{item.flat||0}},负{{item.burden||0}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="is_bottom" v-if="is_bottom">
						<text>{{config.bottomTitle||'到底了！'}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, toRefs, getCurrentInstance } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	interface PropsItem {
		id ?: number,
		name ?: string,
		logo ?: string,
		address ?: string,
		win ?: string,
		burden ?: string,
		flat ?: string,
	};
	// 用户信息
	const user = ref({});
	// 查询
	const searchInfo = ref({});
	// 列表
	const list = ref<PropsItem[]>([{ id: 1, name: '成都容城' }, { id: 1, name: 'YYDS|脏三疯' }]);
	// 分页
	const pageNum = ref(1);
	const pageSize = ref(10);
	const total = ref(0);
	// 基本信息
	const config = ref({});
	// 数据是否触底
	const scrollTop = ref(0);
	const is_bottom = ref(false);

	onShow(async () => {
		await searchConfig();
		await searchUser();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 用户信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// 查询约过的战队列表
	const search = async () => {
		const info = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			userId: user.value.id
		}
		const res = await $api('team/list', 'GET', {
			...info
		});
		if (res.code === 200) {
			list.value = res.rows
			total.value = res.total
		} else {
			uni.showToast({
				title: res.msg || '',
				icon: 'error',
			});
		}
	};
	// 查询球队列表
	const searchTeam = async () => {
		const info = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
		}
		const res = await $api('team/list', 'GET', {
			...info,
			...searchInfo
		});
		if (res.code === 200) {
			list.value = res.rows
			total.value = res.total
		} else {
			uni.showToast({
				title: res.msg || '',
				icon: 'error',
			});
		}
	};
	//查询
	const toInput = (e : any) => {
		if (searchInfo.value.name) searchInfo.value.name = e.detail.value
		searchInfo.value = {}
		clearPage();
		searchTeam();
	};
	// 选择战队
	const toSelect = (item : any) => {
		uni.$emit('opponentInfo', item);
		// 返回上一个页面
		uni.navigateBack({
			delta: 1
		})
	};
	// 分页
	const toPage = () => {
		if (total.value > list.value.length) {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			pageNum.value = pageNum.value + 1
			pageSize.value = pageNum.value * 10;
			search();
			uni.hideLoading();
		} else is_bottom.value = true
	};
	const toScroll = (e : any) => {
		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 = []
		pageNum.value = 1
		pageSize.value = 10
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 66vh;

		.one {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 2vw;
			border-bottom: 1px solid var(--f5Color);

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

		.two {
			position: relative;
			flex-grow: 1;

			.title {
				padding: 1vw 0;
				text-align: center;
				background-color: var(--f9Color);
			}

			.list {
				border-bottom: 1px solid var(--f5Color);
				padding: 3vw;

				.list_1 {
					display: flex;
					align-items: center;

					.left {
						width: 15vw;

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

					.right {
						width: 75vw;
						margin: 0 0 0 2vw;

						.name {
							font-size: var(--font16Size);
						}

						.other {
							display: flex;
							justify-content: space-between;
							margin: 1vw 0 0 0;
							font-size: var(--font14Size);
							color: var(--f85Color);
						}
					}
				}
			}
		}
	}

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

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

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

		text {
			padding: 2vw 0;
			display: inline-block;
			color: var(--f85Color);
			font-size: var(--font14Size);
		}
	}
</style>