291 lines
12 KiB
TypeScript
291 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { ChevronLeft, Lock, Share2, BookOpen, Clock, MessageCircle } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { type Section, getFullBookPrice, isSectionUnlocked } from "@/lib/book-data"
|
|
import { useStore } from "@/lib/store"
|
|
import { AuthModal } from "./modules/auth/auth-modal"
|
|
import { PaymentModal } from "./modules/payment/payment-modal"
|
|
import { UserMenu } from "./user-menu"
|
|
import { QRCodeModal } from "./modules/marketing/qr-code-modal"
|
|
import { ReferralShare } from "./modules/referral/referral-share"
|
|
|
|
interface ChapterContentProps {
|
|
section: Section & { filePath: string }
|
|
partTitle: string
|
|
chapterTitle: string
|
|
}
|
|
|
|
export function ChapterContent({ section, partTitle, chapterTitle }: ChapterContentProps) {
|
|
const [content, setContent] = useState<string>("")
|
|
const [isLoading, setIsLoading] = useState(true)
|
|
const [isAuthOpen, setIsAuthOpen] = useState(false)
|
|
const [isPaymentOpen, setIsPaymentOpen] = useState(false)
|
|
const [isQRModalOpen, setIsQRModalOpen] = useState(false)
|
|
const [paymentType, setPaymentType] = useState<"section" | "fullbook">("section")
|
|
const [fullBookPrice, setFullBookPrice] = useState(9.9)
|
|
|
|
const { user, isLoggedIn, hasPurchased, settings } = useStore()
|
|
const distributorShare = settings?.distributorShare || 90
|
|
|
|
const isUnlocked = isSectionUnlocked(section)
|
|
const canAccess = section.isFree || isUnlocked || (isLoggedIn && hasPurchased(section.id))
|
|
|
|
useEffect(() => {
|
|
setFullBookPrice(getFullBookPrice())
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
async function loadContent() {
|
|
try {
|
|
if (section.content) {
|
|
setContent(section.content)
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
|
|
if (typeof window !== "undefined" && section.filePath.startsWith("custom/")) {
|
|
const customSections = JSON.parse(localStorage.getItem("custom_sections") || "[]") as Section[]
|
|
const customSection = customSections.find((s) => s.id === section.id)
|
|
if (customSection?.content) {
|
|
setContent(customSection.content)
|
|
setIsLoading(false)
|
|
return
|
|
}
|
|
}
|
|
|
|
const response = await fetch(`/api/content?path=${encodeURIComponent(section.filePath)}`)
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
if (!data.isCustom) {
|
|
setContent(data.content)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to load content:", error)
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
loadContent()
|
|
}, [section.filePath, section.id, section.content])
|
|
|
|
const handlePurchaseClick = (type: "section" | "fullbook") => {
|
|
if (!isLoggedIn) {
|
|
setIsAuthOpen(true)
|
|
return
|
|
}
|
|
setPaymentType(type)
|
|
setIsPaymentOpen(true)
|
|
}
|
|
|
|
const handleShare = async () => {
|
|
const url = user?.referralCode ? `${window.location.href}?ref=${user.referralCode}` : window.location.href
|
|
const shareData = {
|
|
title: section.title,
|
|
text: `来自Soul派对房的真实商业故事: ${section.title}`,
|
|
url: url,
|
|
}
|
|
|
|
try {
|
|
if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
|
|
await navigator.share(shareData)
|
|
} else {
|
|
navigator.clipboard.writeText(url)
|
|
alert(
|
|
`链接已复制!分享后他人购买,你可获得${distributorShare}%返利 (¥${((fullBookPrice * distributorShare) / 100).toFixed(1)})`,
|
|
)
|
|
}
|
|
} catch (error) {
|
|
if ((error as Error).name !== "AbortError") {
|
|
navigator.clipboard.writeText(url)
|
|
alert(`链接已复制!分享后他人购买,你可获得${distributorShare}%返利`)
|
|
}
|
|
}
|
|
}
|
|
|
|
const previewContent = content.slice(0, 500)
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a1628] text-white pb-20">
|
|
{/* Header */}
|
|
<header className="sticky top-0 z-50 bg-[#0a1628]/90 backdrop-blur-md border-b border-gray-800">
|
|
<div className="max-w-3xl mx-auto px-4 py-4 flex items-center justify-between">
|
|
<Link href="/chapters" className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors">
|
|
<ChevronLeft className="w-5 h-5" />
|
|
<span className="hidden sm:inline">目录</span>
|
|
</Link>
|
|
<div className="text-center flex-1 px-4">
|
|
<p className="text-gray-500 text-xs">{partTitle}</p>
|
|
{chapterTitle && <p className="text-gray-400 text-sm truncate">{chapterTitle}</p>}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<ReferralShare
|
|
sectionTitle={section.title}
|
|
fullBookPrice={fullBookPrice}
|
|
distributorShare={distributorShare}
|
|
/>
|
|
<UserMenu />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<main className="max-w-3xl mx-auto px-4 py-8">
|
|
{/* Title */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center gap-2 text-[#38bdac] text-sm mb-2">
|
|
<BookOpen className="w-4 h-4" />
|
|
<span>{section.id}</span>
|
|
{section.unlockAfterDays && !section.isFree && (
|
|
<span className="ml-2 px-2 py-0.5 bg-orange-500/20 text-orange-400 text-xs rounded-full flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
{isUnlocked ? "已免费解锁" : `${section.unlockAfterDays}天后免费`}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h1 className="text-2xl md:text-3xl font-bold text-white leading-tight">{section.title}</h1>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<div className="w-8 h-8 border-2 border-[#38bdac] border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
) : canAccess ? (
|
|
<>
|
|
<article className="prose prose-invert prose-lg max-w-none">
|
|
<div className="text-gray-300 leading-relaxed whitespace-pre-line">
|
|
{content.split("\n").map((paragraph, index) => (
|
|
<p key={index} className="mb-4">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</article>
|
|
|
|
{/* Join Party Group CTA */}
|
|
<div className="mt-12 bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-[#38bdac]/20 flex items-center justify-center flex-shrink-0">
|
|
<MessageCircle className="w-6 h-6 text-[#38bdac]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-white font-semibold mb-1">想听更多商业故事?</h3>
|
|
<p className="text-gray-400 text-sm">每天早上6-9点,卡若在Soul派对房分享真实案例</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setIsQRModalOpen(true)}
|
|
className="bg-[#38bdac] hover:bg-[#2da396] text-white whitespace-nowrap"
|
|
>
|
|
加入派对群
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div>
|
|
<article className="prose prose-invert prose-lg max-w-none relative">
|
|
<div className="text-gray-300 leading-relaxed whitespace-pre-line">
|
|
{previewContent.split("\n").map((paragraph, index) => (
|
|
<p key={index} className="mb-4">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-[#0a1628] to-transparent" />
|
|
</article>
|
|
|
|
{/* Purchase prompt */}
|
|
<div className="mt-8 bg-[#0f2137]/80 backdrop-blur-xl rounded-2xl p-8 border border-gray-700/50 text-center">
|
|
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-800/50 flex items-center justify-center">
|
|
<Lock className="w-8 h-8 text-gray-500" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-2">解锁完整内容</h3>
|
|
<p className="text-gray-400 mb-6">
|
|
{isLoggedIn ? "购买本节或整本书以阅读完整内容" : "登录后购买即可阅读完整内容"}
|
|
</p>
|
|
|
|
{section.unlockAfterDays && (
|
|
<p className="text-orange-400 text-sm mb-4 flex items-center justify-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
本节将在{section.unlockAfterDays}天后免费解锁
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button
|
|
onClick={() => handlePurchaseClick("section")}
|
|
variant="outline"
|
|
className="border-gray-600 text-white hover:bg-gray-700/50 px-6 py-5"
|
|
>
|
|
购买本节 ¥{section.price}
|
|
</Button>
|
|
<Button
|
|
onClick={() => handlePurchaseClick("fullbook")}
|
|
className="bg-[#38bdac] hover:bg-[#2da396] text-white px-6 py-5"
|
|
>
|
|
购买全书 ¥{fullBookPrice.toFixed(1)}
|
|
<span className="ml-2 text-xs opacity-80">省82%</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="text-gray-500 text-sm mt-4">
|
|
分享本书,他人购买你可获得 <span className="text-[#38bdac]">{distributorShare}%返利</span>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Join Party Group */}
|
|
<div className="mt-8 bg-gradient-to-r from-[#38bdac]/10 to-[#1a3a4a]/50 rounded-2xl p-6 border border-[#38bdac]/30">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-full bg-[#38bdac]/20 flex items-center justify-center flex-shrink-0">
|
|
<MessageCircle className="w-6 h-6 text-[#38bdac]" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-white font-semibold mb-1">不想花钱?来派对群免费听!</h3>
|
|
<p className="text-gray-400 text-sm">每天早上6-9点,卡若在Soul派对房免费分享</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => setIsQRModalOpen(true)}
|
|
className="bg-[#38bdac] hover:bg-[#2da396] text-white whitespace-nowrap"
|
|
>
|
|
加入派对群
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Navigation */}
|
|
<div className="mt-12 pt-8 border-t border-gray-800 flex justify-between">
|
|
<Link href="/chapters" className="text-gray-400 hover:text-white transition-colors">
|
|
← 返回目录
|
|
</Link>
|
|
<button
|
|
onClick={handleShare}
|
|
className="text-[#38bdac] hover:text-[#4fd4c4] transition-colors flex items-center gap-2"
|
|
>
|
|
<Share2 className="w-4 h-4" />
|
|
分享赚 ¥{((section.price * distributorShare) / 100).toFixed(1)}
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Modals */}
|
|
<AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
|
|
<PaymentModal
|
|
isOpen={isPaymentOpen}
|
|
onClose={() => setIsPaymentOpen(false)}
|
|
type={paymentType}
|
|
sectionId={section.id}
|
|
sectionTitle={section.title}
|
|
amount={paymentType === "section" ? section.price : fullBookPrice}
|
|
onSuccess={() => window.location.reload()}
|
|
/>
|
|
<QRCodeModal isOpen={isQRModalOpen} onClose={() => setIsQRModalOpen(false)} />
|
|
</div>
|
|
)
|
|
}
|