feat: withdraw

src/pages/partner/index.tsx

@@ -1,20 +1,23 @@
 import { useShareAppMessage } from '@tarojs/taro';
 
 import { Tabs } from '@taroify/core';
+import { useState } from 'react';
 
 import PartnerIntro from '@/components/partner-intro';
 import PartnerInviteList from '@/components/partner-invite-list';
 import PartnerProfit from '@/components/partner-profit';
 import useInviteCode from '@/hooks/use-invite-code';
 import { getCommonShareMessage } from '@/utils/share';
-
 import './index.less';
 
 const PREFIX = 'partner';
 
 export default function Partner() {
   const inviteCode = useInviteCode();
-
+  const [tab, setTab] = useState<number>(0);
+  const handleChange = v => {
+    setTab(v);
+  };
   useShareAppMessage(() => {
     console.log('Partner inviteCode', inviteCode);
     return getCommonShareMessage(false, inviteCode);
@@ -22,12 +25,12 @@ export default function Partner() {
 
   return (
     <div className={PREFIX}>
-      <Tabs className={`${PREFIX}__tabs`}>
+      <Tabs className={`${PREFIX}__tabs`} value={tab} onChange={handleChange}>
         <Tabs.TabPane value={0} title="简介">
           <PartnerIntro />
         </Tabs.TabPane>
         <Tabs.TabPane value={1} title="邀请名单">
-          <PartnerInviteList />
+          <PartnerInviteList refreshDisabled={tab !== 1} visible={tab === 1} />
         </Tabs.TabPane>
         <Tabs.TabPane value={2} title="我的收益">
           <PartnerProfit />

src/pages/withdraw-record/index.less

@@ -2,4 +2,52 @@
 @import '@/styles/variables.less';
 
 .withdraw-record {
+  &__item {
+    height: 131px;
+    width: 100%;
+    background: #fff;
+    padding: 24px 32px 0 32px;
+    box-sizing: border-box;
+    font-size: 28px;
+
+    &-border {
+      border-bottom: 1px solid #e6e7e8;
+    }
+
+    &-content {
+      .flex-row();
+      width: 100%;
+      padding-bottom: 24px;
+    }
+
+    &-time {
+      padding-right: 8px;
+      line-height: 40px;
+      flex: 1;
+      .noWrap();
+    }
+
+    &-withdraw {
+      width: 200px;
+      text-align: right;
+      padding-left: 8px;
+      flex-shrink: 0;
+    }
+
+    &-money {
+      line-height: 40px;
+      padding-bottom: 8px;
+      .noWrap();
+      font-weight: 600;
+      font-size: 30px;
+      color: #ff5051;
+    }
+
+    &-status {
+      font-size: 24px;
+      line-height: 36px;
+      color: #999999;
+      .noWrap();
+    }
+  }
 }

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>
+  );
 }