🦄 refactor:购物车添加虚拟列表

src/pages/customerPage/index.module.scss

@@ -20,6 +20,10 @@ page {
         }
     }
 
+    .listBox {
+        height: 100vh;
+    }
+
     .itemBox {
         margin-left: 24px;
         width: 702px;

src/pages/customerPage/index.tsx

@@ -7,47 +7,68 @@ import { ClientListApi } from '@/api/order'
 import { useDidShow } from '@tarojs/taro';
 import Taro from '@tarojs/taro'
 import { useRouter } from '@tarojs/taro'
+import InfiniteScroll from '@/components/infiniteScroll'
+import { dataLoadingStatus, getFilterData } from '@/common/util'
 
 export default () => {
 
+
+
     const [search, setSearch] = useState({
-        name: null
+        name: null,
+        page: 1,
+        size: 10,
     })
-    const [clentList, setClientlist] = useState<any[]>([])
+    const [clentList, setClientlist] = useState<{ list: any[]; total: number }>({ list: [], total: 0 })
 
+    const { fetchData: clitentFetch, state: orderState } = ClientListApi()
+    //数据加载状态
+    const statusMore = useMemo(() => {
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+    }, [clentList, orderState])
 
-    const [clientObj, setclientObj] = useState({})
+    const [clientObj, setclientObj] = useState({
+        clientId: null,
+        clientName: ''
+    })
 
     //输入了搜索关键字
     const getSearchData = useCallback((eq) => {
-
-        setSearch({ name: eq })
-
+        pageNum.current.page = 1
+        setClientlist(() => ({ list: [], total: 0 }))
+        setSearch((e) => ({ ...e, name: eq, size: 10 }))
     }, [])
 
 
     const router = useRouter()
-    // useDidShow(() => {
-    //     if (router?.params.clientId) {
-    //         clentList.map(item => {
-    //             if (item.id == router?.params.clientId) {
-    //                 item.checked = true
-    //             }else{
-
-    //             }
-    //         })
-    //     }
-    // })
 
     useEffect(() => {
-        setSearch(search)
+        if (search.name === '') {
+            setSearch((e) => ({ ...e, name: null }))
+        }
         if (search.name !== '') getCuss()
     }, [search])
 
+    //上拉加载数据
+    const pageNum = useRef({ size: search.size, page: search.page })
+    const getScrolltolower = useCallback(() => {
+        if (clentList.list.length < clentList.total) {
+            pageNum.current.page++
+            const size = pageNum.current.size * pageNum.current.page
+            setSearch((e) => ({ ...e, size }))
+            console.log(search, 11111)
+        }
+    }, [clentList])
 
-    const { fetchData: clitentFetch } = ClientListApi()
+    //列表下拉刷新
+    const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
+    const getRefresherRefresh = async () => {
+        pageNum.current.size = 1
+        setRefresherTriggeredStatus(true)
+        setSearch((val) => ({ ...val, size: 10 }))
+    }
     const getCuss = async () => {
-        let res = await clitentFetch({ name: search.name === null ? '' : search.name })
+        let res = await clitentFetch({ name: search.name === null ? '' : search.name, page: search.page, size: search.size })
         if (router?.params.clientId) {
             res.data.list.map(item => {
                 if (item.id == router?.params.clientId) {
@@ -58,15 +79,15 @@ export default () => {
                 return item
             })
         }
-        // res.data.list.map(item => {
-        //     item.checked = false
-        // })
-        setClientlist([...res.data.list])
+        setClientlist((e) => ({ ...e, list: res.data?.list, total: res.data?.total }))
+        setRefresherTriggeredStatus(() => false)
     }
 
+
+
     //选择客户
     const selectClient = (item) => {
-        clentList.map(it => {
+        clentList.list.map(it => {
             if (item.id === it.id) {
                 it.checked = true
             } else {
@@ -74,19 +95,30 @@ export default () => {
             }
             return it
         })
+        setclientObj(item)
         let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
         let prevPage = pages[pages.length - 2];
         prevPage.setData({ //设置上一个页面的值
             clientId: item.id,
-            clientName: item.name
+            clientName: item.name,
         });
-        setClientlist([...clentList])
-        setclientObj(item)
+        setClientlist((e) => ({ ...e, list: clentList?.list, total: clentList?.total }))
         Taro.navigateBack({
             delta: 1
         })
     }
-
+    useEffect(() => {
+        if (clientObj?.clientId !== null) {
+            setclientObj(clientObj)
+        } else {
+            let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
+            let prevPage = pages[pages.length - 2];
+            prevPage.setData({ //设置上一个页面的值
+                clientId: '',
+                clientName: '',
+            });
+        }
+    }, [clientObj])
     return (
         <View className={styles.cussBox}>
             <View className={styles.searchBox}>
@@ -95,17 +127,27 @@ export default () => {
                 </View>
 
             </View>
-            {
-                clentList.map((item, index) => {
-                    return (
-                        <View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
-                            <View className={styles.cussName}>{item.name}</View>
-                            <View className={styles.phone}>{item.phone}</View>
-                            <View className={styles.woker}>{item.sale_user_name}</View>
-                        </View>
-                    )
-                })
-            }
+            <View className={styles.listBox}>
+                <InfiniteScroll
+                    statusMore={statusMore}
+                    selfonScrollToLower={getScrolltolower}
+                    refresherEnabled={true}
+                    refresherTriggered={refresherTriggeredStatus}
+                    selfOnRefresherRefresh={getRefresherRefresh}>
+                    {
+                        clentList.list.map((item, index) => {
+                            return (
+                                <View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
+                                    <View className={styles.cussName}>{item.name}</View>
+                                    <View className={styles.phone}>{item.phone}</View>
+                                    <View className={styles.woker}>{item.sale_user_name}</View>
+                                </View>
+                            )
+                        })
+                    }
+                </InfiniteScroll>
+            </View>
+
 
         </View>
     )