--预存款部分页面完成

src/pages/creditUsed/index.tsx

@@ -1,68 +1,40 @@
-
-import AddressList from "@/components/AddressList"
-import InfiniteScroll from "@/components/infiniteScroll"
+import InfiniteScrollPaging from "@/components/InfiniteScrollPaging"
 import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components"
 import Taro, { useReady } from "@tarojs/taro"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {creditListApi} from "@/api/creditLine"
 import "./index.scss"
+import { formatDateTime } from "@/common/fotmat"
+import { dataLoadingStatus, getFilterData } from "@/common/util";
 
 export default ()=>{
-  useEffect(()=>{
-    getData();
-  }, [])
   const {fetchData, state} = creditListApi();
-  const data = Array.from({length: 10});
-  const getData = async ()=>{
-    fetchData();
-  }
-  // 刷新
-  const [refreshData, setRefreshData] = useState({
-    refreshStatus: false,
-    moreStatus: false
-  })
-  const handleRefresh = async ()=>{
-    setRefreshData({
-      ...refreshData,
-      refreshStatus: true
+  // 渲染（数据）
+  const [data, setData] = useState({
+    list: [],
+    total: 0
+  });
+  const handleChange = useCallback((result)=>{
+    setData({
+      list: result.data.list,
+      total: result.data.total
     })
-    
-
-    setTimeout(()=>{
-      setRefreshData({
-        ...refreshData,
-        moreStatus: false
-      })
-    }, 3000)
-  }
-  const handleMoreLoad = async ()=>{
-    setRefreshData({
-      ...refreshData,
-      moreStatus: true
-    })
-
-    setTimeout(()=>{
-      setRefreshData({
-        ...refreshData,
-        refreshStatus: false
-      })
-    },3000)
-  }
+  }, [])
 
   return (
     <View className="credit-used">
-      <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad}>
+      <InfiniteScrollPaging fetchData={fetchData} change={handleChange}>
         {
-          data.map((item,index)=>{
+          (data as any)?.list?.map((item,index)=>{
             return (
               <View key={index} className="credit-used-list">
                 <View className="credit-used-list-top">
                   <View className="credit-used-list-type">下单</View>
-                  <View className={`credit-used-list-price ${index%2==0?'green':'red'}`}>-999,999.00</View>
+                  <View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
                 </View>
                 <View className="credit-used-list-bottom">
-                  <View className="credit-used-list-date">2022-04-24 16:10:11</View>
-                  <View className="credit-used-list-orderno">订单号：LY2278204399678</View>
+                  <View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
+                  <View className="credit-used-list-orderno">订单号：{item.order_no}</View>
                 </View>
               </View>
             )
@@ -70,7 +42,129 @@ export default ()=>{
         }
         {/* {data.length>0&&<View className="credit-used-list"></View>} */}
         <View className="credit-used-list"></View>
-      </InfiniteScroll>
+      </InfiniteScrollPaging>
     </View>
   )
 }
+
+// export default ()=>{
+//   useEffect(()=>{
+//     refreshDataRef.current = refreshData;
+//     dataRef.current = data;
+//     getData({
+//       moreStatus: true
+//     },{
+//       moreStatus: true
+//     });
+//   }, [])
+//   const {fetchData, state} = creditListApi();
+//   const getData = async (startStatus, endStatus)=>{
+//     const tRefreshDataRef = refreshDataRef.current as any;
+//     setRefreshData({
+//       ...tRefreshDataRef,
+//       ...startStatus
+//     })
+//     const result = await fetchData({
+//       page: tRefreshDataRef.page,
+//       size: tRefreshDataRef.size,
+//     });
+//     if(result.success){
+//       if(result.data.total<=0){
+//         setRefreshData({
+//           ...tRefreshDataRef,
+//           ...endStatus
+//         })
+//       }else{
+//         setData({
+//           list: result.data.list,
+//           // list: tRefreshDataRef.page>1?(dataRef.current as any).list.concat(result.data.list):result.data.list,
+//           total: result.data.total
+//         })
+//         setRefreshData({
+//           ...tRefreshDataRef,
+//           refreshStatus: false,
+//           moreStatus: false
+//         })
+//       }
+//     }
+//   }
+//   // 加载刷新数据
+//   const [refreshData, setRefreshData] = useState({
+//     refreshStatus: false,
+//     moreStatus: false,
+//     page: 1,
+//     size: 10
+//   })
+//   const refreshDataRef = useRef({});
+//   // 渲染（数据）
+//   const [data, setData] = useState({
+//     list: [],
+//     total: 0
+//   });
+//   const dataRef = useRef({});
+//   // 下拉刷新
+//   const handleRefresh = async ()=>{
+//     let tRefreshData = refreshDataRef.current as any;
+//     setRefreshData({
+//       ...tRefreshData,
+//       page: 1,
+//       size: 10,
+//     })
+//     getData({
+//       refreshStatus: true,
+//       moreStatus: false
+//     },{
+//       refreshStatus: false,
+//       moreStatus: true
+//     });
+//   }
+//   // 加载更多
+//   const handleMoreLoad = async ()=>{
+//     let t = (dataRef.current as any);
+//     let tRefreshData = refreshDataRef.current as any;
+//     if(t.list.length<t.total){
+//       setRefreshData({
+//         ...tRefreshData,
+//         page: ++tRefreshData.page,
+//         size: ++tRefreshData.page*tRefreshData.size,
+//       })
+//       getData({
+//         moreStatus: true
+//       },{
+//         moreStatus: true
+//       });
+//     }
+//   }
+//   //数据加载状态
+//   const statusMore = useMemo(() => {
+    
+//     return dataLoadingStatus({list:data.list, total: data.total, status: refreshData.moreStatus})
+//   }, [data])
+  
+
+//   return (
+//     <View className="credit-used">
+//       <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} 
+//       selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad} statusMore={statusMore}>
+//         {
+//           (data as any)?.list?.map((item,index)=>{
+//             return (
+//               <View key={index} className="credit-used-list">
+//                 <View className="credit-used-list-top">
+//                   <View className="credit-used-list-type">下单</View>
+//                   <View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
+//                 </View>
+//                 <View className="credit-used-list-bottom">
+//                   <View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
+//                   <View className="credit-used-list-orderno">订单号：{item.order_no}</View>
+//                 </View>
+//               </View>
+//             )
+//           })
+//         }
+//         {/* {data.length>0&&<View className="credit-used-list"></View>} */}
+//         <View className="credit-used-list"></View>
+//       </InfiniteScroll>
+//     </View>
+//   )
+// }