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

src/custom-tab-bar/index.tsx

@@ -41,7 +41,7 @@ const CustomTabBar: FC = () => {
   const handleSelectTabItem = (id: TabBarIndexMap[number]['id']) => {
     return () => {
       setSelected(id)
-      Taro.switchTab({ url: tabItem.find(item=>item.id === id)?.pagePath! })
+      Taro.switchTab({ url: tabItem?.find(item=>item.id === id)?.pagePath! })
     }
   }
   const setSelected = (id: TabBarIndexMap[number]['id']) => {
@@ -51,7 +51,7 @@ const CustomTabBar: FC = () => {
   return (
     <View className={styles.customTabBar}>
       <View className={styles['customTabBar-line']}></View>
-      {tabItem.map((item, index) => {
+      {tabItem?.map((item, index) => {
         return (
           <View
             key={index}

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({
+  const [searchOptions, setSearchOptions] = useState<SearchOptions>({
-    short_name_or_phone: '',
+    
+    page: 1,
+    size: 10,
   })
+
   useDidShow(() => {
+    // 第二次进入该页面时触发
     if (!isFirst.current) {
-      fetchData(searchOptions)
+      fetchData(getFilterData(searchOptions))
     }
   })
 
   useEffect(() => {
-    console.log('useEffect fetchData')
+    console.log('useEffect fetchData', getFilterData(searchOptions))
-    if (!isEmptyObject(getFilterData(searchOptions))) {
+    if (!isFirst.current) {
-      fetchData(searchOptions)
+      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}>
+          <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus} selfonScrollToLower={getScrollToLower}>
-            {// isPending ? (
+            {
-            //   null
-            // ) : (
             !!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')
   }
 

src/reducers/tabBar.ts

@@ -13,33 +13,40 @@ type TabBarIndexMap = {
   }
 }
 
+export enum TabBarIndex {
+  INDEX = 1,
+  SHOPPING = 2,
+  ORDER = 3,
+  USER  = 4
+}
+
 
 const INITIAL_STATE = {
-  selectedId: 1,
+  selectedId: TabBarIndex.INDEX,
   tabItem: [
     {
-      id: 1,
+      id: TabBarIndex.INDEX,
       pagePath: '/pages/index/index',
       text: '首页',
       iconPath: 'icon-shouye1',
       selectedIconPath: 'icon-shouye',
     },
     {
-      id: 2,
+      id: TabBarIndex.SHOPPING,
       pagePath: '/pages/shopping/index',
       text: '购物',
       iconPath: 'icon-gouwu1',
       selectedIconPath: 'icon-gouwu',
     },
     {
-      id: 3,
+      id: TabBarIndex.ORDER,
       pagePath: '/pages/order/index',
       text: '订单',
       iconPath: 'icon-dingdan1',
       selectedIconPath: 'icon-dingdan',
     },
     {
-      id: 4,
+      id: TabBarIndex.USER,
       pagePath: '/pages/user/index',
       text: '我的',
       iconPath: 'icon-gerenzhongxin1',
@@ -50,7 +57,7 @@ const INITIAL_STATE = {
 
 export type TabBarData = {
   selectedId: number
-  tabItem: TabBarIndexMap[number][]
+  tabItem?: TabBarIndexMap[number][]
 }
 
 export type TabBarAction = {