支付宝
diff --git a/app/vip/page.tsx b/app/vip/page.tsx
new file mode 100644
index 0000000..cf8b9c9
--- /dev/null
+++ b/app/vip/page.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { ArrowLeft, Crown, Coins, Building2, Coffee, Gamepad2, Gift, Star } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useAppContext } from "@/components/providers/app-provider"
+import { useState } from "react"
+
+export default function VIPPage() {
+ const router = useRouter()
+ const { pay, wallet, updateUser, user } = useAppContext()
+ const [selectedPlan, setSelectedPlan] = useState<"month" | "quarter" | "year">("month")
+
+ const plans = {
+ month: { price: 30, coins: 300, label: "月卡", days: 30 },
+ quarter: { price: 80, coins: 800, label: "季卡", days: 90, save: "11%" },
+ year: { price: 280, coins: 2800, label: "年卡", days: 365, save: "22%" },
+ }
+
+ const benefits = [
+ { icon: Building2, title: "电竞酒店9折", desc: "全国合作酒店通用" },
+ { icon: Coffee, title: "网咖8折特权", desc: "特权公馆专属" },
+ { icon: Gamepad2, title: "陪玩优先匹配", desc: "专属匹配通道" },
+ { icon: Gift, title: "每月专属礼包", desc: "限定装扮+道具" },
+ { icon: Star, title: "专属客服", desc: "1对1VIP服务" },
+ { icon: Crown, title: "尊贵标识", desc: "个人主页专属展示" },
+ ]
+
+ const handleSubscribe = () => {
+ const plan = plans[selectedPlan]
+ const success = pay(plan.coins, `玩值黑卡会员${plan.label}`, "service")
+ if (success) {
+ updateUser({ isVip: true })
+ router.push("/profile")
+ }
+ }
+
+ return (
+
+ {/* Header */}
+
+
+ 玩值黑卡会员
+
+
+
+ {/* VIP Card */}
+
+
+
+
+
+
+ 当前余额: {wallet.balance} 币
+
+
+
+
+ {/* Plan Selection */}
+
+
选择套餐
+
+ {(Object.entries(plans) as [keyof typeof plans, typeof plans.month][]).map(([key, plan]) => (
+
+ ))}
+
+
+
+ {/* Benefits */}
+
+
会员特权
+
+ {benefits.map((benefit, i) => (
+
+
+
+
+
+
{benefit.title}
+
{benefit.desc}
+
+
+ ))}
+
+
+
+
+ {/* Bottom Purchase Bar */}
+
+
+
+
已选: {plans[selectedPlan].label}
+
+
+ {plans[selectedPlan].coins} 币
+
+
+
+
+
+
+ )
+}
diff --git a/components/providers/app-provider.tsx b/components/providers/app-provider.tsx
index 7b929c6..e8c2e43 100644
--- a/components/providers/app-provider.tsx
+++ b/components/providers/app-provider.tsx
@@ -18,8 +18,7 @@ type User = {
}
type Wallet = {
- diamonds: number // For booking stars (Paid currency)
- coins: number // For mall items (Earned/Free currency) - Renamed to Wanzi Coin in UI
+ balance: number // 玩值币 - 唯一货币
}
type Order = {
@@ -27,7 +26,6 @@ type Order = {
type: "service" | "product"
title: string
price: number
- currency: "diamonds" | "coins"
status: "pending" | "completed" | "cancelled"
date: string
image?: string
@@ -38,23 +36,16 @@ type AppContextType = {
wallet: Wallet
orders: Order[]
recharge: (amount: number) => void
- pay: (
- amount: number,
- currency: "diamonds" | "coins",
- title: string,
- type: "service" | "product",
- image?: string,
- ) => boolean
+ pay: (amount: number, title: string, type: "service" | "product", image?: string) => boolean
updateUser: (updates: Partial
) => void
}
const AppContext = createContext(undefined)
export function AppProvider({ children }: { children: React.ReactNode }) {
- // Initial mock state
const [user, setUser] = useState({
- name: "卡若", // Updated name to 卡若
- avatar: "/gamer-boy-esports-jersey.jpg", // Updated avatar
+ name: "卡若",
+ avatar: "/gamer-boy-esports-jersey.jpg",
level: 12,
isVip: false,
id: "888888",
@@ -65,8 +56,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
})
const [wallet, setWallet] = useState({
- diamonds: 1280,
- coins: 5600,
+ balance: 6880, // 统一的玩值币余额
})
const [orders, setOrders] = useState([
@@ -75,16 +65,14 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
type: "service",
title: "LOL陪玩 - 1小时",
price: 50,
- currency: "diamonds",
status: "completed",
date: "2023-11-15",
image: "/lol.jpg",
},
])
- // Persist to localStorage (optional, for demo feel)
useEffect(() => {
- const savedWallet = localStorage.getItem("wanzhi_wallet")
+ const savedWallet = localStorage.getItem("wanzhi_wallet_v2")
if (savedWallet) setWallet(JSON.parse(savedWallet))
const savedOrders = localStorage.getItem("wanzhi_orders")
@@ -92,7 +80,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
}, [])
useEffect(() => {
- localStorage.setItem("wanzhi_wallet", JSON.stringify(wallet))
+ localStorage.setItem("wanzhi_wallet_v2", JSON.stringify(wallet))
}, [wallet])
useEffect(() => {
@@ -100,41 +88,32 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
}, [orders])
const recharge = (amount: number) => {
- setWallet((prev) => ({ ...prev, diamonds: prev.diamonds + amount }))
+ setWallet((prev) => ({ ...prev, balance: prev.balance + amount }))
}
- const pay = (
- amount: number,
- currency: "diamonds" | "coins",
- title: string,
- type: "service" | "product",
- image?: string,
- ): boolean => {
- if (wallet[currency] < amount) {
+ const pay = (amount: number, title: string, type: "service" | "product", image?: string): boolean => {
+ if (wallet.balance < amount) {
toast({
title: "余额不足",
- description: `您的${currency === "diamonds" ? "钻石" : "丸子币"}不足，请充值`, // Updated currency name to Wanzi Coin
+ description: "您的玩值币不足，请充值",
variant: "destructive",
})
return false
}
- setWallet((prev) => ({ ...prev, [currency]: prev[currency] - amount }))
+ setWallet((prev) => ({ ...prev, balance: prev.balance - amount }))
const newOrder: Order = {
id: Math.random().toString(36).substr(2, 9),
type,
title,
price: amount,
- currency,
- status: "completed", // Auto-complete for demo
+ status: "completed",
date: new Date().toISOString().split("T")[0],
image,
}
setOrders((prev) => [newOrder, ...prev])
-
- // 不再显示支付成功提示
return true
}
diff --git a/components/shared/purchase-bar.tsx b/components/shared/purchase-bar.tsx
index bf411b4..cc2ee1e 100644
--- a/components/shared/purchase-bar.tsx
+++ b/components/shared/purchase-bar.tsx
@@ -1,6 +1,6 @@
"use client"
-import { Heart, MessageCircle } from "lucide-react"
+import { Heart, MessageCircle, Coins } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useAppContext } from "@/components/providers/app-provider"
import { useRouter } from "next/navigation"
@@ -31,7 +31,7 @@ export function PurchaseBar({
const [isCollected, setIsCollected] = useState(false)
const handlePurchase = () => {
- const success = pay(price, "diamonds", productName, "product")
+ const success = pay(price, productName, "product")
if (success) {
if (onSuccess) {
onSuccess()
@@ -63,7 +63,8 @@ export function PurchaseBar({
)}