feat: withdraw

src/pages/withdraw-record/index.tsx

@@ -1,14 +1,119 @@
 import { useShareAppMessage } from '@tarojs/taro';
 
+import { List, PullRefresh } from '@taroify/core';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import ListPlaceholder from '@/components/list-placeholder';
+import { WithdrawStatusDescriptions } from '@/constants/partner';
+import useInviteCode from '@/hooks/use-invite-code';
+import { WithdrawRecord } from '@/types/partner';
+import { logWithPrefix } from '@/utils/common';
+import { formatMoney, formatTimestamp, getWithdrawList as requestData } from '@/utils/partner';
 import { getCommonShareMessage } from '@/utils/share';
+
 import './index.less';
 
 const PREFIX = 'withdraw-record';
+const log = logWithPrefix(PREFIX);
+const FIRST_PAGE = 0;
 
-export default function WithdrawRecord() {
+export default function WithdrawRecords() {
+  const inviteCode = useInviteCode();
+  const [hasMore, setHasMore] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [loadMoreError, setLoadMoreError] = useState(false);
+  const [dataList, setDataList] = useState<WithdrawRecord[]>([]);
+  const currentPage = useRef<number>(FIRST_PAGE);
+
+  const handleRefresh = useCallback(async () => {
+    log('start pull refresh');
+    try {
+      setRefreshing(true);
+      setLoadMoreError(false);
+      const { content, totalPages } = await requestData({ page: 1 });
+      setDataList(content);
+      currentPage.current = 1;
+      setHasMore(currentPage.current < totalPages);
+      log('pull refresh success');
+    } catch (e) {
+      setDataList([]);
+      setHasMore(false);
+      setLoadMoreError(true);
+      currentPage.current = FIRST_PAGE;
+      log('pull refresh failed');
+    } finally {
+      setRefreshing(false);
+    }
+  }, []);
+
+  const handleLoadMore = useCallback(async () => {
+    log('start load more', hasMore);
+    if (!hasMore) {
+      return;
+    }
+    setLoadMoreError(false);
+    setLoadingMore(true);
+    try {
+      const { totalPages, content } = await requestData({ page: currentPage.current + 1 });
+      setDataList([...dataList, ...content]);
+      currentPage.current = currentPage.current + 1;
+      setHasMore(currentPage.current < totalPages);
+      log('load more success');
+    } catch (e) {
+      setLoadMoreError(true);
+      log('load more failed');
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [dataList, hasMore]);
+  // 初始化数据&配置变更后刷新数据
+  useEffect(() => {
+    const refresh = async () => {
+      log('visible changed, start refresh list data');
+      try {
+        setDataList([]);
+        setLoadingMore(true);
+        setLoadMoreError(false);
+        const { totalPages, content } = await requestData({ page: 1 });
+        setDataList(content);
+        currentPage.current = 1;
+        setHasMore(currentPage.current < totalPages);
+      } catch (e) {
+        setDataList([]);
+        setHasMore(false);
+        setLoadMoreError(true);
+      } finally {
+        log('visible changed, refresh list data end');
+        setLoadingMore(false);
+      }
+    };
+    refresh();
+  }, []);
   useShareAppMessage(() => {
-    return getCommonShareMessage(false);
+    return getCommonShareMessage(false, inviteCode);
   });
 
-  return <div className={PREFIX}></div>;
+  return (
+    <div className={PREFIX}>
+      <PullRefresh className={`${PREFIX}__pull-refresh`} loading={refreshing} onRefresh={handleRefresh}>
+        <List hasMore={hasMore} onLoad={handleLoadMore} loading={loadingMore || refreshing} disabled={loadMoreError}>
+          {dataList.map(item => (
+            <div className={`${PREFIX}__item`} key={item.id || item.userId}>
+              <div className={`${PREFIX}__item-border`}>
+                <div className={`${PREFIX}__item-content`}>
+                  <div className={`${PREFIX}__item-time`}>{formatTimestamp(item.created)}</div>
+                  <div className={`${PREFIX}__item-withdraw`}>
+                    <div className={`${PREFIX}__item-money`}>{formatMoney(item.amt)}</div>
+                    <div className={`${PREFIX}__item-status`}>{WithdrawStatusDescriptions[item.status]}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+          <ListPlaceholder hasMore={false} loadingMore={loadingMore} loadMoreError={loadMoreError} />
+        </List>
+      </PullRefresh>
+    </div>
+  );
 }