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,110 @@
-export default function ReviewPage({ params: _params }: { params: Promise<{ id: string }> }) {
+"use client"
+
+import { ArrowLeft, Lock, Star } from "lucide-react"
+import Link from "next/link"
+import { use, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { mockOrders } from "@/lib/mock-data"
+
+export default function ReviewPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const order = mockOrders.find((o) => o.id === id)
+  const [rating, setRating] = useState(0)
+  const [hoverRating, setHoverRating] = useState(0)
+  const [content, setContent] = useState("")
+  const [submitted, setSubmitted] = useState(false)
+
+  if (!order) {
+    return (
+      <div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
+        订单不存在
+      </div>
+    )
+  }
+
+  if (submitted) {
+    return (
+      <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
+        <Lock className="h-12 w-12 mx-auto text-muted-foreground" />
+        <h2 className="text-xl font-bold">评价已提交</h2>
+        <p className="text-sm text-muted-foreground">
+          你的评价已密封保存，待对方也提交评价后将同时揭晓
+        </p>
+        <Button asChild>
+          <Link href={`/order/${id}`}>返回订单</Link>
+        </Button>
+      </div>
+    )
+  }
+
  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="container mx-auto py-8 px-4 max-w-lg">
+      <Link
+        href={`/order/${id}`}
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        返回订单
+      </Link>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>评价服务</CardTitle>
+          <p className="text-sm text-muted-foreground">
+            {order.service.title} · {order.playerName}
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <Label>评分</Label>
+            <div className="flex gap-1">
+              {[1, 2, 3, 4, 5].map((star) => (
+                <button
+                  key={star}
+                  type="button"
+                  onClick={() => setRating(star)}
+                  onMouseEnter={() => setHoverRating(star)}
+                  onMouseLeave={() => setHoverRating(0)}
+                  className="p-0.5"
+                >
+                  <Star
+                    className={`h-8 w-8 transition-colors ${
+                      star <= (hoverRating || rating)
+                        ? "fill-yellow-400 text-yellow-400"
+                        : "text-muted"
+                    }`}
+                  />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="review-content">评价内容（可选）</Label>
+            <Textarea
+              id="review-content"
+              placeholder="分享你的体验..."
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              rows={4}
+            />
+          </div>
+
+          <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground flex items-start gap-2">
+            <Lock className="h-4 w-4 shrink-0 mt-0.5" />
+            <span>
+              评价采用密封机制：你的评价将在双方都提交后同时揭晓，确保评价的真实性和公正性。
+            </span>
+          </div>
+
+          <Button className="w-full" disabled={rating === 0} onClick={() => setSubmitted(true)}>
+            提交评价
+          </Button>
+        </CardContent>
+      </Card>
    </div>
  )
 }