forked from gxwebsoft/mp-10550
- 在订单模型中新增佣金解冻字段和订单状态字段 - 扩展订单状态判断逻辑支持解冻状态和订单取消状态 - 更新订单状态颜色映射适配新的状态类型 - 修改订单组件中的状态显示以支持新字段 - 优化订单状态文本和颜色渲染逻辑
206 lines
6.4 KiB
TypeScript
206 lines
6.4 KiB
TypeScript
import React, {useState, useEffect, useCallback} from 'react'
|
||
import {View, Text, ScrollView} from '@tarojs/components'
|
||
import {Empty, Tag, PullToRefresh, Loading} from '@nutui/nutui-react-taro'
|
||
import Taro from '@tarojs/taro'
|
||
import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
|
||
import {useDealerUser} from '@/hooks/useDealerUser'
|
||
import type {ShopDealerOrder} from '@/api/shop/shopDealerOrder/model'
|
||
|
||
interface OrderWithDetails extends ShopDealerOrder {
|
||
orderNo?: string
|
||
customerName?: string
|
||
userCommission?: string
|
||
}
|
||
|
||
const DealerOrders: React.FC = () => {
|
||
const [loading, setLoading] = useState<boolean>(false)
|
||
const [refreshing, setRefreshing] = useState<boolean>(false)
|
||
const [loadingMore, setLoadingMore] = useState<boolean>(false)
|
||
const [orders, setOrders] = useState<OrderWithDetails[]>([])
|
||
const [currentPage, setCurrentPage] = useState<number>(1)
|
||
const [hasMore, setHasMore] = useState<boolean>(true)
|
||
|
||
const {dealerUser} = useDealerUser()
|
||
|
||
// 获取订单数据
|
||
const fetchOrders = useCallback(async (page: number = 1, isRefresh: boolean = false) => {
|
||
// 需要当前登录用户ID(用于 resourceId 参数)
|
||
if (!dealerUser || !dealerUser.userId) return
|
||
|
||
try {
|
||
if (isRefresh) {
|
||
setRefreshing(true)
|
||
} else if (page === 1) {
|
||
setLoading(true)
|
||
} else {
|
||
setLoadingMore(true)
|
||
}
|
||
|
||
const result = await pageShopDealerOrder({
|
||
page,
|
||
limit: 10,
|
||
// 后端需要 resourceId=当前登录用户ID 才能正确过滤分销订单
|
||
resourceId: dealerUser.userId
|
||
})
|
||
|
||
if (result?.list) {
|
||
const newOrders = result.list.map(order => ({
|
||
...order,
|
||
// 优先使用接口返回的订单号;没有则降级展示 orderId
|
||
orderNo: order.orderNo ?? (order.orderId != null ? String(order.orderId) : undefined),
|
||
customerName: `${order.nickname}${order.userId}`,
|
||
userCommission: order.firstMoney || '0.00'
|
||
}))
|
||
|
||
if (page === 1) {
|
||
setOrders(newOrders)
|
||
} else {
|
||
setOrders(prev => [...prev, ...newOrders])
|
||
}
|
||
|
||
setHasMore(newOrders.length === 10)
|
||
setCurrentPage(page)
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('获取分销订单失败:', error)
|
||
Taro.showToast({
|
||
title: '获取订单失败',
|
||
icon: 'error'
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
setRefreshing(false)
|
||
setLoadingMore(false)
|
||
}
|
||
}, [dealerUser?.userId])
|
||
|
||
// 下拉刷新
|
||
const handleRefresh = async () => {
|
||
await fetchOrders(1, true)
|
||
}
|
||
|
||
// 加载更多
|
||
const handleLoadMore = async () => {
|
||
if (!loadingMore && hasMore) {
|
||
await fetchOrders(currentPage + 1)
|
||
}
|
||
}
|
||
|
||
// 初始化加载数据
|
||
useEffect(() => {
|
||
if (dealerUser?.userId) {
|
||
fetchOrders(1)
|
||
}
|
||
}, [fetchOrders])
|
||
|
||
const getStatusText = (isSettled?: number, isInvalid?: number, isUnfreeze?: number, orderStatus?: number) => {
|
||
if (orderStatus === 2 || orderStatus === 5 || orderStatus === 6) return '已取消'
|
||
if (isInvalid === 1) return '已失效'
|
||
if (isUnfreeze === 1) return '已解冻'
|
||
if (isSettled === 1) return '已结算'
|
||
return '待结算'
|
||
}
|
||
|
||
const getStatusColor = (isSettled?: number, isInvalid?: number, isUnfreeze?: number, orderStatus?: number) => {
|
||
if (orderStatus === 2 || orderStatus === 5 || orderStatus === 6) return 'default'
|
||
if (isInvalid === 1) return 'danger'
|
||
if (isUnfreeze === 1) return 'success'
|
||
if (isSettled === 1) return 'info'
|
||
return 'warning'
|
||
}
|
||
|
||
const handleGoCapital = () => {
|
||
Taro.navigateTo({url: '/dealer/capital/index'})
|
||
}
|
||
|
||
const renderOrderItem = (order: OrderWithDetails) => (
|
||
<View
|
||
key={order.id}
|
||
className="bg-white rounded-lg p-4 mb-3 shadow-sm"
|
||
onClick={handleGoCapital}
|
||
>
|
||
<View className="flex justify-between items-start mb-1">
|
||
<Text className="font-semibold text-gray-800">
|
||
订单号:{order.orderNo || '-'}
|
||
</Text>
|
||
<Tag type={getStatusColor(order.isSettled, order.isInvalid, order.isUnfreeze,order.orderStatus)}>
|
||
{getStatusText(order.isSettled, order.isInvalid, order.isUnfreeze,order.orderStatus)}
|
||
</Tag>
|
||
</View>
|
||
|
||
{/*<View className="flex justify-between items-center mb-1">*/}
|
||
{/* <Text className="text-sm text-gray-400">*/}
|
||
{/* 订单金额:¥{order.orderPrice || '0.00'}*/}
|
||
{/* </Text>*/}
|
||
{/*</View>*/}
|
||
|
||
<View className="flex justify-between items-center">
|
||
<Text className="text-sm text-gray-400">
|
||
{order.createTime}
|
||
</Text>
|
||
<Text className="text-sm text-gray-400">
|
||
订单金额:¥{order.orderPrice || '0.00'}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
)
|
||
|
||
if (!dealerUser) {
|
||
return (
|
||
<View className="bg-gray-50 min-h-screen flex items-center justify-center">
|
||
<Loading/>
|
||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<View className="min-h-screen bg-gray-50">
|
||
<PullToRefresh
|
||
onRefresh={handleRefresh}
|
||
disabled={refreshing}
|
||
pullingText="下拉刷新"
|
||
canReleaseText="释放刷新"
|
||
refreshingText="刷新中..."
|
||
completeText="刷新完成"
|
||
>
|
||
<ScrollView
|
||
scrollY
|
||
className="h-screen"
|
||
onScrollToLower={handleLoadMore}
|
||
lowerThreshold={50}
|
||
>
|
||
<View className="p-4">
|
||
{loading && orders.length === 0 ? (
|
||
<View className="text-center py-8">
|
||
<Loading/>
|
||
<Text className="text-gray-500 mt-2">加载中...</Text>
|
||
</View>
|
||
) : orders.length > 0 ? (
|
||
<>
|
||
{orders.map(renderOrderItem)}
|
||
{loadingMore && (
|
||
<View className="text-center py-4">
|
||
<Loading/>
|
||
<Text className="text-gray-500 mt-1 text-sm">加载更多...</Text>
|
||
</View>
|
||
)}
|
||
{!hasMore && orders.length > 0 && (
|
||
<View className="text-center py-4">
|
||
<Text className="text-gray-400 text-sm">没有更多数据了</Text>
|
||
</View>
|
||
)}
|
||
</>
|
||
) : (
|
||
<Empty description="暂无分销订单"/>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
</PullToRefresh>
|
||
</View>
|
||
)
|
||
}
|
||
|
||
export default DealerOrders
|