zetaloop
280 lines
9.3 KiB
TypeScript
280 lines
9.3 KiB
TypeScript
"use client"
|
|
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { EmptyState } from "@/components/ui/empty-state"
|
|
import { StatusBadge } from "@/components/ui/status-badge"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { listChatSessions, listOrders } from "@/lib/api"
|
|
import { statusLabels } from "@/lib/constants"
|
|
import {
|
|
isActiveOrder,
|
|
isCompletedOrder,
|
|
isDisputedOrder,
|
|
isPendingDispatch,
|
|
} from "@/lib/domain/order-filters"
|
|
import { useMyShop } from "@/lib/hooks/use-my-shop"
|
|
import type { OrderStatus, UserRole } from "@/lib/types"
|
|
import { useAuthStore } from "@/store/auth"
|
|
import { ClipboardList, Clock, MessageSquare, RefreshCw } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useEffect, useState } from "react"
|
|
|
|
type OrderStatusBadgeVariant = "success" | "warning" | "info" | "neutral" | "destructive"
|
|
|
|
const statusVariants: Record<OrderStatus, OrderStatusBadgeVariant> = {
|
|
pending_payment: "warning",
|
|
pending_accept: "info",
|
|
in_progress: "success",
|
|
pending_close: "info",
|
|
pending_review: "info",
|
|
disputed: "destructive",
|
|
completed: "success",
|
|
cancelled: "neutral",
|
|
}
|
|
|
|
type TabFilter = "all" | "active" | "completed" | "disputed"
|
|
|
|
const consumerTabs = [
|
|
{ value: "all", label: "全部" },
|
|
{ value: "active", label: "进行中" },
|
|
{ value: "completed", label: "已完成" },
|
|
{ value: "disputed", label: "争议" },
|
|
]
|
|
|
|
const playerTabs = [
|
|
{ value: "all", label: "全部" },
|
|
{ value: "pending", label: "待接单" },
|
|
{ value: "active", label: "进行中" },
|
|
{ value: "completed", label: "已完成" },
|
|
]
|
|
|
|
const ownerTabs = [
|
|
{ value: "all", label: "全部" },
|
|
{ value: "pending", label: "待派单" },
|
|
{ value: "active", label: "进行中" },
|
|
{ value: "completed", label: "已完成" },
|
|
{ value: "disputed", label: "争议" },
|
|
]
|
|
|
|
function getOrderRole(role: UserRole): "consumer" | "player" | "owner" | undefined {
|
|
if (role === "consumer" || role === "player" || role === "owner") {
|
|
return role
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
export default function OrderListPage() {
|
|
const { currentRole, user } = useAuthStore()
|
|
const {
|
|
shop: ownerShop,
|
|
loading: shopLoading,
|
|
error: shopError,
|
|
} = useMyShop(currentRole === "owner")
|
|
|
|
if (currentRole === "owner" && shopLoading) {
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-8">
|
|
<EmptyState title="加载中" description="正在读取店铺订单视角..." icon={RefreshCw} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (currentRole === "owner" && shopError) {
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-8">
|
|
<EmptyState title="无法读取订单" description={shopError} icon={ClipboardList} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<OrderListContent
|
|
key={currentRole}
|
|
currentRole={currentRole}
|
|
userId={user?.id}
|
|
ownerShopId={ownerShop?.id}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function OrderListContent({
|
|
currentRole,
|
|
userId,
|
|
ownerShopId,
|
|
}: {
|
|
currentRole: UserRole
|
|
userId?: string
|
|
ownerShopId?: string
|
|
}) {
|
|
const orderRole = getOrderRole(currentRole)
|
|
const [tab, setTab] = useState<TabFilter | "pending">("all")
|
|
const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
|
|
const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
if (!orderRole) {
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}
|
|
|
|
void (async () => {
|
|
try {
|
|
const items = await Promise.resolve(listOrders({ role: orderRole }))
|
|
if (cancelled) return
|
|
setOrders(items)
|
|
} catch {
|
|
if (cancelled) return
|
|
setOrders([])
|
|
}
|
|
})()
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [orderRole])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
void (async () => {
|
|
try {
|
|
const items = await Promise.resolve(listChatSessions())
|
|
if (cancelled) return
|
|
setSessions(items)
|
|
} catch {
|
|
if (cancelled) return
|
|
setSessions([])
|
|
}
|
|
})()
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [])
|
|
|
|
const tabs =
|
|
currentRole === "consumer" ? consumerTabs : currentRole === "player" ? playerTabs : ownerTabs
|
|
|
|
const roleFiltered = orders.filter((order) => {
|
|
if (currentRole === "consumer") return userId ? order.consumerId === userId : false
|
|
if (currentRole === "player") return userId ? order.playerId === userId : false
|
|
return ownerShopId ? order.shopId === ownerShopId : false
|
|
})
|
|
|
|
const filtered = roleFiltered.filter((order) => {
|
|
if (tab === "pending") return isPendingDispatch(order.status)
|
|
if (tab === "active") return isActiveOrder(order.status)
|
|
if (tab === "completed") return isCompletedOrder(order.status, { includeCancelled: true })
|
|
if (tab === "disputed") return isDisputedOrder(order.status)
|
|
return true
|
|
})
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">我的订单</h1>
|
|
<Badge variant="outline" className="text-xs">
|
|
{currentRole === "consumer"
|
|
? "客户视角"
|
|
: currentRole === "player"
|
|
? "打手视角"
|
|
: currentRole === "owner"
|
|
? "店主视角"
|
|
: "管理员视角"}
|
|
</Badge>
|
|
</div>
|
|
|
|
{!orderRole ? (
|
|
<EmptyState
|
|
title="当前身份暂不支持订单视角"
|
|
description="切换到客户、打手或店主身份后可查看对应订单。"
|
|
icon={ClipboardList}
|
|
/>
|
|
) : (
|
|
<Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter | "pending")}>
|
|
<TabsList variant="line">
|
|
{tabs.map((item) => (
|
|
<TabsTrigger key={item.value} value={item.value}>
|
|
{item.label}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
|
|
<TabsContent value={tab} className="mt-4 space-y-4">
|
|
{filtered.length === 0 ? (
|
|
<EmptyState
|
|
title="暂无订单"
|
|
description="当前筛选下还没有订单记录。"
|
|
icon={ClipboardList}
|
|
/>
|
|
) : (
|
|
filtered.map((order) => (
|
|
<Card key={order.id} className="border-border/80 shadow-sm">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<CardTitle className="text-base">{order.service.title}</CardTitle>
|
|
<StatusBadge
|
|
status={statusVariants[order.status]}
|
|
className="text-xs font-normal"
|
|
>
|
|
{statusLabels[order.status]}
|
|
</StatusBadge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{order.service.title}</p>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 text-sm text-muted-foreground">
|
|
<span className="font-medium text-foreground">¥{order.totalPrice}</span>
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="h-3.5 w-3.5" />
|
|
{new Date(order.createdAt).toLocaleDateString("zh-CN")}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{(() => {
|
|
if (order.status !== "in_progress" && order.status !== "pending_close") {
|
|
return null
|
|
}
|
|
const session = sessions.find(
|
|
(item) => item.type === "order" && item.orderId === order.id,
|
|
)
|
|
if (!session) return null
|
|
return (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href={`/chat/${session.id}`}>
|
|
<MessageSquare className="mr-1 h-3.5 w-3.5" />
|
|
聊天
|
|
</Link>
|
|
</Button>
|
|
)
|
|
})()}
|
|
{order.status === "completed" && (
|
|
<Button variant="outline" size="sm" asChild>
|
|
<Link href={`/order/new?serviceId=${order.service.id}`}>
|
|
<RefreshCw className="mr-1 h-3.5 w-3.5" />
|
|
再来一单
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
<Button size="sm" asChild>
|
|
<Link href={`/order/${order.id}`}>查看详情</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|