commit

src/hooks/useNotify.ts

@@ -5,7 +5,6 @@ import { MessageType } from "~/types/store";
 import signGenerator from "~/utils/sign/sign";
 
 const useNotify = (path: string, isNotity: boolean) => {
-
   const baseUrl = `${process.env.REACT_APP_WS_URL}/api/v1/${path}`;
   const ws = useRef<any>(null);
   const filterMessage = useRef([] as MessageType[]);
@@ -30,6 +29,8 @@ const useNotify = (path: string, isNotity: boolean) => {
         event.origin === process.env.REACT_APP_WS_URL
       ) {
         let message = JSON.parse(event.data) as MessageType;
+        if (!message) return;
+        if (!message.id) return;
         let item = filterMessage.current.find((v) => v.id === message.id);
         if (item) return;
         filterMessage.current.unshift(message);

src/index.tsx

@@ -8,7 +8,7 @@ const root = ReactDOM.createRoot(
 );
 
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
   <App />
-  </React.StrictMode>
+  // </React.StrictMode>
 );

src/pages/no-share/index.tsx

@@ -10,14 +10,14 @@ import { UserInfo } from '~/types/store'
 
 const NoShare = () => {
 
-  const { location } = useRouter()
+  const { push, location } = useRouter()
   const state = location.state
   const [userInfo, setUserInfo] = useState({} as UserInfo)
   const tabs = useMemo(() => ['我的NFT', '我喜歡的NFT'], [])
 
   const getLength = (index: number) => {
-    if(!userInfo.my_like || !userInfo.my_nft ) return 0
-    if(index === 0) return userInfo.my_nft.length
+    if (!userInfo.my_like || !userInfo.my_nft) return 0
+    if (index === 0) return userInfo.my_nft.length
     return userInfo.my_like.length
   }
 
@@ -82,7 +82,7 @@ const NoShare = () => {
                   {
                     userInfo.my_like && userInfo.my_nft && <div className='row-between flex-wrap plr-3'>
                       {(index === 0 ? userInfo.my_nft : userInfo.my_like).map((item, index) => (
-                        <div key={index}>
+                        <div key={index} onClick={() => push("/detail", { id: item.id, type: item.type })}>
                           <ProductItem data={item} />
                         </div>
                       ))}

src/pages/record/index.tsx

@@ -5,8 +5,7 @@ import store from "~/store";
 import { observer } from "mobx-react";
 import { useRouter } from "~/hooks/useRouter";
 import BackBar from "~/components/BackBar";
-import { Cell, Empty, List, Tabs } from "react-vant";
-import { debounce } from 'lodash';
+import { Cell, Empty, List } from "react-vant";
 import '~/styles/personal.scss';
 import { history_record } from "~/api";
 
@@ -15,22 +14,24 @@ const Record = () => {
   const { token } = store.state;
   const { push, location } = useRouter()
 
-  const recordTabs = useMemo(() => ['充值', '提現', '收益'], []);
+  const recordTabs = useMemo(() => ['充值', '提現', '收益', '邀請收益'], []);
   const [recordIndex, setRecordIndex] = useState(location.state ? location.state.index : 0);
   const { copyVal } = useCopyLink();
   const [query, setQuery] = useState([
     { page: 1, page_size: 20 },
     { page: 1, page_size: 20 },
     { page: 1, page_size: 20 },
+    { page: 1, page_size: 20 },
   ]);
   const [finished, setFinished] = useState<boolean[]>([true, true, true]);
   const [assetsRecord, setAssetsRecord] = useState([
     [] as any[],
     [] as any[],
     [] as any[],
+    [] as any[],
   ]);
 
-  const getAssetsRecord = debounce(async () => {
+  const getAssetsRecord = async () => {
 
     let res: any = await history_record({ type: recordIndex + 1, ...query[recordIndex] });
     if (res.code === 0) {
@@ -56,13 +57,14 @@ const Record = () => {
       setAssetsRecord([...assetsRecord]);
       setQuery([...query]);
     };
-  }, 200);
+  };
 
   const renderItem = (index: number) => {
     let el = [
       <RechargeRecord list={assetsRecord[recordIndex]} copy={copyVal} finished={finished[recordIndex]} getData={getAssetsRecord} />,
       <WithdrawRecord list={assetsRecord[recordIndex]} copy={copyVal} finished={finished[recordIndex]} getData={getAssetsRecord} />,
       <TransferRecord list={assetsRecord[recordIndex]} finished={finished[recordIndex]} getData={getAssetsRecord} />,
+      <InviteIncomeRecord list={assetsRecord[recordIndex]} finished={finished[recordIndex]} getData={getAssetsRecord} />,
     ];
     return el[index];
   };
@@ -79,30 +81,21 @@ const Record = () => {
       <BackBar
         title='賬單'
       />
-      <Tabs
-        swipeable
-        type="capsule"
-        background="rgb(248,247,255)"
-        sticky
-        defaultActive={recordIndex}
-        offsetTop={window.innerWidth / 430 * 60}
-        onChange={(_, index) => setRecordIndex(index)}
-        align="start"
-        className="tabs"
-        lazyRender
-      >
+      <div className="tabs-sticky">
+        <div className="row-items mt-2 flex-1">
           {
-          recordTabs.map((item, index) => (
-            <Tabs.TabPane
-              key={index}
-              title={item}
-              titleStyle={{ width: 70, height: 30, padding: 0 }}
-            >
-              {renderItem(index)}
-            </Tabs.TabPane>
+            recordTabs.map((tx, index) => (
+              <div key={index} className={`mr-3 ${index === recordIndex ? 'black' : 'sub-text'} fz-wb-550`} onClick={() => setRecordIndex(index)}>{tx}</div>
             ))
           }
-      </Tabs>
+        </div>
+        <div style={{ width: '100%', height: 1 }} className="sub-text-bg mt-1"></div>
+      </div>
+
+      <div>
+        {renderItem(recordIndex)}
+      </div>
+
     </div>
   )
 }
@@ -121,7 +114,7 @@ const RechargeRecord = (
   if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
 
   return (
-    <List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
+    <List finished={finished} finishedText={list.length >= 20 && "已經到底了"} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
       {
         list.map((item) => (
           <Cell key={item.id} className="ptb-1" style={{ background: 'none' }}>
@@ -157,7 +150,7 @@ const WithdrawRecord = ({ list, finished, getData, copy }: ChildProps) => {
   if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
 
   return (
-    <List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
+    <List finished={finished} finishedText={list.length >= 20 && "已經到底了"} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
       {
         list.map((item, index) => (
           <Cell className='ptb-1' key={item.id} style={{ background: 'none' }}>
@@ -193,7 +186,7 @@ const TransferRecord = ({ list, finished, getData }: ChildProps) => {
   if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
 
   return (
-    <List finished={finished} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
+    <List finished={finished} finishedText={list.length >= 20 && "已經到底了"} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
       {
         list.map((item, index) => (
           <Cell className="ptb-1" key={item.id} style={{ background: 'none' }}>
@@ -216,4 +209,27 @@ const TransferRecord = ({ list, finished, getData }: ChildProps) => {
   )
 }
 
+const InviteIncomeRecord = ({ list, finished, getData }: ChildProps) => {
+
+  if (list.length <= 0 || Object.keys(list).length <= 0) return <Empty description="暫無記錄" />;
+
+  return (
+    <List finished={finished} finishedText={list.length >= 20 && "已經到底了"} onLoad={() => getData()} errorText="請求失敗，點擊重新加載" offset={10}>
+      {
+        list.map((item, index) => (
+          <Cell className="ptb-1" key={item.id} style={{ background: 'none' }}>
+            <div className="row-between">
+              <div>
+                <div className='fz-wb-550'> {item.name}</div>
+                <div className='sub-color fz-14 mt-6px'>{getTime(item.time * 1000)}</div>
+              </div>
+              <div className="fz-wb-550 green">+{toThousands(item.amount)} {item.symbol}</div>
+            </div>
+          </Cell>
+        ))
+      }
+    </List>
+  )
+}
+
 export default observer(Record);

src/styles/personal.scss

@@ -46,6 +46,12 @@
 }
 
 .record{
+  .tabs-sticky{
+    position: sticky;
+    top: 60px;
+    background-color: $page;
+    z-index: 1;
+  }
   .tabs{
     padding: 10px 0px;
     .rv-tabs__nav--capsule .rv-tab.rv-tab--active .rv-tab__text {
@@ -135,7 +141,4 @@
     }
   }
 
-  .swiper-height{
-    // height: 460px;
-  }
 }