zetaloop
109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
"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 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>
|
||
)
|
||
}
|