commit 8702d6bff3441d89ffc238604d3d8b2b592d2532 Author: v0 Date: Thu Nov 20 03:13:10 2025 +0000 Initialized repository for chat Esports platform development Co-authored-by: null <4804959+fnvtk@users.noreply.github.com> diff --git a/README.md b/README.md new file mode 100644 index 0000000..5d6a9b1 --- /dev/null +++ b/README.md @@ -0,0 +1,30 @@ +# Esports platform development + +*Automatically synced with your [v0.app](https://v0.app) deployments* + +[![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/fnvtks-projects/v0--aa) +[![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/pDE9S8I1cvU) + +## Overview + +This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). +Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). + +## Deployment + +Your project is live at: + +**[https://vercel.com/fnvtks-projects/v0--aa](https://vercel.com/fnvtks-projects/v0--aa)** + +## Build your app + +Continue building your app on: + +**[https://v0.app/chat/pDE9S8I1cvU](https://v0.app/chat/pDE9S8I1cvU)** + +## How It Works + +1. Create and modify your project using [v0.app](https://v0.app) +2. Deploy your chats from the v0 interface +3. Changes are automatically pushed to this repository +4. Vercel deploys the latest version from this repository \ No newline at end of file diff --git a/app/booking/page.tsx b/app/booking/page.tsx new file mode 100644 index 0000000..c144878 --- /dev/null +++ b/app/booking/page.tsx @@ -0,0 +1,277 @@ +"use client"; + +import { useState, Suspense } from "react"; +import { useSearchParams, useRouter } from 'next/navigation'; +import { ArrowLeft, Calendar, Clock, CreditCard, Shield, CheckCircle2 } from 'lucide-react'; +import Link from "next/link"; +import Image from "next/image"; + +// Mock data - matches star detail page +const bookingData: Record = { + "1-1": { + starName: "GM-远洋", + starAvatar: "/gamer-girl-headphones.jpg", + serviceName: "单局陪玩", + price: 50, + duration: "1局", + type: "陪玩" + }, + "1-2": { + starName: "GM-远洋", + starAvatar: "/gamer-girl-headphones.jpg", + serviceName: "5局套餐", + price: 220, + duration: "5局", + type: "陪玩" + }, + "1-3": { + starName: "GM-远洋", + starAvatar: "/gamer-girl-headphones.jpg", + serviceName: "打野进阶课", + price: 299, + duration: "8节课", + type: "课程" + }, + "1-4": { + starName: "GM-远洋", + starAvatar: "/gamer-girl-headphones.jpg", + serviceName: "拜师学艺", + price: 1980, + duration: "30天", + type: "拜师" + }, + "2-1": { + starName: "卡若", + starAvatar: "/gamer-boy-esports-jersey.jpg", + serviceName: "单局陪玩", + price: 80, + duration: "1局", + type: "陪玩" + } +}; + +function BookingContent() { + const searchParams = useSearchParams(); + const router = useRouter(); + const starId = searchParams.get("starId") || "1"; + const serviceId = searchParams.get("serviceId") || "1"; + const bookingKey = `${starId}-${serviceId}`; + const booking = bookingData[bookingKey] || bookingData["1-1"]; + + const [selectedDate, setSelectedDate] = useState(""); + const [selectedTime, setSelectedTime] = useState(""); + const [note, setNote] = useState(""); + const [isSubmitting, setIsSubmitting] = useState(false); + const [isSuccess, setIsSuccess] = useState(false); + + // Generate available dates (next 7 days) + const availableDates = Array.from({ length: 7 }, (_, i) => { + const date = new Date(); + date.setDate(date.getDate() + i); + return { + value: date.toISOString().split('T')[0], + label: i === 0 ? "今天" : i === 1 ? "明天" : `${date.getMonth() + 1}/${date.getDate()}` + }; + }); + + // Available time slots + const timeSlots = [ + "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", + "17:00", "18:00", "19:00", "20:00", "21:00", "22:00" + ]; + + const handleSubmit = async () => { + if (!selectedDate || !selectedTime) { + alert("请选择预约时间"); + return; + } + + setIsSubmitting(true); + + // Simulate API call + await new Promise(resolve => setTimeout(resolve, 1500)); + + setIsSubmitting(false); + setIsSuccess(true); + + // Redirect after success + setTimeout(() => { + router.push("/profile"); + }, 2000); + }; + + if (isSuccess) { + return ( +
+
+
+ +
+
+

预约成功!

+

+ 已向 {booking.starName} 发送预约请求 +
+ 请等待确认 +

+
+ + 查看我的订单 + +
+
+ ); + } + + return ( +
+ {/* Header */} +
+ + + +

确认预约

+
+ + {/* Service Info */} +
+
+
+ {booking.starName} +
+
+

{booking.starName}

+

{booking.serviceName}

+
+ {booking.duration} + + {booking.price} 玩值币 +
+
+
+
+ + {/* Date Selection */} +
+

+ + 选择日期 +

+
+ {availableDates.map((date) => ( + + ))} +
+
+ + {/* Time Selection */} +
+

+ + 选择时间 +

+
+ {timeSlots.map((time) => ( + + ))} +
+
+ + {/* Note */} +
+

备注说明

+