feie9454/csdesign-pc-diy-store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1

Browse Source
This commit is contained in:
feie9454
2025-06-22 11:34:32 +08:00
parent 142992a6c9
commit 7d139b22db
55 changed files with 11035 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/orders/[id]/page.tsx
+398
View File
@@ -0,0 +1,398 @@
'use client'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import {
ArrowLeft,
Package,
Calendar,
DollarSign,
User,
MapPin,
Phone,
Mail,
Truck,
CheckCircle,
XCircle,
Clock
} from 'lucide-react'
interface OrderItem {
id: string
quantity: number
price: number
component: {
id: string
name: string
brand: string
model: string
imageUrl?: string
componentType: {
name: string
}
}
}
interface Order {
id: string
orderNumber: string
totalAmount: number
status: string
createdAt: string
updatedAt: string
orderItems: OrderItem[]
user: {
username: string
email: string
}
}
const statusMap: { [key: string]: { text: string; color: string; icon: any } } = {
PENDING: { text: '待确认', color: 'bg-yellow-100 text-yellow-800 border-yellow-200', icon: Clock },
CONFIRMED: { text: '已确认', color: 'bg-blue-100 text-blue-800 border-blue-200', icon: CheckCircle },
PROCESSING: { text: '处理中', color: 'bg-purple-100 text-purple-800 border-purple-200', icon: Package },
SHIPPED: { text: '已发货', color: 'bg-green-100 text-green-800 border-green-200', icon: Truck },
DELIVERED: { text: '已送达', color: 'bg-green-100 text-green-800 border-green-200', icon: CheckCircle },
CANCELLED: { text: '已取消', color: 'bg-red-100 text-red-800 border-red-200', icon: XCircle },
}
export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
const [order, setOrder] = useState<Order | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [isCancelling, setIsCancelling] = useState(false)
const [orderId, setOrderId] = useState<string>('')
const router = useRouter()
useEffect(() => {
const getParams = async () => {
const { id } = await params
setOrderId(id)
}
getParams()
}, [params])
useEffect(() => {
if (orderId) {
loadOrderDetail()
}
}, [orderId])
const loadOrderDetail = async () => {
try {
const token = localStorage.getItem('token')
if (!token) {
router.push('/login')
return
}
const response = await fetch(`/api/orders/${(await params).id}`, {
headers: {
'Authorization': `Bearer ${token}`
}
})
if (response.ok) {
const data = await response.json()
setOrder(data)
} else if (response.status === 401) {
localStorage.removeItem('token')
localStorage.removeItem('user')
router.push('/login')
} else if (response.status === 404) {
router.push('/orders')
}
} catch (error) {
console.error('加载订单详情失败:', error)
} finally {
setIsLoading(false)
}
}
const handleCancelOrder = async () => {
if (!order || order.status !== 'PENDING') {
alert('当前订单状态不允许取消')
return
}
if (!confirm('确定要取消这个订单吗？取消后将恢复商品库存。')) {
return
}
setIsCancelling(true)
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) {
const updatedOrder = await response.json()
setOrder(updatedOrder)
alert('订单已成功取消')
} else {
const error = await response.json()
alert(error.message || '取消订单失败')
}
} catch (error) {
console.error('取消订单失败:', error)
alert('取消订单失败，请重试')
} finally {
setIsCancelling(false)
}
}
const handleReorder = async () => {
if (!order) return
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('商品已添加到购物车！')
router.push('/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>
)
}
if (!order) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<Package className="h-24 w-24 text-gray-300 mx-auto mb-6" />
<h2 className="text-2xl font-semibold text-gray-900 mb-4">订单不存在</h2>
<Link
href="/orders"
className="inline-flex items-center bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
>
<ArrowLeft className="h-5 w-5 mr-2" />
返回订单列表
</Link>
</div>
</div>
)
}
const statusConfig = statusMap[order.status] || { text: order.status, color: 'bg-gray-100 text-gray-800 border-gray-200', icon: Package }
const StatusIcon = statusConfig.icon
return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="flex items-center justify-between mb-8">
<div className="flex items-center space-x-4">
<Link
href="/orders"
className="text-gray-600 hover:text-gray-900 transition-colors"
>
<ArrowLeft className="h-6 w-6" />
</Link>
<div>
<h1 className="text-3xl font-bold text-gray-900">订单详情</h1>
<p className="text-gray-600">订单号: {order.orderNumber}</p>
</div>
</div>
</div>
<div className="space-y-6">
{/* Order Status */}
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className={`p-3 rounded-full ${statusConfig.color.replace('text-', 'bg-').replace('bg-', 'bg-').replace('-100', '-200')}`}>
<StatusIcon className="h-6 w-6" />
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900">订单状态</h2>
<span className={`inline-flex px-3 py-1 text-sm font-medium rounded-full border ${statusConfig.color}`}>
{statusConfig.text}
</span>
</div>
</div>
<div className="text-right">
<p className="text-sm text-gray-600">下单时间</p>
<p className="font-medium text-gray-900">
{new Date(order.createdAt).toLocaleString('zh-CN')}
</p>
{order.updatedAt !== order.createdAt && (
<>
<p className="text-sm text-gray-600 mt-2">更新时间</p>
<p className="font-medium text-gray-900">
{new Date(order.updatedAt).toLocaleString('zh-CN')}
</p>
</>
)}
</div>
</div>
</div>
{/* Order Items */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">订单商品</h3>
</div>
<div className="p-6">
<div className="space-y-6">
{order.orderItems.map((item, index) => (
<div key={item.id} className={`flex items-center space-x-4 ${index > 0 ? 'pt-6 border-t border-gray-200' : ''}`}>
<div className="w-20 h-20 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-10 w-10 text-gray-400" />
)}
</div>
<div className="flex-1">
<h4 className="font-medium text-gray-900 text-lg">{item.component?.name || '未知商品'}</h4>
<div className="mt-1 space-y-1">
<p className="text-sm text-gray-600">
品牌: {item.component?.brand || '未知品牌'}
</p>
<p className="text-sm text-gray-600">
型号: {item.component?.model || '未知型号'}
</p>
<p className="text-sm text-gray-600">
类型: {item.component?.componentType?.name || '未知类型'}
</p>
</div>
</div>
<div className="text-right">
<p className="text-lg font-medium text-gray-900">¥{item.price}</p>
<p className="text-sm text-gray-600">数量: {item.quantity}</p>
<p className="text-sm font-medium text-red-600">
小计: ¥{(item.price * item.quantity).toFixed(2)}
</p>
</div>
</div>
))}
</div>
</div>
</div>
{/* Order Summary */}
<div className="bg-white rounded-lg shadow-sm p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">订单汇总</h3>
<div className="space-y-3">
<div className="flex justify-between text-sm">
<span className="text-gray-600">商品数量:</span>
<span className="text-gray-900">{order.orderItems.length} 件</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">商品总价:</span>
<span className="text-gray-900">¥{order.totalAmount}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-600">运费:</span>
<span className="text-gray-900">免费</span>
</div>
<div className="border-t border-gray-200 pt-3">
<div className="flex justify-between">
<span className="text-lg font-semibold text-gray-900">实付款:</span>
<span className="text-xl font-bold text-red-600">¥{order.totalAmount}</span>
</div>
</div>
</div>
</div>
{/* User Info */}
<div className="bg-white rounded-lg shadow-sm p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">用户信息</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center space-x-3">
<User className="h-5 w-5 text-gray-400" />
<div>
<p className="text-sm text-gray-600">用户名</p>
<p className="font-medium text-gray-900">{order.user.username}</p>
</div>
</div>
<div className="flex items-center space-x-3">
<Mail className="h-5 w-5 text-gray-400" />
<div>
<p className="text-sm text-gray-600">邮箱</p>
<p className="font-medium text-gray-900">{order.user.email}</p>
</div>
</div>
</div>
</div>
{/* Actions */}
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex justify-between items-center">
<div className="text-sm text-gray-600">
<Calendar className="h-4 w-4 inline mr-1" />
订单创建于 {new Date(order.createdAt).toLocaleDateString('zh-CN')}
</div>
<div className="flex space-x-3">
{order.status === 'PENDING' && (
<button
onClick={handleCancelOrder}
disabled={isCancelling}
className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 disabled:bg-red-300 disabled:cursor-not-allowed transition-colors"
>
{isCancelling ? '取消中...' : '取消订单'}
</button>
)}
{order.status === 'DELIVERED' && (
<button
onClick={handleReorder}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
>
再次购买
</button>
)}
<Link
href="/orders"
className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-colors"
>
返回订单列表
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
app/orders/page.tsx
+334
View File
@@ -0,0 +1,334 @@
'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>
)
}