补分销中心页面
This commit is contained in:
238
src/dealer/orders/index.tsx
Normal file
238
src/dealer/orders/index.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { View, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { Empty, Tabs, TabPane } from '@nutui/nutui-react-taro'
|
||||
import './index.scss'
|
||||
|
||||
interface DistributionOrder {
|
||||
id: string
|
||||
orderNo: string
|
||||
productName: string
|
||||
productImage: string
|
||||
buyerName: string
|
||||
orderAmount: number
|
||||
commission: number
|
||||
commissionRate: number
|
||||
status: 'pending' | 'confirmed' | 'settled'
|
||||
statusText: string
|
||||
createTime: string
|
||||
settleTime?: string
|
||||
}
|
||||
|
||||
function DistributionOrders() {
|
||||
const [activeTab, setActiveTab] = useState('0')
|
||||
const [orders, setOrders] = useState<DistributionOrder[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [stats, setStats] = useState({
|
||||
totalCommission: 0,
|
||||
pendingCommission: 0,
|
||||
settledCommission: 0,
|
||||
totalOrders: 0
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
Taro.setNavigationBarTitle({
|
||||
title: '分销订单'
|
||||
})
|
||||
loadOrders()
|
||||
}, [])
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
// 模拟数据
|
||||
const mockData: DistributionOrder[] = [
|
||||
{
|
||||
id: '1',
|
||||
orderNo: 'DD202401150001',
|
||||
productName: '有机蔬菜礼盒装',
|
||||
productImage: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||||
buyerName: '张***',
|
||||
orderAmount: 299.00,
|
||||
commission: 29.90,
|
||||
commissionRate: 10,
|
||||
status: 'settled',
|
||||
statusText: '已结算',
|
||||
createTime: '2024-01-15 14:30:00',
|
||||
settleTime: '2024-01-16 10:00:00'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
orderNo: 'DD202401140002',
|
||||
productName: '新鲜水果组合',
|
||||
productImage: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||||
buyerName: '李***',
|
||||
orderAmount: 158.00,
|
||||
commission: 15.80,
|
||||
commissionRate: 10,
|
||||
status: 'confirmed',
|
||||
statusText: '已确认',
|
||||
createTime: '2024-01-14 09:20:00'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
orderNo: 'DD202401130003',
|
||||
productName: '农家土鸡蛋',
|
||||
productImage: 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png',
|
||||
buyerName: '王***',
|
||||
orderAmount: 88.00,
|
||||
commission: 8.80,
|
||||
commissionRate: 10,
|
||||
status: 'pending',
|
||||
statusText: '待确认',
|
||||
createTime: '2024-01-13 16:45:00'
|
||||
}
|
||||
]
|
||||
|
||||
// 计算统计数据
|
||||
const totalCommission = mockData.reduce((sum, order) => sum + order.commission, 0)
|
||||
const pendingCommission = mockData.filter(o => o.status === 'pending').reduce((sum, order) => sum + order.commission, 0)
|
||||
const settledCommission = mockData.filter(o => o.status === 'settled').reduce((sum, order) => sum + order.commission, 0)
|
||||
|
||||
setTimeout(() => {
|
||||
setOrders(mockData)
|
||||
setStats({
|
||||
totalCommission,
|
||||
pendingCommission,
|
||||
settledCommission,
|
||||
totalOrders: mockData.length
|
||||
})
|
||||
setLoading(false)
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('加载分销订单失败:', error)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'settled':
|
||||
return '#10B981'
|
||||
case 'confirmed':
|
||||
return '#3B82F6'
|
||||
case 'pending':
|
||||
return '#F59E0B'
|
||||
default:
|
||||
return '#6B7280'
|
||||
}
|
||||
}
|
||||
|
||||
const getFilteredOrders = () => {
|
||||
switch (activeTab) {
|
||||
case '1':
|
||||
return orders.filter(order => order.status === 'pending')
|
||||
case '2':
|
||||
return orders.filter(order => order.status === 'confirmed')
|
||||
case '3':
|
||||
return orders.filter(order => order.status === 'settled')
|
||||
default:
|
||||
return orders
|
||||
}
|
||||
}
|
||||
|
||||
const handleOrderClick = (order: DistributionOrder) => {
|
||||
Taro.showModal({
|
||||
title: '订单详情',
|
||||
content: `
|
||||
订单号：${order.orderNo}
|
||||
商品：${order.productName}
|
||||
购买人：${order.buyerName}
|
||||
订单金额：¥${order.orderAmount.toFixed(2)}
|
||||
佣金比例：${order.commissionRate}%
|
||||
佣金金额：¥${order.commission.toFixed(2)}
|
||||
下单时间：${order.createTime}
|
||||
${order.settleTime ? `结算时间：${order.settleTime}` : ''}
|
||||
`.trim(),
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className="distribution-orders-page">
|
||||
<View className="loading-container">
|
||||
<View className="text-center text-gray-500">加载中...</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="distribution-orders-page">
|
||||
{/* 统计卡片 */}
|
||||
<View className="stats-card">
|
||||
<View className="stats-grid">
|
||||
<View className="stat-item">
|
||||
<View className="stat-value">¥{stats.totalCommission.toFixed(2)}</View>
|
||||
<View className="stat-label">累计佣金</View>
|
||||
</View>
|
||||
<View className="stat-item">
|
||||
<View className="stat-value">¥{stats.settledCommission.toFixed(2)}</View>
|
||||
<View className="stat-label">已结算</View>
|
||||
</View>
|
||||
<View className="stat-item">
|
||||
<View className="stat-value">¥{stats.pendingCommission.toFixed(2)}</View>
|
||||
<View className="stat-label">待结算</View>
|
||||
</View>
|
||||
<View className="stat-item">
|
||||
<View className="stat-value">{stats.totalOrders}</View>
|
||||
<View className="stat-label">订单数</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 订单列表 */}
|
||||
<View className="orders-container">
|
||||
<Tabs value={activeTab} onChange={(value) => setActiveTab(value)}>
|
||||
<TabPane title="全部" />
|
||||
<TabPane title="待确认" />
|
||||
<TabPane title="已确认" />
|
||||
<TabPane title="已结算" />
|
||||
</Tabs>
|
||||
|
||||
<View className="orders-list">
|
||||
{getFilteredOrders().length === 0 ? (
|
||||
<View className="empty-container">
|
||||
<Empty description="暂无订单" />
|
||||
</View>
|
||||
) : (
|
||||
getFilteredOrders().map((order) => (
|
||||
<View
|
||||
key={order.id}
|
||||
className="order-item"
|
||||
onClick={() => handleOrderClick(order)}
|
||||
>
|
||||
<View className="order-header">
|
||||
<View className="order-no">订单号：{order.orderNo}</View>
|
||||
<View
|
||||
className="order-status"
|
||||
style={{ color: getStatusColor(order.status) }}
|
||||
>
|
||||
{order.statusText}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="order-content">
|
||||
<Image className="product-image" src={order.productImage} />
|
||||
<View className="order-info">
|
||||
<View className="product-name">{order.productName}</View>
|
||||
<View className="buyer-info">购买人：{order.buyerName}</View>
|
||||
<View className="amount-info">
|
||||
<View className="order-amount">订单金额：¥{order.orderAmount.toFixed(2)}</View>
|
||||
<View className="commission">佣金：¥{order.commission.toFixed(2)}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="order-time">下单时间：{order.createTime}</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default DistributionOrders
|
||||
Reference in New Issue
Block a user