feat(dealer): 新增电费收益页面并优化订单展示

- 在应用配置中添加电费收益页面路由- 创建电费收益页面组件及配置文件- 修改订单页面标题为"电费订单"- 订单列表增加用户ID筛选条件
- 调整订单详情中的收益比率显示为税费
- 更新空状态提示文案以区分不同页面内容
This commit is contained in:
2025-10-13 09:22:43 +08:00
parent 1453e79104
commit e867537375
5 changed files with 201 additions and 3 deletions

View File

@@ -58,6 +58,7 @@ export default defineAppConfig({
"apply/add", "apply/add",
"withdraw/index", "withdraw/index",
"orders/index", "orders/index",
"capital/index",
"team/index", "team/index",
"qrcode/index", "qrcode/index",
"invite-stats/index", "invite-stats/index",

View File

@@ -0,0 +1,3 @@
export default definePageConfig({
navigationBarTitleText: '电费收益'
})

View File

@@ -0,0 +1,193 @@
import React, {useState, useEffect, useCallback} from 'react'
import {View, Text, ScrollView} from '@tarojs/components'
import {Empty, 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) => {
if (!dealerUser?.userId) return
try {
if (isRefresh) {
setRefreshing(true)
} else if (page === 1) {
setLoading(true)
} else {
setLoadingMore(true)
}
const result = await pageShopDealerOrder({
isInvalid: 0,
page,
limit: 10
})
if (result?.list) {
const newOrders = result.list.map(order => ({
...order,
orderNo: `${order.orderId}`,
customerName: `用户${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) => {
if (isInvalid === 1) return '未签约'
if (isSettled === 1) return '已结算'
return '待结算'
}
// const getStatusColor = (isSettled?: number, isInvalid?: number) => {
// if (isInvalid === 1) return 'danger'
// if (isSettled === 1) return 'success'
// return 'warning'
// }
const renderOrderItem = (order: OrderWithDetails) => (
<View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
<View className="flex justify-between items-start mb-1">
<Text className="font-semibold text-gray-800">
</Text>
<Text className="text-lg text-orange-500 font-semibold">
¥{(Number(order.orderPrice) * 10).toFixed(2)}
</Text>
</View>
<View className="flex justify-between items-center mb-1">
<Text className="text-sm text-gray-400">
{order.comments}
</Text>
<Text className="text-sm text-gray-400">
{order.rate}
</Text>
</View>
<View className="flex justify-between items-center">
<Text className="text-sm text-gray-400">
{order.orderPrice || '0.00'}
</Text>
<Text className="text-sm text-gray-400">
{getStatusText(order.isSettled, order.isInvalid)}
</Text>
</View>
<View className="flex justify-between items-center mb-1">
<Text className="text-sm text-gray-400">
{order.settleTime}
</Text>
</View>
</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="暂无收益" style={{
backgroundColor: 'transparent'
}}/>
)}
</View>
</ScrollView>
</PullToRefresh>
</View>
)
}
export default DealerOrders

View File

@@ -1,3 +1,3 @@
export default definePageConfig({ export default definePageConfig({
navigationBarTitleText: '电费收益' navigationBarTitleText: '电费订单'
}) })

View File

@@ -37,6 +37,7 @@ const DealerOrders: React.FC = () => {
const result = await pageShopDealerOrder({ const result = await pageShopDealerOrder({
isInvalid: 0, isInvalid: 0,
userId: Taro.getStorageSync('UserId'),
page, page,
limit: 10 limit: 10
}) })
@@ -119,7 +120,7 @@ const DealerOrders: React.FC = () => {
{order.comments} {order.comments}
</Text> </Text>
<Text className="text-sm text-gray-400"> <Text className="text-sm text-gray-400">
{order.rate} {order.rate}
</Text> </Text>
</View> </View>
@@ -179,7 +180,7 @@ const DealerOrders: React.FC = () => {
)} )}
</> </>
) : ( ) : (
<Empty description="暂无收益" style={{ <Empty description="暂无电费订单" style={{
backgroundColor: 'transparent' backgroundColor: 'transparent'
}}/> }}/>
)} )}