🎈 perf(购物页面): 添加分页功能]

src/pages/customerPage/index.tsx

@@ -24,7 +24,7 @@ export default () => {
     const { fetchData: clitentFetch, state: orderState } = ClientListApi()
     //数据加载状态
     const statusMore = useMemo(() => {
-        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading })
+        return dataLoadingStatus({ list: clentList.list, total: clentList.total, status: orderState.loading! })
     }, [clentList, orderState])
 
     const [clientObj, setclientObj] = useState({
@@ -152,4 +152,4 @@ export default () => {
 
         </View>
     )
-}
+}

src/pages/shopping/index.tsx

@@ -38,9 +38,13 @@ export const Shopping: FC = memo(() => {
   )
 })
 
-interface InternalContainer {}
+interface SearchOptions {
+  short_name_or_phone?: string
+  page?: number
+  size?: number
+}
 
-const ShoppingCartContainer: FC<InternalContainer> = () => {
+const ShoppingCartContainer: FC = () => {
   let isFirst = useRef(true)
 
   const { isMultipleSelection, isManageStatus, selectedAmount, currentCheckedPurchaserId, currentCheckedSaleMode, colorStore } = useShoppingState()
@@ -59,25 +63,31 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   const { fetchData, state } = ShoppingCartListApi()
 
-  const [searchOptions, setSearchOptions] = useState({
-    short_name_or_phone: '',
+  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
+    
+    page: 1,
+    size: 10,
   })
+
   useDidShow(() => {
+    // 第二次进入该页面时触发
     if (!isFirst.current) {
-      fetchData(searchOptions)
+      fetchData(getFilterData(searchOptions))
     }
   })
 
   useEffect(() => {
-    console.log('useEffect fetchData')
-    if (!isEmptyObject(getFilterData(searchOptions))) {
-      fetchData(searchOptions)
+    console.log('useEffect fetchData', getFilterData(searchOptions))
+    if (!isFirst.current) {
+      fetchData(getFilterData(searchOptions))
     }
   }, [searchOptions])
 
   // 输入了搜索关键字
   const getSearchData = useCallback(e => {
-    setSearchOptions(prev => ({ ...prev, short_name_or_phone: e }))
+    console.log('getSearchData===>',e);
+    pageNum.current.page = 1
+    setSearchOptions(prev => ({ ...prev, short_name_or_phone: e, size: 10 }))
   }, [])
 
   const [shoppingCartData, setShoppingCartData] = useState<{
@@ -85,6 +95,18 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     total: number
   }>({ list: [], total: 0 })
 
+  //上拉加载数据
+  const pageNum = useRef({ size: searchOptions.size, page: searchOptions.page })
+  // 上拉加载
+  const getScrollToLower = useCallback(() => {
+    if (shoppingCartData.list.length < shoppingCartData.total) {
+      pageNum.current.page!++
+      const size = pageNum.current.size! * pageNum.current.page!
+      setSearchOptions((e) => ({ ...e, size }))
+      console.log(searchOptions, 11111)
+    }
+  }, [shoppingCartData])
+
   //数据加载状态
   const statusMore = useMemo(() => {
     console.log('shoppingCartData==>', shoppingCartData, state)
@@ -101,7 +123,7 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
   useLayoutEffect(() => {
     ;(async () => {
       console.log('useLayoutEffect')
-      await fetchData()
+      await fetchData(getFilterData(searchOptions))
       isFirst.current = false
       let query = Taro.createSelectorQuery()
       console.log('query', query)
@@ -203,8 +225,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   // 下拉刷新
   const handleRefresh = async () => {
+    pageNum.current.page = 1
     setRefreshStatus(true)
-    const res = await fetchData(searchOptions)
+    const res = await fetchData(getFilterData(searchOptions))
     if (res.success) {
       setRefreshStatus(false)
       alert.success('刷新成功')
@@ -230,15 +253,12 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View id='shoppingListContainer' className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
-          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            {// isPending ? (
-            //   null
-            // ) : (
+          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus} selfonScrollToLower={getScrollToLower}>
+            {
             !!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>
               })
-            // )
             }
           </InfiniteScroll>
         </View>

src/pages/user/index.tsx

@@ -12,6 +12,10 @@ import useUserInfo from '@/use/useUserInfo'
 import { goLink } from '@/common/common'
 import { checkKey } from "@/common/common"
 import { useDidShow } from '@tarojs/taro'
+import { useDispatch } from 'react-redux'
+import { Dispatch } from 'redux'
+import { TabBarAction, TabBarIndex } from '@/reducers/tabBar'
+import { TabBarType } from '@/constants/tabbar'
 type IconCardType = {
   jurisdiction?: string //权限key值
   iconName: IconNames
@@ -126,6 +130,9 @@ let statisticAnalysis: IconCardType[] = [
 // 用户信息
 const UserInfo: FC = () => {
   const { removeToken, removeUserInfo, userInfo } = useUserInfo()
+
+  const dispatch = useDispatch<Dispatch<TabBarAction>>()
+
   console.log('userInfo==>', userInfo)
   // const [userInfo, setUserInfo] = useState({
   //   avatarUrl: '',
@@ -137,6 +144,7 @@ const UserInfo: FC = () => {
   const handleLogout = () => {
     removeToken()
     removeUserInfo()
+    dispatch({ type: TabBarType.SET_SELECTED, data: { selectedId: TabBarIndex.INDEX } })
     goLink('/pages/login/index', {}, 'reLaunch')
   }