match_applet/pages/home/components/activity.vue

<template>
	<view class="main">
		<view class="first">
			<input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索活动名称">
		</view>
		<view class="second">
			<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
				<view class="list-scroll-view">
					<view class="other">
						<view class="other_1">
							<view class="drop" v-for="(item, index) in list" :key="index">
								.
								<view class="line"></view>
							</view>
						</view>
						<view class="other_2">
							<view class="list" v-for="(item, index) in list" :key="index" @tap="toInfo(item)">
								<view class="list_1">
									<view class="date">{{item.date||'暂无日期'}}</view>
									<view class="status"
										:class="[item.status=='0'?'status0':item.status=='1'?'status1':'status2']">
										{{item.status_name||'暂无状态'}}
									</view>
								</view>
								<view class="list_2">
									<view class="name">{{item.name||'暂无活动名称'}}</view>
									<view class="score">
										<view class="red">
											<view class="red_name">{{item.red_name||'暂无红方名称'}}</view>
											<view class="red_image">
												<image class="image" mode="aspectFill"
													:src="item.red_logo||config.logoUrl"></image>
											</view>
											<view class="red_score">{{item.red_score||0}}</view>
										</view>
										<view class="center">:</view>
										<view class="blue">
											<view class="blue_score">{{item.blue_score||0}}</view>
											<view class="blue_image">
												<image class="image" mode="aspectFill"
													:src="item.blue_logo||config.logoUrl"></image>
											</view>
											<view class="blue_name">{{item.blue_name||'暂无蓝方名称'}}</view>
										</view>
									</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 } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow } from "@dcloudio/uni-app";
	interface PropsItem {
		id ?: number,
		name ?: string,
		date ?: string,
		red_name ?: string,
		red_score ?: number,
		red_logo ?: string,
		blue_name ?: string,
		blue_score ?: number,
		blue_logo ?: string,
		status ?: string,
		status_name ?: string,
	};
	// 基本信息
	const config = ref({ bottomTitle: '', logoUrl: '' });
	// 查询
	const searchInfo = ref({ name: '' });
	// 列表
	const list = ref<PropsItem[]>([{ id: 1, name: '测试球队' }, { id: 1, name: '肝帝集团队' }]);
	// 分页
	const skip = ref(0);
	const limit = ref(6);
	const page = ref(0);
	const total = ref(0);
	// 数据是否触底
	const scrollTop = ref(0);
	const is_bottom = ref(false);

	onShow(() => {
		searchConfig();
		search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询列表
	const search = async () => {
		console.log('查询');
	};
	//查询
	const toInput = (e : any) => {
		if (searchInfo.value.name) searchInfo.value.name = e.detail.value
		searchInfo.value = { name: '' }
		clearPage();
		search();
	};
	// 活动详情
	const toInfo = (item : any) => {
		uni.navigateTo({
			url: `/pagesHome/activity/info?id=${item._id || item.id}&name=${item.name}`,
		})
	};
	// 分页
	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 : 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 = []
		skip.value = 0
		limit.value = 6
		page.value = 0
	};
</script>
<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 66vh;

		.first {
			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;
			}
		}

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

			.other {
				display: flex;

				.other_1 {
					padding: 2vw 2vw 2vw 5vw;
					font-size: 20px;
					font-weight: bold;

					.line {
						height: 18vh;
						margin: 0 0 0 2px;
						border-left: 1px dashed var(--f99Color);
					}

				}

				.other_2 {
					width: 90%;

					.list {
						.list_1 {
							display: flex;
							align-items: center;
							padding: 4vw 2vw 2vw 2vw;

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

							.status {
								font-size: var(--font12Size);
								margin: 0 1vw;
								padding: 1px 5px;
							}

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

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

							.status2 {
								color: var(--f99Color);
								background-color: var(--f9Color);
							}
						}

						.list_2 {
							border: 1px solid var(--f5Color);
							padding: 2vw;
							border-radius: 2px;

							.name {
								font-size: var(--font16Size);
								font-weight: bold;
								margin: 2vw;
							}

							.score {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: var(--font14Size);
								background-color: var(--f9Color);
								border-radius: 5vw;
								padding: 1vw 0;

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

									.red_image {
										margin: 0 1vw;

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

									.red_score {
										font-size: var(--font16Size);
										color: var(--fF0Color);
									}
								}

								.center {
									font-size: var(--font16Size);
									color: var(--fF0Color);
								}

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

									.blue_image {
										margin: 0 1vw;

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

									.blue_score {
										font-size: var(--font16Size);
										color: var(--fF0Color);
									}
								}
							}
						}
					}
				}
			}
		}
	}

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