forked from gxwebsoft/mp-10550
feat(order): 添加下拉刷新功能到订单列表
- 引入 PullToRefresh 组件实现下拉刷新功能 - 将原有滚动容器包装到 PullToRefresh 组件内部 - 实现下拉刷新逻辑，重置分页数据并重新加载 - 设置刷新头部高度为 60 - 保留原有的无限滚动和上拉加载功能
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user