Преглед на файлове

✨ feat(order-detail): 优化订单详情页刷新机制

- 移除全局下拉刷新钩子,改用ScrollView内置下拉刷新功能
- 新增refreshing状态控制下拉刷新动画
- 添加handleRefresh函数处理下拉刷新逻辑
- 使用useDidShow钩子在页面显示时刷新数据,确保返回时显示最新状态
- 为ScrollView添加refresherEnabled、refresherTriggered和onRefresherRefresh属性
yourname преди 2 седмици
родител
ревизия
be1e680b05
променени са 1 файла, в които са добавени 17 реда и са изтрити 5 реда
  1. 17 5
      mini/src/pages/order-detail/index.tsx

+ 17 - 5
mini/src/pages/order-detail/index.tsx

@@ -1,6 +1,6 @@
 import { View, ScrollView, Text, Image } from '@tarojs/components'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import Taro, { usePullDownRefresh, useRouter } from '@tarojs/taro'
+import Taro, { useRouter, useDidShow } from '@tarojs/taro'
 import { orderClient } from '@/api'
 import { Navbar } from '@/components/ui/navbar'
 import OrderButtonBar from '@/components/order/OrderButtonBar'
@@ -27,6 +27,8 @@ export default function OrderDetailPage() {
 
   // 取消原因对话框状态
   const [showCancelDialog, setShowCancelDialog] = useState(false)
+  // 下拉刷新状态
+  const [refreshing, setRefreshing] = useState(false)
 
   // 订单支付倒计时
   const [countdown, setCountdown] = useState<{
@@ -37,7 +39,7 @@ export default function OrderDetailPage() {
   } | null>(null)
 
   // 通过订单ID或订单号查询订单详情
-  const { data: order, isLoading } = useQuery<Order>({
+  const { data: order, isLoading, refetch } = useQuery<Order>({
     queryKey: ['order', orderId, orderNo],
     queryFn: async () => {
       // 如果提供了订单ID,直接通过ID查询
@@ -116,10 +118,17 @@ export default function OrderDetailPage() {
     }
   }, [order])
 
-  // 使用Taro全局钩子 - 下拉刷新
-  usePullDownRefresh(() => {
+  // ScrollView下拉刷新处理函数
+  const handleRefresh = () => {
+    setRefreshing(true)
+    refetch().finally(() => {
+      setRefreshing(false)
+    })
+  }
+
+  // 页面显示时刷新数据(确保从其他页面返回时显示最新状态)
+  useDidShow(() => {
     queryClient.invalidateQueries({ queryKey: ['order', orderId, orderNo] })
-    Taro.stopPullDownRefresh()
   })
 
   // 取消订单mutation
@@ -282,6 +291,9 @@ export default function OrderDetailPage() {
       <ScrollView
         className="refresh-container"
         scrollY
+        refresherEnabled={true}
+        refresherTriggered={refreshing}
+        onRefresherRefresh={handleRefresh}
       >
         {/* 顶部状态卡片 */}
         <View className="order-status-header">