gxwebsoft/mp-10550
Template
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): 从文章详情页面改为文章管理页面

Browse Source 
- 修改页面配置，设置新的导航栏标题和样式
- 重新设计页面布局，增加搜索栏、文章列表和操作按钮
- 添加文章搜索、分页加载和删除功能
- 优化文章列表项的样式和交互
- 新增礼品卡相关API和组件
- 更新优惠券组件，增加到期提醒和筛选功能
This commit is contained in:
赵忠林
2025-08-13 10:11:57 +08:00
parent 0e457f66d8
commit a1cacc04e8
67 changed files with 6278 additions and 2816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/dealer/orders/index.tsx
View File

@@ -1,238 +1,15 @@
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>
)
}
import React from 'react'
import { View, Text } from '@tarojs/components'
import { Cell, Empty } from '@nutui/nutui-react-taro'
const DealerOrders: React.FC = () => {
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 className="p-4">
<Text className="text-lg font-bold mb-4">分销订单</Text>
<Empty description="暂无分销订单" />
</View>
)
}
export default DistributionOrders
export default DealerOrders