فهرست منبع

♻️ refactor(order): 优化订单页面刷新和加载逻辑

- 订单详情页: 使用usePullDownRefresh钩子替代scrollView的refresher属性实现下拉刷新
- 订单列表页: 使用usePullDownRefresh和useReachBottom钩子替代scrollView事件处理下拉刷新和触底加载
- 移除scrollView组件中相关的refresher和scroll事件属性,统一使用Taro全局钩子管理页面交互
yourname 1 ماه پیش
والد
کامیت
1a8ed23ad1
2فایلهای تغییر یافته به همراه14 افزوده شده و 18 حذف شده
  1. 7 7
      mini/src/pages/order-detail/index.tsx
  2. 7 11
      mini/src/pages/order-list/index.tsx

+ 7 - 7
mini/src/pages/order-detail/index.tsx

@@ -1,6 +1,6 @@
 import { View, ScrollView, Text, Image } from '@tarojs/components'
 import { View, ScrollView, Text, Image } from '@tarojs/components'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import Taro from '@tarojs/taro'
+import Taro, { usePullDownRefresh } from '@tarojs/taro'
 import { orderClient } from '@/api'
 import { orderClient } from '@/api'
 import { Navbar } from '@/components/ui/navbar'
 import { Navbar } from '@/components/ui/navbar'
 import OrderButtonBar from '@/components/order/OrderButtonBar'
 import OrderButtonBar from '@/components/order/OrderButtonBar'
@@ -59,6 +59,12 @@ export default function OrderDetailPage() {
     staleTime: 5 * 60 * 1000,
     staleTime: 5 * 60 * 1000,
   })
   })
 
 
+  // 使用Taro全局钩子 - 下拉刷新
+  usePullDownRefresh(() => {
+    queryClient.invalidateQueries({ queryKey: ['order', orderId, orderNo] })
+    Taro.stopPullDownRefresh()
+  })
+
   // 取消订单mutation
   // 取消订单mutation
   const cancelOrderMutation = useMutation({
   const cancelOrderMutation = useMutation({
     mutationFn: async (reason: string) => {
     mutationFn: async (reason: string) => {
@@ -218,12 +224,6 @@ export default function OrderDetailPage() {
       <ScrollView
       <ScrollView
         className="refresh-container"
         className="refresh-container"
         scrollY
         scrollY
-        refresherEnabled={true}
-        refresherTriggered={false}
-        onRefresherRefresh={() => {
-          // 下拉刷新逻辑
-          queryClient.invalidateQueries({ queryKey: ['order', orderId, orderNo] })
-        }}
       >
       >
         {/* 顶部状态卡片 */}
         {/* 顶部状态卡片 */}
         <View className="order-status-header">
         <View className="order-status-header">

+ 7 - 11
mini/src/pages/order-list/index.tsx

@@ -1,7 +1,7 @@
 import { View, ScrollView, Text } from '@tarojs/components'
 import { View, ScrollView, Text } from '@tarojs/components'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { useState, useEffect } from 'react'
 import { useState, useEffect } from 'react'
-import Taro from '@tarojs/taro'
+import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
 import { orderClient } from '@/api'
 import { orderClient } from '@/api'
 import { InferResponseType } from 'hono'
 import { InferResponseType } from 'hono'
 import { Navbar } from '@/components/ui/navbar'
 import { Navbar } from '@/components/ui/navbar'
@@ -98,19 +98,19 @@ export default function OrderListPage() {
   // 合并所有分页数据
   // 合并所有分页数据
   const allOrders = data?.pages.flatMap(page => page.data) || []
   const allOrders = data?.pages.flatMap(page => page.data) || []
 
 
-  // 触底加载更多
-  const handleScrollToLower = () => {
+  // 使用Taro全局钩子 - 触底加载更多
+  useReachBottom(() => {
     if (hasNextPage && !isFetchingNextPage) {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage()
       fetchNextPage()
     }
     }
-  }
+  })
 
 
-  // 下拉刷新
-  const onPullDownRefresh = () => {
+  // 使用Taro全局钩子 - 下拉刷新
+  usePullDownRefresh(() => {
     refetch().finally(() => {
     refetch().finally(() => {
       Taro.stopPullDownRefresh()
       Taro.stopPullDownRefresh()
     })
     })
-  }
+  })
 
 
   // 查看订单详情
   // 查看订单详情
   const handleOrderDetail = (order: Order) => {
   const handleOrderDetail = (order: Order) => {
@@ -160,10 +160,6 @@ export default function OrderListPage() {
       <ScrollView
       <ScrollView
         className="flex-1"
         className="flex-1"
         scrollY
         scrollY
-        onScrollToLower={handleScrollToLower}
-        refresherEnabled
-        refresherTriggered={false}
-        onRefresherRefresh={onPullDownRefresh}
       >
       >
         <View className="p-4">
         <View className="p-4">
           {isLoading ? (
           {isLoading ? (