timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix load for scroll down

Browse Source
This commit is contained in:
Timi
2026-08-04 11:56:33 +08:00
parent 089d356b77
commit 22ff13b1fe
1 changed files with 17 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/management/CustomerDataCharts.vue
+14 -35
View File
@@ -80,6 +80,7 @@
class="rank-refresh" class="rank-refresh"
:refresh-timeout="30000" :refresh-timeout="30000"
@refresh="refreshCustomerRegistrationRank" @refresh="refreshCustomerRegistrationRank"
@scrolltolower="loadNextRankPage"
> >
<div class="rank-content"> <div class="rank-content">
<div class="rank-summary" v-text="rankSummaryText"></div> <div class="rank-summary" v-text="rankSummaryText"></div>
@@ -89,7 +90,7 @@
theme="card" theme="card"
> >
<t-cell <t-cell
v-for="item in paginatedCustomerRegistrationRankList" v-for="item in visibleCustomerRegistrationRankList"
:key="item.customerId" :key="item.customerId"
class="item" class="item"
arrow arrow
@@ -124,21 +125,7 @@
</t-cell> </t-cell>
</t-cell-group> </t-cell-group>
<div v-else class="empty-block" v-text="rankLoading ? '正在加载排行榜' : '暂无登记排行数据'" /> <div v-else class="empty-block" v-text="rankLoading ? '正在加载排行榜' : '暂无登记排行数据'" />
<div v-if="rankPaginationVisible" class="rank-pagination"> <div v-if="1 < rankPageCount" class="rank-load-state" v-text="rankCanLoadMore ? '上拉加载更多' : '已加载全部'" />
<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> </div>
</pull-down-refresh> </pull-down-refresh>
<customer-selector <customer-selector
@@ -336,12 +323,11 @@ const rankSummaryText = computed(() => {
} }
return `范围：${rankDateFilterLabel.value}｜${rankRegistrationEventFilterLabel.value}`; return `范围：${rankDateFilterLabel.value}｜${rankRegistrationEventFilterLabel.value}`;
}); });
const paginatedCustomerRegistrationRankList = computed(() => { const visibleCustomerRegistrationRankList = computed(() => {
const startIndex = (rankPageIndex.value - 1) * rankPageSize; return customerRegistrationRankList.value.slice(0, rankPageIndex.value * rankPageSize);
return customerRegistrationRankList.value.slice(startIndex, startIndex + rankPageSize);
}); });
const rankPageCount = computed(() => Math.max(1, Math.ceil(customerRegistrationRankList.value.length / 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 () => { watch(chartList, async () => {
await nextTick(); await nextTick();
@@ -524,6 +510,7 @@ async function loadCustomerRegistrationRank(force = false): Promise<void> {
const token = rankRequestToken + 1; const token = rankRequestToken + 1;
rankRequestToken = token; rankRequestToken = token;
rankPageIndex.value = 1;
rankLoading.value = true; rankLoading.value = true;
let request = force ? undefined : rankPendingRequestMap.get(cacheKey); let request = force ? undefined : rankPendingRequestMap.get(cacheKey);
if (!request) { if (!request) {
@@ -563,12 +550,11 @@ async function refreshCustomerRegistrationRank(): Promise<void> {
} }
} }
function changeRankPage(offset: number): void { function loadNextRankPage(): void {
const nextPage = rankPageIndex.value + offset; if (!rankCanLoadMore.value || rankLoading.value) {
if (nextPage < 1 || rankPageCount.value < nextPage) {
return; return;
} }
rankPageIndex.value = nextPage; rankPageIndex.value += 1;
} }
async function selectRankDateFilter(value: DropdownValue): Promise<void> { async function selectRankDateFilter(value: DropdownValue): Promise<void> {
@@ -1035,16 +1021,11 @@ function parseRankDateTime(value: string, isEnd: boolean): Date {
} }
} }
.rank-pagination { .rank-load-state {
gap: .75rem; padding: .25rem 0;
display: flex;
align-items: center;
justify-content: center;
.page {
color: #52607a; color: #52607a;
font-size: .875rem; font-size: .875rem;
} text-align: center;
} }
.chart-section { .chart-section {
@@ -1147,11 +1128,9 @@ function parseRankDateTime(value: string, isEnd: boolean): Date {
background: rgba(30, 41, 59, .9); background: rgba(30, 41, 59, .9);
} }
.rank-pagination { .rank-load-state {
.page {
color: #94a3b8; color: #94a3b8;
} }
}
} }
} }