|
|
@@ -1,6 +1,6 @@
|
|
|
"use client";
|
|
|
// import Image from "next/image";
|
|
|
-import React, { useState, useEffect, useRef } from "react";
|
|
|
+import React, { useState, useEffect, useRef, useCallback } from "react";
|
|
|
|
|
|
// 模拟积分明细数据(可替换为接口请求)
|
|
|
const mockPointsData = [
|
|
|
@@ -130,24 +130,53 @@ const PointsDetails = () => {
|
|
|
|
|
|
// 每页展示12条
|
|
|
const PAGE_SIZE = 12;
|
|
|
+ const fetchData = useCallback((page: number, tab: string) => {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ let data = mockPointsData;
|
|
|
+ const prePage = page - 1;
|
|
|
+ const start = prePage * PAGE_SIZE;
|
|
|
+ const end = page * PAGE_SIZE;
|
|
|
+ if (tab === "rewarded") {
|
|
|
+ data = mockPointsData.filter(
|
|
|
+ (item) => item.type === "rewarded",
|
|
|
+ );
|
|
|
+ } else if (tab === "used") {
|
|
|
+ data = mockPointsData.filter((item) => item.type === "used");
|
|
|
+ }
|
|
|
+ const res = data.slice(start, end);
|
|
|
+ resolve(res);
|
|
|
+ }, 800);
|
|
|
+ });
|
|
|
+ },[]);
|
|
|
+ // 加载更多数据
|
|
|
+ const loadMore = useCallback(() => {
|
|
|
+
|
|
|
+ setLoading(true);
|
|
|
+
|
|
|
+ fetchData(page+1,activeTab).then((res) => {
|
|
|
|
|
|
- // 初始化/标签切换时重置数据
|
|
|
+ setListData(res);
|
|
|
+
|
|
|
+ setLoading(false);
|
|
|
+ setPage(page+1);
|
|
|
+ if(res.length < PAGE_SIZE) {
|
|
|
+ setHasMore(false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },[fetchData,page,activeTab]);
|
|
|
+
|
|
|
+ // 初始化
|
|
|
useEffect(() => {
|
|
|
- setPage(1);
|
|
|
- setHasMore(true);
|
|
|
// 筛选数据
|
|
|
- let filteredData = mockPointsData;
|
|
|
- if (activeTab === "rewarded") {
|
|
|
- filteredData = mockPointsData.filter((item) => item.type === "rewarded");
|
|
|
- } else if (activeTab === "used") {
|
|
|
- filteredData = mockPointsData.filter((item) => item.type === "used");
|
|
|
- }
|
|
|
- // 第一页数据
|
|
|
- const firstPageData = filteredData.slice(0, PAGE_SIZE);
|
|
|
- setListData(firstPageData);
|
|
|
- // 判断是否有更多数据
|
|
|
- setHasMore(filteredData.length > PAGE_SIZE);
|
|
|
- }, [activeTab]);
|
|
|
+ fetchData(1,'all').then((result)=> {
|
|
|
+
|
|
|
+ setListData(result);
|
|
|
+ // 判断是否有更多数据
|
|
|
+ setHasMore(!(result.length < PAGE_SIZE));
|
|
|
+ });
|
|
|
+
|
|
|
+ }, []);
|
|
|
|
|
|
// 监听滚动:触底加载
|
|
|
useEffect(() => {
|
|
|
@@ -168,45 +197,13 @@ const PointsDetails = () => {
|
|
|
container.addEventListener("scroll", handleScroll);
|
|
|
return () => container.removeEventListener("scroll", handleScroll);
|
|
|
}
|
|
|
- }, [loading, hasMore]);
|
|
|
-
|
|
|
- // 加载更多数据
|
|
|
- const loadMore = () => {
|
|
|
- if (loading) return;
|
|
|
-
|
|
|
- setLoading(true);
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- let filteredData = mockPointsData;
|
|
|
-
|
|
|
- if (activeTab === "rewarded") {
|
|
|
- filteredData = mockPointsData.filter(
|
|
|
- (item) => item.type === "rewarded",
|
|
|
- );
|
|
|
- } else if (activeTab === "used") {
|
|
|
- filteredData = mockPointsData.filter((item) => item.type === "used");
|
|
|
- }
|
|
|
-
|
|
|
- setPage((prevPage) => {
|
|
|
- const nextPage = prevPage + 1;
|
|
|
-
|
|
|
- const start = (nextPage - 1) * PAGE_SIZE;
|
|
|
- const end = nextPage * PAGE_SIZE;
|
|
|
-
|
|
|
- const newData = filteredData.slice(start, end);
|
|
|
-
|
|
|
- if (newData.length > 0) {
|
|
|
- setListData((prev) => [...prev, ...newData]);
|
|
|
- } else {
|
|
|
- setHasMore(false);
|
|
|
- }
|
|
|
-
|
|
|
- setLoading(false);
|
|
|
+ }, [loading, hasMore, loadMore]);
|
|
|
|
|
|
- return nextPage;
|
|
|
- });
|
|
|
- }, 800);
|
|
|
- };
|
|
|
+ const clickActiveTab = (tab: string) => {
|
|
|
+ setActiveTab(tab);
|
|
|
+ setPage(1);
|
|
|
+ fetchData(1, tab);
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<div className="min-h-screen bg-white">
|
|
|
@@ -225,7 +222,7 @@ const PointsDetails = () => {
|
|
|
{/* 标签切换栏 */}
|
|
|
<div className="flex border-b border-gray-200">
|
|
|
<button
|
|
|
- onClick={() => setActiveTab("all")}
|
|
|
+ onClick={() => clickActiveTab("all")}
|
|
|
className={`px-6 py-3 font-medium text-sm ${
|
|
|
activeTab === "all"
|
|
|
? "bg-black text-white"
|
|
|
@@ -235,7 +232,7 @@ const PointsDetails = () => {
|
|
|
ALL
|
|
|
</button>
|
|
|
<button
|
|
|
- onClick={() => setActiveTab("rewarded")}
|
|
|
+ onClick={() => clickActiveTab("rewarded")}
|
|
|
className={`px-6 py-3 font-medium text-sm ${
|
|
|
activeTab === "rewarded"
|
|
|
? "bg-black text-white"
|
|
|
@@ -245,7 +242,7 @@ const PointsDetails = () => {
|
|
|
REWARDED
|
|
|
</button>
|
|
|
<button
|
|
|
- onClick={() => setActiveTab("used")}
|
|
|
+ onClick={() => clickActiveTab("used")}
|
|
|
className={`px-6 py-3 font-medium text-sm ${
|
|
|
activeTab === "used"
|
|
|
? "bg-black text-white"
|