feat(order): add sealed review reveal, timeout rules, and dispatch behavior

This commit is contained in:
zetaloop
2026-02-22 08:16:35 +08:00
parent 33b7e4d0b9
commit a7d56240ff
5 changed files with 288 additions and 19 deletions
+34 -3
View File
@@ -2,16 +2,16 @@
import { ArrowLeft, CheckCircle, Clock, Star } from "lucide-react"
import Link from "next/link"
import { use, useEffect } from "react"
import { use, useEffect, useState } from "react"
import OrderActions from "@/components/order-actions"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { statusLabels } from "@/lib/constants"
import { mockReviews } from "@/lib/mock"
import type { OrderStatus } from "@/lib/types"
import { useChatStore } from "@/store/chat"
import { useOrderStore } from "@/store/orders"
import { useReviewStore } from "@/store/reviews"
const normalStatusSteps: OrderStatus[] = [
"pending_payment",
@@ -37,6 +37,8 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
const sessions = useChatStore((state) => state.sessions)
const ensureOrderSession = useChatStore((state) => state.ensureOrderSession)
const reviews = useReviewStore((state) => state.reviews.filter((item) => item.orderId === id))
const [nowTs, setNowTs] = useState(Date.now())
useEffect(() => {
if (!order) return
@@ -44,6 +46,17 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
ensureOrderSession(order)
}, [order, ensureOrderSession])
useEffect(() => {
if (!order) return
if (order.status !== "pending_accept" && order.status !== "pending_close") return
const timer = setInterval(() => {
setNowTs(Date.now())
}, 1000)
return () => clearInterval(timer)
}, [order])
if (!order) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
@@ -52,7 +65,6 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
)
}
const reviews = mockReviews.filter((r) => r.orderId === id)
const chatSession = sessions.find((session) => session.type === "order" && session.orderId === id)
const statusSteps =
order.status === "disputed"
@@ -61,6 +73,19 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
? cancelledStatusSteps
: normalStatusSteps
const currentStepIndex = statusSteps.indexOf(order.status)
const timeoutHint = (() => {
if (order.status !== "pending_accept" && order.status !== "pending_close") return null
const base =
order.status === "pending_accept"
? new Date(order.createdAt).getTime()
: new Date(order.closedAt ?? order.createdAt).getTime()
const remainSeconds = Math.max(0, 30 - Math.floor((nowTs - base) / 1000))
return order.status === "pending_accept"
? `若 30 秒内无人接单,订单将自动取消(剩余 ${remainSeconds} 秒)`
: `若 30 秒内未确认,订单将自动进入待评价(剩余 ${remainSeconds} 秒)`
})()
return (
<div className="container mx-auto py-8 px-4 max-w-3xl">
@@ -106,6 +131,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
</CardContent>
</Card>
{timeoutHint && (
<Card className="mb-6">
<CardContent className="py-3 text-sm text-muted-foreground">{timeoutHint}</CardContent>
</Card>
)}
<Card className="mb-6">
<CardHeader>
<CardTitle className="text-base"></CardTitle>
+29 -6
View File
@@ -7,16 +7,19 @@ 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 { useAuthStore } from "@/store/auth"
import { useOrderStore } from "@/store/orders"
import { useReviewStore } from "@/store/reviews"
export default function ReviewPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
const order = useOrderStore((state) => state.orders.find((item) => item.id === id))
const updateOrderStatus = useOrderStore((state) => state.updateOrderStatus)
const userId = useAuthStore((state) => state.user?.id)
const submitReview = useReviewStore((state) => state.submitReview)
const reviews = useReviewStore((state) => state.reviews.filter((item) => item.orderId === id))
const [rating, setRating] = useState(0)
const [hoverRating, setHoverRating] = useState(0)
const [content, setContent] = useState("")
const [submitted, setSubmitted] = useState(false)
if (!order) {
return (
@@ -26,7 +29,10 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
)
}
if (submitted) {
const hasSubmitted = Boolean(userId && reviews.some((review) => review.fromUserId === userId))
const isRevealed = reviews.length >= 2 && reviews.every((review) => !review.sealed)
if (hasSubmitted && !isRevealed) {
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" />
@@ -40,6 +46,18 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
)
}
if (hasSubmitted && isRevealed) {
return (
<div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
<h2 className="text-xl font-bold"></h2>
<p className="text-sm text-muted-foreground"></p>
<Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
</Link>
</div>
)
}
return (
<div className="container mx-auto py-8 px-4 max-w-lg">
<Link
@@ -100,10 +118,15 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
<Button
className="w-full"
disabled={rating === 0}
disabled={rating === 0 || !userId}
onClick={() => {
updateOrderStatus(id, "completed")
setSubmitted(true)
if (!userId) return
submitReview({
orderId: id,
fromUserId: userId,
rating,
content,
})
}}
>