110 lines
4.5 KiB
TypeScript
110 lines
4.5 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { ChevronLeft, BookOpen, CheckCircle } from "lucide-react"
|
|
import { useStore } from "@/lib/store"
|
|
import { bookData, getAllSections } from "@/lib/book-data"
|
|
|
|
export default function MyPurchasesPage() {
|
|
const { user, isLoggedIn } = useStore()
|
|
|
|
if (!isLoggedIn || !user) {
|
|
return (
|
|
<div className="min-h-screen bg-[#0a1628] text-white flex items-center justify-center">
|
|
<div className="text-center">
|
|
<p className="text-gray-400 mb-4">请先登录</p>
|
|
<Link href="/" className="text-[#38bdac] hover:underline">
|
|
返回首页
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const allSections = getAllSections()
|
|
const purchasedCount = user.hasFullBook ? allSections.length : user.purchasedSections.length
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a1628] text-white">
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
|
|
<div className="max-w-4xl mx-auto px-4 py-4 flex items-center">
|
|
<Link href="/" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
|
|
<ChevronLeft className="w-5 h-5" />
|
|
<span>返回</span>
|
|
</Link>
|
|
<h1 className="flex-1 text-center text-lg font-semibold">我的购买</h1>
|
|
<div className="w-16" />
|
|
</div>
|
|
</header>
|
|
|
|
<main className="max-w-4xl mx-auto px-4 py-8">
|
|
{/* Stats */}
|
|
<div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-gray-700/50 mb-8">
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-white">{purchasedCount}</p>
|
|
<p className="text-gray-400 text-sm">已购买章节</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-3xl font-bold text-[#38bdac]">
|
|
{user.hasFullBook ? "全书" : `${purchasedCount}/${allSections.length}`}
|
|
</p>
|
|
<p className="text-gray-400 text-sm">{user.hasFullBook ? "已解锁" : "进度"}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Purchased sections */}
|
|
{user.hasFullBook ? (
|
|
<div className="bg-gradient-to-r from-[#38bdac]/20 to-[#0f2137] rounded-xl p-6 border border-[#38bdac]/30 text-center mb-8">
|
|
<CheckCircle className="w-12 h-12 text-[#38bdac] mx-auto mb-3" />
|
|
<h3 className="text-xl font-semibold text-white mb-2">您已购买整本书</h3>
|
|
<p className="text-gray-400">全部55节内容已解锁,可随时阅读</p>
|
|
</div>
|
|
) : user.purchasedSections.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<BookOpen className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
|
<p className="text-gray-400 mb-4">您还没有购买任何章节</p>
|
|
<Link href="/chapters" className="text-[#38bdac] hover:underline">
|
|
去浏览章节
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<h2 className="text-gray-400 text-sm mb-4">已购买的章节</h2>
|
|
{bookData.map((part) => {
|
|
const purchasedInPart = part.chapters.flatMap((c) =>
|
|
c.sections.filter((s) => user.purchasedSections.includes(s.id)),
|
|
)
|
|
|
|
if (purchasedInPart.length === 0) return null
|
|
|
|
return (
|
|
<div key={part.id} className="bg-[#0f2137]/40 rounded-xl border border-gray-800/50 overflow-hidden">
|
|
<div className="px-4 py-3 bg-[#0a1628]/50">
|
|
<p className="text-gray-400 text-sm">{part.title}</p>
|
|
</div>
|
|
<div className="divide-y divide-gray-800/30">
|
|
{purchasedInPart.map((section) => (
|
|
<Link
|
|
key={section.id}
|
|
href={`/read/${section.id}`}
|
|
className="flex items-center gap-3 px-4 py-3 hover:bg-[#0f2137]/40 transition-colors"
|
|
>
|
|
<CheckCircle className="w-4 h-4 text-[#38bdac]" />
|
|
<span className="text-gray-400 font-mono text-sm">{section.id}</span>
|
|
<span className="text-gray-300">{section.title}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|