feat: search, player detail, shop detail, order flow, chat, review, and dispute pages
This commit is contained in:
zetaloop
@@ -1,8 +1,273 @@
|
||||
export default function ShopDetailPage({ params: _params }: { params: Promise<{ id: string }> }) {
|
||||
import { Gamepad2, Megaphone, ShoppingBag, Star, Users } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { mockPlayers, mockReviews, mockServices, mockShops } from "@/lib/mock-data"
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
export default async function ShopPage({ params }: PageProps) {
|
||||
const { id } = await params
|
||||
const shop = mockShops.find((s) => s.id === id)
|
||||
|
||||
if (!shop) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const shopPlayers = mockPlayers.filter((p) => p.shopId === shop.id)
|
||||
const playerIds = shopPlayers.map((p) => p.id)
|
||||
const shopServices = mockServices.filter((s) => playerIds.includes(s.playerId))
|
||||
const shopReviews = mockReviews.filter((r) => playerIds.includes(r.toUserId))
|
||||
|
||||
const sortedSections = [...shop.templateConfig.sections]
|
||||
.filter((s) => s.enabled)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
|
||||
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-6 space-y-8">
|
||||
{sortedSections.map((section) => {
|
||||
switch (section.type) {
|
||||
case "banner":
|
||||
return (
|
||||
<div
|
||||
key="banner"
|
||||
className="relative h-48 md:h-64 rounded-xl overflow-hidden bg-muted"
|
||||
>
|
||||
{shop.banner ? (
|
||||
<Image src={shop.banner} alt={shop.name} fill className="object-cover" />
|
||||
) : (
|
||||
<div className="w-full h-full bg-gradient-to-r from-primary/20 to-primary/10" />
|
||||
)}
|
||||
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
||||
<h1 className="text-3xl md:text-5xl font-bold text-white text-center px-4">
|
||||
{shop.name}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case "intro":
|
||||
return (
|
||||
<Card key="intro">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col md:flex-row gap-6 items-start">
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<h2 className="text-2xl font-bold">{shop.name}</h2>
|
||||
<Badge variant="secondary">
|
||||
{shop.commissionType === "percentage"
|
||||
? `抽成 ${shop.commissionValue}%`
|
||||
: `固定抽成 ${shop.commissionValue}`}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-muted-foreground">{shop.description}</p>
|
||||
<div className="flex flex-wrap gap-4 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
|
||||
<span className="font-medium">{shop.rating}</span>
|
||||
<span className="text-muted-foreground">评分</span>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<div className="flex items-center gap-1">
|
||||
<ShoppingBag className="w-4 h-4" />
|
||||
<span className="font-medium">{shop.totalOrders}</span>
|
||||
<span className="text-muted-foreground">总订单</span>
|
||||
</div>
|
||||
<Separator orientation="vertical" className="h-4" />
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
<span className="font-medium">{shop.playerCount}</span>
|
||||
<span className="text-muted-foreground">陪玩师</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Avatar className="w-16 h-16">
|
||||
<AvatarImage src={shop.owner.avatar} />
|
||||
<AvatarFallback>{shop.owner.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="font-medium">店长：{shop.owner.nickname}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{shop.owner.bio || "暂无介绍"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
case "announcements":
|
||||
if (shop.announcements.length === 0) return null
|
||||
return (
|
||||
<Card key="announcements">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Megaphone className="w-5 h-5 text-primary" />
|
||||
店铺公告
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-2">
|
||||
{shop.announcements.map((announcement) => (
|
||||
<li key={announcement} className="flex items-start gap-2 text-sm">
|
||||
<span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
|
||||
<span>{announcement}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
|
||||
case "services":
|
||||
if (shopServices.length === 0) return null
|
||||
return (
|
||||
<div key="services" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
<Gamepad2 className="w-5 h-5" />
|
||||
热门服务
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{shopServices.map((service) => (
|
||||
<Card key={service.id}>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<Badge variant="outline">{service.gameName}</Badge>
|
||||
<div className="text-right">
|
||||
<span className="text-lg font-bold text-primary">¥{service.price}</span>
|
||||
<span className="text-xs text-muted-foreground">/{service.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-base mt-2">{service.title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-2">
|
||||
{service.description}
|
||||
</p>
|
||||
{service.rankRange && (
|
||||
<div className="text-xs bg-muted px-2 py-1 rounded inline-block">
|
||||
段位：{service.rankRange}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case "players":
|
||||
if (shopPlayers.length === 0) return null
|
||||
return (
|
||||
<div key="players" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
<Users className="w-5 h-5" />
|
||||
明星陪玩
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{shopPlayers.map((player) => (
|
||||
<Link key={player.id} href={`/player/${player.id}`}>
|
||||
<Card className="h-full hover:shadow-md transition-shadow">
|
||||
<CardContent className="pt-6 text-center space-y-3">
|
||||
<div className="relative inline-block">
|
||||
<Avatar className="w-20 h-20 mx-auto">
|
||||
<AvatarImage src={player.user.avatar} />
|
||||
<AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span
|
||||
className={`absolute bottom-0 right-0 w-4 h-4 border-2 border-background rounded-full ${
|
||||
player.status === "available"
|
||||
? "bg-green-500"
|
||||
: player.status === "busy"
|
||||
? "bg-yellow-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold">{player.user.nickname}</h4>
|
||||
<div className="flex items-center justify-center gap-1 text-sm text-muted-foreground mt-1">
|
||||
<Star className="w-3 h-3 fill-yellow-500 text-yellow-500" />
|
||||
<span>{player.rating}</span>
|
||||
<span>•</span>
|
||||
<span>{player.totalOrders}单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap justify-center gap-1">
|
||||
{player.games.slice(0, 3).map((game) => (
|
||||
<Badge key={game} variant="secondary" className="text-xs">
|
||||
{game}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
case "reviews":
|
||||
if (shopReviews.length === 0) return null
|
||||
return (
|
||||
<div key="reviews" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
<Star className="w-5 h-5" />
|
||||
最新评价
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{shopReviews.map((review) => (
|
||||
<Card key={review.id}>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex gap-4">
|
||||
<Avatar>
|
||||
<AvatarImage src={review.fromUserAvatar} />
|
||||
<AvatarFallback>{review.fromUserName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-1">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<p className="font-medium text-sm">{review.fromUserName}</p>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<Star
|
||||
key={`star-${star}`}
|
||||
className={`w-3 h-3 ${
|
||||
star <= review.rating
|
||||
? "fill-yellow-500 text-yellow-500"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(review.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">{review.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user