73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
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"
|
|
import Link from "next/link"
|
|
import { useState } from "react"
|
|
|
|
interface PurchaseBarProps {
|
|
price: number
|
|
productName: string
|
|
chatLink?: string
|
|
onSuccess?: () => void
|
|
showCollect?: boolean
|
|
showChat?: boolean
|
|
buttonText?: string
|
|
}
|
|
|
|
export function PurchaseBar({
|
|
price,
|
|
productName,
|
|
chatLink,
|
|
onSuccess,
|
|
showCollect = true,
|
|
showChat = true,
|
|
buttonText,
|
|
}: PurchaseBarProps) {
|
|
const { pay } = useAppContext()
|
|
const router = useRouter()
|
|
const [isCollected, setIsCollected] = useState(false)
|
|
|
|
const handlePurchase = () => {
|
|
const success = pay(price, productName, "product")
|
|
if (success) {
|
|
if (onSuccess) {
|
|
onSuccess()
|
|
} else {
|
|
router.push("/messages")
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-16 left-0 right-0 z-30 flex justify-center px-4 py-3 bg-background/95 backdrop-blur-lg border-t border-white/10">
|
|
<div className="flex w-full max-w-md items-center gap-3">
|
|
{showCollect && (
|
|
<button
|
|
onClick={() => setIsCollected(!isCollected)}
|
|
className={`flex flex-col items-center justify-center w-12 shrink-0 transition-colors ${isCollected ? "text-red-500" : "text-white/60 hover:text-primary"}`}
|
|
>
|
|
<Heart size={20} className={isCollected ? "fill-red-500" : ""} />
|
|
<span className="text-[10px] mt-0.5">收藏</span>
|
|
</button>
|
|
)}
|
|
{showChat && chatLink && (
|
|
<Link
|
|
href={chatLink}
|
|
className="flex flex-col items-center justify-center w-12 shrink-0 text-white/60 hover:text-primary transition-colors"
|
|
>
|
|
<MessageCircle size={20} />
|
|
<span className="text-[10px] mt-0.5">咨询</span>
|
|
</Link>
|
|
)}
|
|
<Button className="flex-1 bg-primary text-black font-bold hover:bg-primary/90 h-11" onClick={handlePurchase}>
|
|
<Coins size={16} className="mr-1" />
|
|
{buttonText || `立即购买 (${price}币)`}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|