fix load for scroll down

src/pages/management/CustomerDataCharts.vue

@@ -80,6 +80,7 @@
 			class="rank-refresh"
 			:refresh-timeout="30000"
 			@refresh="refreshCustomerRegistrationRank"
+			@scrolltolower="loadNextRankPage"
 		>
 			<div class="rank-content">
 				<div class="rank-summary" v-text="rankSummaryText"></div>
@@ -89,7 +90,7 @@
 					theme="card"
 				>
 					<t-cell
-						v-for="item in paginatedCustomerRegistrationRankList"
+						v-for="item in visibleCustomerRegistrationRankList"
 						:key="item.customerId"
 						class="item"
 						arrow
@@ -124,21 +125,7 @@
 					</t-cell>
 				</t-cell-group>
 				<div v-else class="empty-block" v-text="rankLoading ? '正在加载排行榜' : '暂无登记排行数据'" />
-				<div v-if="rankPaginationVisible" class="rank-pagination">
-					<t-button
-						variant="outline"
-						size="small"
-						:disabled="rankPageIndex < 2"
-						@click="changeRankPage(-1)"
-					>上一页</t-button>
-					<span class="page" v-text="`第 ${rankPageIndex} / ${rankPageCount} 页`" />
-					<t-button
-						variant="outline"
-						size="small"
-						:disabled="rankPageCount < rankPageIndex + 1"
-						@click="changeRankPage(1)"
-					>下一页</t-button>
-				</div>
+				<div v-if="1 < rankPageCount" class="rank-load-state" v-text="rankCanLoadMore ? '上拉加载更多' : '已加载全部'" />
 			</div>
 		</pull-down-refresh>
 		<customer-selector
@@ -336,12 +323,11 @@ const rankSummaryText = computed(() => {
 	}
 	return `范围：${rankDateFilterLabel.value}｜${rankRegistrationEventFilterLabel.value}`;
 });
-const paginatedCustomerRegistrationRankList = computed(() => {
-	const startIndex = (rankPageIndex.value - 1) * rankPageSize;
-	return customerRegistrationRankList.value.slice(startIndex, startIndex + rankPageSize);
+const visibleCustomerRegistrationRankList = computed(() => {
+	return customerRegistrationRankList.value.slice(0, rankPageIndex.value * rankPageSize);
 });
 const rankPageCount = computed(() => Math.max(1, Math.ceil(customerRegistrationRankList.value.length / rankPageSize)));
-const rankPaginationVisible = computed(() => 1 < rankPageCount.value);
+const rankCanLoadMore = computed(() => rankPageIndex.value < rankPageCount.value);
 
 watch(chartList, async () => {
 	await nextTick();
@@ -524,6 +510,7 @@ async function loadCustomerRegistrationRank(force = false): Promise<void> {
 
 	const token = rankRequestToken + 1;
 	rankRequestToken = token;
+	rankPageIndex.value = 1;
 	rankLoading.value = true;
 	let request = force ? undefined : rankPendingRequestMap.get(cacheKey);
 	if (!request) {
@@ -563,12 +550,11 @@ async function refreshCustomerRegistrationRank(): Promise<void> {
 	}
 }
 
-function changeRankPage(offset: number): void {
-	const nextPage = rankPageIndex.value + offset;
-	if (nextPage < 1 || rankPageCount.value < nextPage) {
+function loadNextRankPage(): void {
+	if (!rankCanLoadMore.value || rankLoading.value) {
 		return;
 	}
-	rankPageIndex.value = nextPage;
+	rankPageIndex.value += 1;
 }
 
 async function selectRankDateFilter(value: DropdownValue): Promise<void> {
@@ -1035,16 +1021,11 @@ function parseRankDateTime(value: string, isEnd: boolean): Date {
 		}
 	}
 
-	.rank-pagination {
-		gap: .75rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		.page {
+	.rank-load-state {
+		padding: .25rem 0;
 		color: #52607a;
 		font-size: .875rem;
-		}
+		text-align: center;
 	}
 
 	.chart-section {
@@ -1147,11 +1128,9 @@ function parseRankDateTime(value: string, isEnd: boolean): Date {
 			background: rgba(30, 41, 59, .9);
 		}
 
-		.rank-pagination {
-			.page {
+		.rank-load-state {
 			color: #94a3b8;
 		}
-		}
 
 	}
 }