335 lines
12 KiB
TypeScript
335 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { Package, Calendar, DollarSign, Eye, Filter } from 'lucide-react'
|
|
|
|
interface OrderItem {
|
|
id: string
|
|
quantity: number
|
|
price: number
|
|
component: {
|
|
id: string
|
|
name: string
|
|
brand: string
|
|
imageUrl?: string
|
|
componentType: {
|
|
name: string
|
|
}
|
|
}
|
|
}
|
|
|
|
interface Order {
|
|
id: string
|
|
orderNumber: string
|
|
totalAmount: number
|
|
status: string
|
|
createdAt: string
|
|
orderItems: OrderItem[]
|
|
}
|
|
|
|
const statusMap: { [key: string]: { text: string; color: string } } = {
|
|
PENDING: { text: '待确认', color: 'bg-yellow-100 text-yellow-800' },
|
|
CONFIRMED: { text: '已确认', color: 'bg-blue-100 text-blue-800' },
|
|
PROCESSING: { text: '处理中', color: 'bg-purple-100 text-purple-800' },
|
|
SHIPPED: { text: '已发货', color: 'bg-green-100 text-green-800' },
|
|
DELIVERED: { text: '已送达', color: 'bg-green-100 text-green-800' },
|
|
CANCELLED: { text: '已取消', color: 'bg-red-100 text-red-800' },
|
|
}
|
|
|
|
export default function OrdersPage() {
|
|
const [orders, setOrders] = useState<Order[]>([])
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [selectedStatus, setSelectedStatus] = useState<string>('ALL')
|
|
const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadOrders()
|
|
}, [])
|
|
|
|
const loadOrders = async () => {
|
|
try {
|
|
const token = localStorage.getItem('token')
|
|
if (!token) {
|
|
window.location.href = '/login'
|
|
return
|
|
}
|
|
|
|
const response = await fetch('/api/orders', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`
|
|
}
|
|
})
|
|
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setOrders(data)
|
|
} else if (response.status === 401) {
|
|
localStorage.removeItem('token')
|
|
localStorage.removeItem('user')
|
|
window.location.href = '/login'
|
|
}
|
|
} catch (error) {
|
|
console.error('加载订单失败:', error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
const filteredOrders = selectedStatus === 'ALL'
|
|
? orders
|
|
: orders.filter(order => order.status === selectedStatus)
|
|
|
|
const handleCancelOrder = async (orderId: string) => {
|
|
if (!confirm('确定要取消这个订单吗？取消后将恢复商品库存。')) {
|
|
return
|
|
}
|
|
|
|
setCancellingOrderId(orderId)
|
|
|
|
try {
|
|
const token = localStorage.getItem('token')
|
|
const response = await fetch(`/api/orders/${orderId}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({ action: 'cancel' })
|
|
})
|
|
|
|
if (response.ok) {
|
|
// 重新加载订单列表
|
|
await loadOrders()
|
|
alert('订单已成功取消')
|
|
} else {
|
|
const error = await response.json()
|
|
alert(error.message || '取消订单失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('取消订单失败:', error)
|
|
alert('取消订单失败，请重试')
|
|
} finally {
|
|
setCancellingOrderId(null)
|
|
} }
|
|
|
|
const handleReorder = async (order: Order) => {
|
|
const token = localStorage.getItem('token')
|
|
if (!token) {
|
|
alert('请先登录')
|
|
return
|
|
}
|
|
|
|
try {
|
|
// 批量添加订单商品到购物车
|
|
for (const item of order.orderItems) {
|
|
await fetch('/api/cart', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({
|
|
componentId: item.component.id,
|
|
quantity: item.quantity
|
|
})
|
|
})
|
|
}
|
|
|
|
window.dispatchEvent(new Event('cart-updated'))
|
|
alert('商品已添加到购物车！')
|
|
window.location.href = '/cart'
|
|
} catch (error) {
|
|
console.error('添加到购物车失败:', error)
|
|
alert('添加失败，请重试')
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
|
<p className="text-gray-600">加载中...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">我的订单</h1>
|
|
<Link
|
|
href="/components"
|
|
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
继续购物
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Status Filter */}
|
|
<div className="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<div className="flex items-center space-x-4">
|
|
<Filter className="h-5 w-5 text-gray-600" />
|
|
<span className="text-gray-700">筛选:</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
onClick={() => setSelectedStatus('ALL')}
|
|
className={`px-3 py-1 rounded-full text-sm transition-colors ${
|
|
selectedStatus === 'ALL'
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
全部
|
|
</button>
|
|
{Object.entries(statusMap).map(([status, config]) => (
|
|
<button
|
|
key={status}
|
|
onClick={() => setSelectedStatus(status)}
|
|
className={`px-3 py-1 rounded-full text-sm transition-colors ${
|
|
selectedStatus === status
|
|
? 'bg-blue-600 text-white'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{config.text}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Orders List */}
|
|
{filteredOrders.length === 0 ? (
|
|
<div className="text-center py-16">
|
|
<Package className="h-24 w-24 text-gray-300 mx-auto mb-6" />
|
|
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
|
|
{selectedStatus === 'ALL' ? '暂无订单' : '暂无该状态的订单'}
|
|
</h2>
|
|
<p className="text-gray-600 mb-8">
|
|
{selectedStatus === 'ALL'
|
|
? '还没有任何订单，去看看有什么好东西吧！'
|
|
: '可以试试其他状态筛选'
|
|
}
|
|
</p>
|
|
<Link
|
|
href="/components"
|
|
className="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
|
>
|
|
<Package className="h-5 w-5 mr-2" />
|
|
去购物
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{filteredOrders.map((order) => (
|
|
<div key={order.id} className="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
{/* Order Header */}
|
|
<div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
|
|
<div className="flex justify-between items-center">
|
|
<div className="flex items-center space-x-6">
|
|
<div>
|
|
<p className="text-sm text-gray-600">订单号</p>
|
|
<p className="font-medium text-gray-900">{order.orderNumber}</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">下单时间</p>
|
|
<p className="font-medium text-gray-900">
|
|
{new Date(order.createdAt).toLocaleString('zh-CN')}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-600">订单状态</p>
|
|
<span className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${
|
|
statusMap[order.status]?.color || 'bg-gray-100 text-gray-800'
|
|
}`}>
|
|
{statusMap[order.status]?.text || order.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="text-sm text-gray-600">订单金额</p>
|
|
<p className="text-xl font-bold text-red-600">¥{order.totalAmount.toFixed(2)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Order Items */}
|
|
<div className="p-6">
|
|
<div className="space-y-4">
|
|
{order.orderItems.map((item) => (
|
|
<div key={item.id} className="flex items-center space-x-4"> <div className="w-16 h-16 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
{item.component?.imageUrl ? (
|
|
<img loading='lazy'
|
|
src={item.component.imageUrl}
|
|
alt={item.component?.name || '商品图片'}
|
|
className="max-w-full max-h-full object-contain"
|
|
/>
|
|
) : (
|
|
<Package className="h-8 w-8 text-gray-400" />
|
|
)}
|
|
</div><div className="flex-1">
|
|
<h3 className="font-medium text-gray-900">{item.component?.name || '未知商品'}</h3>
|
|
<p className="text-sm text-gray-600">
|
|
{item.component?.brand || '未知品牌'} | {item.component?.componentType?.name || '未知类型'}
|
|
</p>
|
|
<p className="text-sm text-gray-600">数量: {item.quantity}</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-medium text-gray-900">¥{item.price}</p>
|
|
<p className="text-sm text-gray-600">
|
|
小计: ¥{(item.price * item.quantity).toFixed(2)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Order Actions */}
|
|
<div className="flex justify-between items-center mt-6 pt-6 border-t border-gray-200">
|
|
<div className="flex items-center space-x-2 text-sm text-gray-600">
|
|
<Calendar className="h-4 w-4" />
|
|
<span>共 {order.orderItems.length} 件商品</span>
|
|
<DollarSign className="h-4 w-4 ml-4" />
|
|
<span>实付款: ¥{order.totalAmount}</span>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Link
|
|
href={`/orders/${order.id}`}
|
|
className="inline-flex items-center text-blue-600 hover:text-blue-800 text-sm"
|
|
>
|
|
<Eye className="h-4 w-4 mr-1" />
|
|
查看详情
|
|
</Link> {order.status === 'PENDING' && (
|
|
<button
|
|
onClick={() => handleCancelOrder(order.id)}
|
|
disabled={cancellingOrderId === order.id}
|
|
className="text-red-600 hover:text-red-800 text-sm disabled:text-red-300 disabled:cursor-not-allowed"
|
|
>
|
|
{cancellingOrderId === order.id ? '取消中...' : '取消订单'}
|
|
</button>
|
|
)}
|
|
{order.status === 'DELIVERED' && (
|
|
<button
|
|
onClick={() => handleReorder(order)}
|
|
className="text-blue-600 hover:text-blue-800 text-sm"
|
|
>
|
|
再次购买
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|