|
|
@@ -1,4 +1,4 @@
|
|
|
-import { Text, View } from "@tarojs/components";
|
|
|
+import { Text, View, ScrollView } from "@tarojs/components";
|
|
|
import { useLoad, setNavigationBarTitle, navigateTo } from "@tarojs/taro";
|
|
|
import { timeFormat } from "../../../utils";
|
|
|
import { Image } from "@nutui/nutui-react-taro";
|
|
|
@@ -14,10 +14,14 @@ const MessageList = () => {
|
|
|
const [notificationList, setNotificationList] = useState<any[]>([]);
|
|
|
const [CommentPostId, setCommentPostId] = useState(0);
|
|
|
const [CommentParentCommentId, setCommentParentCommentId] = useState(0);
|
|
|
- const [type, setType] = useState("");
|
|
|
const [typeId, setTypeId] = useState("0");
|
|
|
+
|
|
|
+ // 分页相关状态
|
|
|
+ const [currentPage, setCurrentPage] = useState(1);
|
|
|
+ const [hasMore, setHasMore] = useState(true);
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
+ const [refreshing, setRefreshing] = useState(false);
|
|
|
useLoad((options) => {
|
|
|
- setType(options.type);
|
|
|
switch (options.type) {
|
|
|
case "like":
|
|
|
setTypeId("4,5");
|
|
|
@@ -51,24 +55,87 @@ const MessageList = () => {
|
|
|
markAsReadByTypeApi({ type_id });
|
|
|
};
|
|
|
|
|
|
- const getNotificationList = async () => {
|
|
|
- const res: any = await getNotificationListApi({
|
|
|
- type_id: typeId,
|
|
|
- page: 1,
|
|
|
- page_size: 10,
|
|
|
- });
|
|
|
- if (res.code === 200) {
|
|
|
- setNotificationList(res.data.list);
|
|
|
+ const getNotificationList = async (page = 1, isRefresh = false) => {
|
|
|
+ if (loading) return;
|
|
|
+
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ const res: any = await getNotificationListApi({
|
|
|
+ type_id: typeId,
|
|
|
+ page: page,
|
|
|
+ limit: 10,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ const { list, has_more } = res.data;
|
|
|
+ console.log("API response:", {
|
|
|
+ page,
|
|
|
+ listLength: list.length,
|
|
|
+ has_more,
|
|
|
+ totalCount: res.data.count,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isRefresh || page === 1) {
|
|
|
+ // 刷新或首次加载，替换数据
|
|
|
+ setNotificationList(list);
|
|
|
+ } else {
|
|
|
+ // 加载更多，追加数据
|
|
|
+ setNotificationList((prev) => [...prev, ...list]);
|
|
|
+ }
|
|
|
+
|
|
|
+ setCurrentPage(page);
|
|
|
+ setHasMore(has_more);
|
|
|
+ console.log("Updated state:", { currentPage: page, hasMore: has_more });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error("获取通知列表失败:", error);
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ setRefreshing(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ // 加载更多数据
|
|
|
+ const loadMore = () => {
|
|
|
+ console.log("loadMore triggered:", { hasMore, loading, currentPage });
|
|
|
+ if (hasMore && !loading) {
|
|
|
+ console.log("Loading next page:", currentPage + 1);
|
|
|
+ getNotificationList(currentPage + 1, false);
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+ // 下拉刷新
|
|
|
+ const onRefresh = () => {
|
|
|
+ setRefreshing(true);
|
|
|
+ setCurrentPage(1);
|
|
|
+ setHasMore(true);
|
|
|
+ getNotificationList(1, true);
|
|
|
+ };
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- getNotificationList();
|
|
|
+ // 重置分页状态
|
|
|
+ setCurrentPage(1);
|
|
|
+ setHasMore(true);
|
|
|
+ setNotificationList([]);
|
|
|
+ getNotificationList(1, true);
|
|
|
}, [typeId]);
|
|
|
return (
|
|
|
- <View className="bg-[#f8f8f8]">
|
|
|
- {notificationList.map((item) => {
|
|
|
+ <ScrollView
|
|
|
+ className="bg-[#f8f8f8] h-full"
|
|
|
+ scrollY
|
|
|
+ refresherEnabled
|
|
|
+ refresherTriggered={refreshing}
|
|
|
+ onRefresherRefresh={onRefresh}
|
|
|
+ onScrollToLower={loadMore}
|
|
|
+ lowerThreshold={50}
|
|
|
+ enhanced
|
|
|
+ showScrollbar={false}
|
|
|
+ >
|
|
|
+ {notificationList.map((item, index) => {
|
|
|
return (
|
|
|
- <View className="p-[10px] text-[14px] flex mb-[2px] bg-[#fff]">
|
|
|
+ <View
|
|
|
+ key={item.id || index}
|
|
|
+ className="p-[10px] text-[14px] flex mb-[2px] bg-[#fff]"
|
|
|
+ >
|
|
|
<View className="w-[50px] h-[50px] bg-[#000] rounded-[50%] overflow-hidden">
|
|
|
<Image
|
|
|
width={50}
|
|
|
@@ -155,6 +222,39 @@ const MessageList = () => {
|
|
|
);
|
|
|
})}
|
|
|
|
|
|
+ {/* 加载更多按钮 - 用于测试 */}
|
|
|
+ {hasMore && !loading && (
|
|
|
+ <View className="flex justify-center items-center py-[20px]">
|
|
|
+ <View
|
|
|
+ className="px-[20px] py-[10px] bg-[#007aff] rounded-[20px]"
|
|
|
+ onClick={loadMore}
|
|
|
+ >
|
|
|
+ <Text className="text-[14px] text-white">加载更多</Text>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 加载指示器 */}
|
|
|
+ {loading && (
|
|
|
+ <View className="flex justify-center items-center py-[20px]">
|
|
|
+ <Text className="text-[14px] text-[#999]">加载中...</Text>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 无更多数据提示 */}
|
|
|
+ {!hasMore && notificationList.length > 0 && (
|
|
|
+ <View className="flex justify-center items-center py-[20px]">
|
|
|
+ <Text className="text-[14px] text-[#999]">没有更多数据了</Text>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 空状态 */}
|
|
|
+ {!loading && notificationList.length === 0 && (
|
|
|
+ <View className="flex justify-center items-center py-[100px]">
|
|
|
+ <Text className="text-[14px] text-[#999]">暂无消息</Text>
|
|
|
+ </View>
|
|
|
+ )}
|
|
|
+
|
|
|
{showCommentInput ? (
|
|
|
<CommentInput
|
|
|
postId={CommentPostId}
|
|
|
@@ -166,7 +266,7 @@ const MessageList = () => {
|
|
|
}}
|
|
|
/>
|
|
|
) : null}
|
|
|
- </View>
|
|
|
+ </ScrollView>
|
|
|
);
|
|
|
};
|
|
|
|
