feat: search, player detail, shop detail, order flow, chat, review, and dispute pages

2026-02-20 15:10:31 +08:00
parent e2b47681a3
commit 6ae5e533c1
10 changed files with 1865 additions and 34 deletions
@@ -1,8 +1,131 @@
+"use client"
+
+import { Clock, MessageSquare, RefreshCw } from "lucide-react"
+import Link from "next/link"
+import { useState } from "react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { mockOrders } from "@/lib/mock-data"
+import type { OrderStatus } from "@/lib/types"
+import { cn } from "@/lib/utils"
+import { useAuthStore } from "@/store/auth"
+
+const statusLabels: Record<OrderStatus, string> = {
+  pending_payment: "待支付",
+  pending_accept: "待接单",
+  in_progress: "进行中",
+  pending_close: "待结单",
+  pending_review: "待评价",
+  disputed: "争议中",
+  completed: "已完成",
+  cancelled: "已取消",
+}
+
+const statusColors: Record<OrderStatus, string> = {
+  pending_payment: "bg-yellow-100 text-yellow-800",
+  pending_accept: "bg-blue-100 text-blue-800",
+  in_progress: "bg-green-100 text-green-800",
+  pending_close: "bg-orange-100 text-orange-800",
+  pending_review: "bg-purple-100 text-purple-800",
+  disputed: "bg-red-100 text-red-800",
+  completed: "bg-gray-100 text-gray-800",
+  cancelled: "bg-gray-100 text-gray-500",
+}
+
+type TabFilter = "all" | "active" | "completed" | "disputed"
+
 export default function OrderListPage() {
+  const [tab, setTab] = useState<TabFilter>("all")
+  const { currentRole } = useAuthStore()
+
+  const filtered = mockOrders.filter((order) => {
+    if (tab === "active")
+      return ["pending_accept", "in_progress", "pending_close", "pending_review"].includes(
+        order.status,
+      )
+    if (tab === "completed") return order.status === "completed" || order.status === "cancelled"
+    if (tab === "disputed") return order.status === "disputed"
+    return true
+  })
+
  return (
    <div className="container mx-auto py-8 px-4">
-      <h1 className="text-2xl font-bold">我的订单</h1>
-      <p className="mt-2 text-muted-foreground">查看和管理订单</p>
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">我的订单</h1>
+        <Badge variant="outline" className="text-xs">
+          {currentRole === "consumer"
+            ? "消费者视角"
+            : currentRole === "player"
+              ? "打手视角"
+              : "店主视角"}
+        </Badge>
+      </div>
+
+      <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
+        <TabsList>
+          <TabsTrigger value="all">全部</TabsTrigger>
+          <TabsTrigger value="active">进行中</TabsTrigger>
+          <TabsTrigger value="completed">已完成</TabsTrigger>
+          <TabsTrigger value="disputed">争议</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value={tab} className="mt-4 space-y-3">
+          {filtered.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">暂无订单</div>
+          ) : (
+            filtered.map((order) => (
+              <Card key={order.id}>
+                <CardHeader className="pb-3">
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-base">{order.service.title}</CardTitle>
+                    <Badge className={cn("text-xs", statusColors[order.status])}>
+                      {statusLabels[order.status]}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {currentRole === "consumer"
+                      ? `打手: ${order.playerName}`
+                      : `消费者: ${order.consumerName}`}
+                    {order.shopName && ` · ${order.shopName}`}
+                  </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">
+                      {order.status === "in_progress" && (
+                        <Button variant="outline" size="sm" asChild>
+                          <Link href={`/chat/chat1`}>
+                            <MessageSquare className="mr-1 h-3.5 w-3.5" />
+                            聊天
+                          </Link>
+                        </Button>
+                      )}
+                      {order.status === "completed" && (
+                        <Button variant="outline" size="sm">
+                          <RefreshCw className="mr-1 h-3.5 w-3.5" />
+                          再来一单
+                        </Button>
+                      )}
+                      <Button size="sm" asChild>
+                        <Link href={`/order/${order.id}`}>查看详情</Link>
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </TabsContent>
+      </Tabs>
    </div>
  )
 }