token转账增加分页+被删除项目展示

src/forge/users/contribution/index.jsx

@@ -12,8 +12,7 @@ import { FlexAJ } from '../../Component/layout';
 
 // 个人中心-贡献确权
 function Contribution(props){
-  // 接口暂不支持分页
-  const limit = 15;
+  const limit = 10;
   const [page, setPage] = useState(1);
   const [total, setTotal] = useState(undefined);
   // 转账列表
@@ -34,13 +33,30 @@ function Contribution(props){
 
   useEffect(()=>{
     // token转账列表
-    axios.get(`/users/blockchain/balance.json`,{params: {user_id}}).then(res=>{
+    axios.get(`/users/blockchain/balance.json`,{params: {
+      user_id,
+      limit,
+      page
+    }}).then(res=>{
       if(res && res.data){
-        setList(res.data.projects);
+        const {projects} = res.data;
+        const newProjects = [];
+        let deleteProjectCount = 0;
+        projects.map(item=>{
+          if(item.id){
+            newProjects.unshift(item);
+          }else{
+            deleteProjectCount++;
+          }
+        })
+        deleteProjectCount && newProjects.push({
+          'balance': deleteProjectCount
+        })
+        setList(newProjects);
         setTotal(res.data.total_count);
       }
     })
-  }, [reload])
+  }, [reload, page])
 
   useEffect(()=>{
     if(user){
@@ -115,7 +131,7 @@ function Contribution(props){
         <div className='tableColumn5'>操作</div>
       </div>}
       {list && !list.length && <Nodata _html="暂无数据"/>}
-      {list && list.map(item=>{return <div key={item.id} className='flexCenterCont transferAccount'>
+      {list && list.map(item=>{return item.id ? <div key={item.id} className='flexCenterCont transferAccount'>
         <div className='tableColumn1'>{item.name}</div>
         <div className='tableColumn2'>{item.balance}</div>
         <div className='tableColumn3'>
@@ -127,7 +143,7 @@ function Contribution(props){
           {proId === item.id && error2 && <div className='errorTipTri'>{error2}</div>}
         </div>
         <div className='tableColumn5'><Button className='confirmTransfer' onClick={()=>{confirmTransfer(item.id, item.identifier, item.balance)}}>确认</Button></div>
-      </div>})}
+      </div>: <div className='flexCenterCont transferAccount deleteRepo'>{item.balance}个项目被删除</div>})}
     </div> : <div className='contributionTable mt20 record'>
       <FlexAJ className='contributionRecordItem font-15'>
         <span><span className='themeSpan'>蒋宇航</span>在<span className='themeSpan'>GilLink/确实开源</span>给你转账了1000个tiken</span>
@@ -138,9 +154,9 @@ function Contribution(props){
         <span className='tableHeadTri'>6小时前</span>
       </FlexAJ>
     </div>}
-    {/* {total > limit && <div className='mt20 paginationTri'>
+    {total > limit && <div className='mt20 paginationTri mb50'>
       <Pagination simple current={page} pageSize={limit} total={total} onChange={(page)=>setPage(page)}/>
-    </div>} */}
+    </div>}
   </div>
   )
 }

src/forge/users/contribution/index.scss

@@ -40,6 +40,9 @@
     padding: 15px 0;
     border-bottom: 1px solid #eee;
   }
+  .deleteRepo{
+    color: slategrey;
+  }
   .tableColumn3, .tableColumn4{
     width: 200px;
   }