From b22ff991f01b5cdcaaf53dd7a7cb75fee1148739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Tue, 10 Feb 2026 13:00:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(order):=20=E6=B7=BB=E5=8A=A0=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD=E5=88=B0=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 PullToRefresh 组件实现下拉刷新功能
- 将原有滚动容器包装到 PullToRefresh 组件内部
- 实现下拉刷新逻辑，重置分页数据并重新加载
- 设置刷新头部高度为 60
- 保留原有的无限滚动和上拉加载功能
---
 src/user/order/components/OrderList.tsx | 352 ++++++++++++------------
 1 file changed, 180 insertions(+), 172 deletions(-)

diff --git a/src/user/order/components/OrderList.tsx b/src/user/order/components/OrderList.tsx
index 1c20792..f5f3273 100644
--- a/src/user/order/components/OrderList.tsx
+++ b/src/user/order/components/OrderList.tsx
@@ -1,8 +1,7 @@
-import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image, Dialog} from '@nutui/nutui-react-taro'
+import {Avatar, Cell, Space, Empty, Tabs, Button, TabPane, Image, Dialog, PullToRefresh, InfiniteLoading} from '@nutui/nutui-react-taro'
 import {useEffect, useState, useCallback, useRef, CSSProperties} from "react";
 import {View, Text} from '@tarojs/components'
 import Taro from '@tarojs/taro';
-import {InfiniteLoading} from '@nutui/nutui-react-taro'
 import dayjs from "dayjs";
 import {
   pageShopOrder,
@@ -685,193 +684,202 @@ function OrderList(props: OrderListProps) {
           })
         }
       </Tabs>
-      <View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
-        {error ? (
-          <View className="flex flex-col items-center justify-center h-64">
-            <View className="text-gray-500 mb-4">{error}</View>
-            <Button
-              size="small"
-              type="primary"
-              onClick={() => reload(true)}
+      <PullToRefresh
+        onRefresh={async () => {
+          setHasMore(true)
+          await reload(true)
+          props.onReload?.()
+        }}
+        headHeight={60}
+      >
+        <View style={getInfiniteUlStyle(props.showSearch)} id="scroll">
+          {error ? (
+            <View className="flex flex-col items-center justify-center h-64">
+              <View className="text-gray-500 mb-4">{error}</View>
+              <Button
+                size="small"
+                type="primary"
+                onClick={() => reload(true)}
+              >
+                重新加载
+              </Button>
+            </View>
+          ) : (
+            <InfiniteLoading
+              target="scroll"
+              hasMore={hasMore}
+              onLoadMore={reloadMore}
+              onScroll={() => {
+
+              }}
+              onScrollToUpper={() => {
+
+              }}
+              loadingText={
+                <>
+                  加载中
+                </>
+              }
+              loadMoreText={
+                list.length === 0 ? (
+                  <Empty style={{backgroundColor: 'transparent'}} description="您还没有订单哦"/>
+                ) : (
+                  <View className={'h-24'}>
+                    没有更多了
+                  </View>
+                )
+              }
             >
-              重新加载
-            </Button>
-          </View>
-        ) : (
-          <InfiniteLoading
-            target="scroll"
-            hasMore={hasMore}
-            onLoadMore={reloadMore}
-            onScroll={() => {
 
-            }}
-            onScrollToUpper={() => {
-
-            }}
-            loadingText={
-              <>
-                加载中
-              </>
-            }
-            loadMoreText={
-              list.length === 0 ? (
-                <Empty style={{backgroundColor: 'transparent'}} description="您还没有订单哦"/>
-              ) : (
-                <View className={'h-24'}>
-                  没有更多了
-                </View>
-              )
-            }
-          >
-
-            {/* 订单列表 */}
-            {list.length > 0 && list
-              ?.filter((item) => {
-                // “待收货”不展示退款中的/已退款订单，这些订单统一放到“退货/售后”
-                if (tapIndex === 3 && (item.orderStatus === 4 || item.orderStatus === 6)) {
-                  return false;
-                }
-                // “退货/售后”只展示售后相关状态
-                if (tapIndex === 5) {
-                  return item.orderStatus === 4 || item.orderStatus === 5 || item.orderStatus === 6 || item.orderStatus === 7;
-                }
-                return true;
-              })
-              ?.map((item, index) => {
-                return (
-                  <Cell key={item.orderId ?? item.orderNo ?? index} style={{padding: '16px'}}
-                        onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
-                    <Space direction={'vertical'} className={'w-full flex flex-col'}>
-                      <View className={'order-no flex justify-between'}>
-                        <View className={'flex items-center'}>
-                          <Text className={'text-gray-600 font-bold text-sm'}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  copyText(`${item.orderNo}`)
-                                }}>{item.orderNo}</Text>
+              {/* 订单列表 */}
+              {list.length > 0 && list
+                ?.filter((item) => {
+                  // “待收货”不展示退款中的/已退款订单，这些订单统一放到“退货/售后”
+                  if (tapIndex === 3 && (item.orderStatus === 4 || item.orderStatus === 6)) {
+                    return false;
+                  }
+                  // “退货/售后”只展示售后相关状态
+                  if (tapIndex === 5) {
+                    return item.orderStatus === 4 || item.orderStatus === 5 || item.orderStatus === 6 || item.orderStatus === 7;
+                  }
+                  return true;
+                })
+                ?.map((item, index) => {
+                  return (
+                    <Cell key={item.orderId ?? item.orderNo ?? index} style={{padding: '16px'}}
+                          onClick={() => Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}>
+                      <Space direction={'vertical'} className={'w-full flex flex-col'}>
+                        <View className={'order-no flex justify-between'}>
+                          <View className={'flex items-center'}>
+                            <Text className={'text-gray-600 font-bold text-sm'}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    copyText(`${item.orderNo}`)
+                                  }}>{item.orderNo}</Text>
+                          </View>
+                          {/* 右侧显示合并的状态和倒计时 */}
+                          <View className={`${getOrderStatusColor(item)} font-medium`}>
+                            {!item.payStatus && item.orderStatus !== 2 ? (
+                              <PaymentCountdown
+                                expirationTime={item.expirationTime}
+                                createTime={item.createTime}
+                                payStatus={item.payStatus}
+                                realTime={false}
+                                showSeconds={false}
+                                timeoutHours={24}
+                                mode={'badge'}
+                              />
+                            ) : (
+                              getOrderStatusText(item)
+                            )}
+                          </View>
                         </View>
-                        {/* 右侧显示合并的状态和倒计时 */}
-                        <View className={`${getOrderStatusColor(item)} font-medium`}>
-                          {!item.payStatus && item.orderStatus !== 2 ? (
-                            <PaymentCountdown
-                              expirationTime={item.expirationTime}
-                              createTime={item.createTime}
-                              payStatus={item.payStatus}
-                              realTime={false}
-                              showSeconds={false}
-                              timeoutHours={24}
-                              mode={'badge'}
-                            />
+                        <View
+                          className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</View>
+
+                        {/* 商品信息 */}
+                        <View className={'goods-info'}>
+                          {item.orderGoods && item.orderGoods.length > 0 ? (
+                            item.orderGoods.map((goods, goodsIndex) => (
+                              <View key={goodsIndex} className={'flex items-center mb-2'}>
+                                <Image
+                                  src={goods.image || '/default-goods.png'}
+                                  width="50"
+                                  height="50"
+                                  lazyLoad={false}
+                                  className={'rounded'}
+                                />
+                                <View className={'ml-2 flex flex-col flex-1'}>
+                                  <Text className={'text-sm font-bold'}>
+                                    {goods.goodsName || (goods as any).goodsTitle || (goods as any).title || item.title || '订单商品'}
+                                  </Text>
+                                  {(goods.spec || (goods as any).specInfo) && (
+                                    <Text className={'text-gray-500 text-xs'}>规格：{goods.spec || (goods as any).specInfo}</Text>
+                                  )}
+                                  <Text className={'text-gray-500 text-xs'}>数量：{(goods as any).quantity ?? goods.totalNum}</Text>
+                                </View>
+                                <Text className={'text-gray-400 text-xs'}>x</Text>
+                                <Text className={'text-sm'}>￥{goods.price || (goods as any).payPrice}</Text>
+                              </View>
+                            ))
                           ) : (
-                            getOrderStatusText(item)
+                            <View className={'flex items-center'}>
+                              <Avatar
+                                src='/default-goods.png'
+                                size={'50'}
+                                shape={'square'}
+                              />
+                              <View className={'ml-2'}>
+                                <Text className={'text-sm'}>{item.title || '订单商品'}</Text>
+                                <Text className={'text-gray-400 text-xs'}>{item.totalNum}件商品</Text>
+                              </View>
+                            </View>
                           )}
                         </View>
-                      </View>
-                      <View
-                        className={'create-time text-gray-400 text-xs'}>{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}</View>
 
-                      {/* 商品信息 */}
-                      <View className={'goods-info'}>
-                        {item.orderGoods && item.orderGoods.length > 0 ? (
-                          item.orderGoods.map((goods, goodsIndex) => (
-                            <View key={goodsIndex} className={'flex items-center mb-2'}>
-                              <Image
-                                src={goods.image || '/default-goods.png'}
-                                width="50"
-                                height="50"
-                                lazyLoad={false}
-                                className={'rounded'}
-                              />
-                              <View className={'ml-2 flex flex-col flex-1'}>
-                                <Text className={'text-sm font-bold'}>
-                                  {goods.goodsName || (goods as any).goodsTitle || (goods as any).title || item.title || '订单商品'}
-                                </Text>
-                                {(goods.spec || (goods as any).specInfo) && (
-                                  <Text className={'text-gray-500 text-xs'}>规格：{goods.spec || (goods as any).specInfo}</Text>
-                                )}
-                                <Text className={'text-gray-500 text-xs'}>数量：{(goods as any).quantity ?? goods.totalNum}</Text>
-                              </View>
-                              <Text className={'text-gray-400 text-xs'}>x</Text>
-                              <Text className={'text-sm'}>￥{goods.price || (goods as any).payPrice}</Text>
-                            </View>
-                          ))
-                        ) : (
-                          <View className={'flex items-center'}>
-                            <Avatar
-                              src='/default-goods.png'
-                              size={'50'}
-                              shape={'square'}
-                            />
-                            <View className={'ml-2'}>
-                              <Text className={'text-sm'}>{item.title || '订单商品'}</Text>
-                              <Text className={'text-gray-400 text-xs'}>{item.totalNum}件商品</Text>
-                            </View>
-                          </View>
-                        )}
-                      </View>
+                        <Text className={'w-full text-right'}>实付金额：￥{item.payPrice}</Text>
 
-                      <Text className={'w-full text-right'}>实付金额：￥{item.payPrice}</Text>
+                        {/* 操作按钮 */}
+                        {!isReadOnly && (
+                        <Space className={'btn flex justify-end'}>
+                          {/* 待付款状态：显示取消订单和立即支付 */}
+                          {(!item.payStatus) && item.orderStatus !== 2 && (
+                            <Space>
+                              <Button size={'small'} onClick={(e) => {
+                                e.stopPropagation();
+                                void cancelOrder(item);
+                              }}>取消订单</Button>
+                              {(!item.createTime || !isPaymentExpired(item.createTime, 24)) && (
+                                <Button size={'small'} type="primary" onClick={(e) => {
+                                  e.stopPropagation();
+                                  void payOrder(item);
+                                }}>立即支付</Button>
+                              )}
+                            </Space>
+                          )}
 
-                      {/* 操作按钮 */}
-                      {!isReadOnly && (
-                      <Space className={'btn flex justify-end'}>
-                        {/* 待付款状态：显示取消订单和立即支付 */}
-                        {(!item.payStatus) && item.orderStatus !== 2 && (
-                          <Space>
+                          {/* 待发货状态：显示申请退款 */}
+                          {item.payStatus && isWithinRefundWindow(item.payTime, 60) && item.deliveryStatus === 10 && item.orderStatus !== 2 && item.orderStatus !== 4 && !isOrderCompleted(item) && (
                             <Button size={'small'} onClick={(e) => {
                               e.stopPropagation();
-                              void cancelOrder(item);
-                            }}>取消订单</Button>
-                            {(!item.createTime || !isPaymentExpired(item.createTime, 24)) && (
+                              applyRefund(item);
+                            }}>申请退款</Button>
+                          )}
+
+                          {/* 待收货状态：显示查看物流和确认收货 */}
+                          {item.deliveryStatus === 20 && (!item.riderId || !!item.sendEndTime) && item.orderStatus !== 2 && item.orderStatus !== 6 && !isOrderCompleted(item) && (
+                            <Space>
+                              {/*<Button size={'small'} onClick={(e) => {*/}
+                              {/*  e.stopPropagation();*/}
+                              {/*  viewLogistics(item);*/}
+                              {/*}}>查看物流</Button>*/}
                               <Button size={'small'} type="primary" onClick={(e) => {
                                 e.stopPropagation();
-                                void payOrder(item);
-                              }}>立即支付</Button>
-                            )}
-                          </Space>
-                        )}
+                                confirmReceive(item);
+                              }}>确认收货</Button>
+                            </Space>
+                          )}
 
-                        {/* 待发货状态：显示申请退款 */}
-                        {item.payStatus && isWithinRefundWindow(item.payTime, 60) && item.deliveryStatus === 10 && item.orderStatus !== 2 && item.orderStatus !== 4 && !isOrderCompleted(item) && (
-                          <Button size={'small'} onClick={(e) => {
-                            e.stopPropagation();
-                            applyRefund(item);
-                          }}>申请退款</Button>
-                        )}
+                          {/* 退款/售后状态：显示查看进度和撤销申请 */}
+                          {(item.orderStatus === 4 || item.orderStatus === 7) && (
+                            <Space>
+                              {/*<Button size={'small'} onClick={(e) => {*/}
+                              {/*  e.stopPropagation();*/}
+                              {/*  viewProgress(item);*/}
+                              {/*}}>查看进度</Button>*/}
+                            </Space>
+                          )}
 
-                        {/* 待收货状态：显示查看物流和确认收货 */}
-                        {item.deliveryStatus === 20 && (!item.riderId || !!item.sendEndTime) && item.orderStatus !== 2 && item.orderStatus !== 6 && !isOrderCompleted(item) && (
-                          <Space>
-                            {/*<Button size={'small'} onClick={(e) => {*/}
-                            {/*  e.stopPropagation();*/}
-                            {/*  viewLogistics(item);*/}
-                            {/*}}>查看物流</Button>*/}
-                            <Button size={'small'} type="primary" onClick={(e) => {
-                              e.stopPropagation();
-                              confirmReceive(item);
-                            }}>确认收货</Button>
-                          </Space>
+                        </Space>
                         )}
-
-                        {/* 退款/售后状态：显示查看进度和撤销申请 */}
-                        {(item.orderStatus === 4 || item.orderStatus === 7) && (
-                          <Space>
-                            {/*<Button size={'small'} onClick={(e) => {*/}
-                            {/*  e.stopPropagation();*/}
-                            {/*  viewProgress(item);*/}
-                            {/*}}>查看进度</Button>*/}
-                          </Space>
-                        )}
-
                       </Space>
-                      )}
-                    </Space>
-                  </Cell>
-                )
-              })}
-          </InfiniteLoading>
-        )}
-      </View>
+                    </Cell>
+                  )
+                })}
+            </InfiniteLoading>
+          )}
+        </View>
+      </PullToRefresh>
 
       {/* 取消订单确认对话框 */}
       <Dialog