176 lines
9.1 KiB
TypeScript
176 lines
9.1 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { ChevronLeft, Zap, CreditCard, Check, ShieldCheck, Gem } from 'lucide-react';
|
||
|
||
interface TopUpProps {
|
||
onBack: () => void;
|
||
}
|
||
|
||
const RECHARGE_OPTIONS = [
|
||
{ id: 1, points: 60, price: '¥6.00', bonus: null, tag: null },
|
||
{ id: 2, points: 300, price: '¥30.00', bonus: '+15', tag: null },
|
||
{ id: 3, points: 680, price: '¥68.00', bonus: '+50', tag: '热销' },
|
||
{ id: 4, points: 1280, price: '¥128.00', bonus: '+120', tag: null },
|
||
{ id: 5, points: 3280, price: '¥328.00', bonus: '+350', tag: '超值' },
|
||
{ id: 6, points: 6480, price: '¥648.00', bonus: '+800', tag: null },
|
||
];
|
||
|
||
const PAYMENT_METHODS = [
|
||
{ id: 'alipay', name: '支付宝', icon: '支' },
|
||
{ id: 'wechat', name: '微信支付', icon: '微' },
|
||
];
|
||
|
||
const TopUp: React.FC<TopUpProps> = ({ onBack }) => {
|
||
const [selectedOption, setSelectedOption] = useState<number>(3);
|
||
const [paymentMethod, setPaymentMethod] = useState('alipay');
|
||
const [isProcessing, setIsProcessing] = useState(false);
|
||
|
||
const handlePay = () => {
|
||
setIsProcessing(true);
|
||
setTimeout(() => {
|
||
setIsProcessing(false);
|
||
alert('模拟支付成功！积分已到账。');
|
||
onBack();
|
||
}, 1500);
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[60] bg-[#0F1014] flex flex-col h-full overflow-hidden animate-in slide-in-from-bottom-10 duration-300 fade-in">
|
||
|
||
{/* Header */}
|
||
<div className="relative z-20 pt-safe-top px-4 py-3 flex items-center justify-between border-b border-white/5 bg-[#0F1014]/80 backdrop-blur-md">
|
||
<button onClick={onBack} className="p-2 -ml-2 text-white/70 hover:text-white active:scale-95 transition-transform">
|
||
<ChevronLeft size={24} />
|
||
</button>
|
||
<h1 className="text-base font-bold text-white tracking-wider">充值中心</h1>
|
||
<div className="w-8"></div> {/* Spacer */}
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto no-scrollbar pb-32">
|
||
|
||
{/* Current Balance Card */}
|
||
<div className="mx-4 mt-6 mb-8 relative h-32 rounded-2xl overflow-hidden shadow-[0_10px_30px_rgba(139,92,246,0.15)] group">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-[#1C1F26] via-[#2D3039] to-[#1C1F26]"></div>
|
||
{/* Neon Accents */}
|
||
<div className="absolute top-0 right-0 w-32 h-32 bg-[#8B5CF6]/20 blur-[50px] rounded-full"></div>
|
||
<div className="absolute bottom-0 left-0 w-24 h-24 bg-[#F43F5E]/10 blur-[40px] rounded-full"></div>
|
||
|
||
<div className="relative z-10 p-6 flex flex-col justify-between h-full">
|
||
<div className="flex items-center gap-2 opacity-70">
|
||
<Gem size={14} className="text-[#8B5CF6]" />
|
||
<span className="text-xs font-bold text-[#E2E8F0] tracking-widest uppercase">当前余额</span>
|
||
</div>
|
||
<div className="flex items-end gap-3">
|
||
<span className="text-4xl font-bold text-white font-mono tracking-tighter drop-shadow-lg">2,450</span>
|
||
<span className="text-sm font-medium text-[#8B5CF6] mb-1.5">积分</span>
|
||
</div>
|
||
</div>
|
||
{/* Decorative Pattern */}
|
||
<div className="absolute right-4 top-1/2 -translate-y-1/2 opacity-5 pointer-events-none">
|
||
<Zap size={100} />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Recharge Options Grid */}
|
||
<div className="px-4">
|
||
<h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-4 flex items-center gap-2">
|
||
<Zap size={12} /> 选择充值金额
|
||
</h3>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{RECHARGE_OPTIONS.map((opt) => {
|
||
const isSelected = selectedOption === opt.id;
|
||
return (
|
||
<button
|
||
key={opt.id}
|
||
onClick={() => setSelectedOption(opt.id)}
|
||
className={`relative p-4 rounded-xl border flex flex-col items-start transition-all duration-300 active:scale-[0.98] ${
|
||
isSelected
|
||
? 'bg-[#8B5CF6]/10 border-[#8B5CF6] shadow-[0_0_15px_rgba(139,92,246,0.15)]'
|
||
: 'bg-[#1C1F26]/60 border-white/5 hover:border-white/10'
|
||
}`}
|
||
>
|
||
{opt.tag && (
|
||
<div className={`absolute -top-2.5 -right-2 px-2 py-0.5 rounded text-[9px] font-bold tracking-wider uppercase border shadow-sm ${
|
||
opt.tag === '热销'
|
||
? 'bg-[#F43F5E] text-white border-[#F43F5E]'
|
||
: 'bg-[#F59E0B] text-black border-[#F59E0B]'
|
||
}`}>
|
||
{opt.tag}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-center gap-1.5 mb-1">
|
||
<Zap size={14} className={isSelected ? 'text-[#8B5CF6]' : 'text-[#64748B]'} fill={isSelected ? "currentColor" : "none"} />
|
||
<span className={`text-lg font-bold font-mono ${isSelected ? 'text-white' : 'text-[#E2E8F0]'}`}>
|
||
{opt.points}
|
||
</span>
|
||
</div>
|
||
{opt.bonus && (
|
||
<span className="text-[10px] text-[#10B981] font-mono mb-2 block">
|
||
赠送 {opt.bonus}
|
||
</span>
|
||
)}
|
||
<span className={`text-sm font-medium mt-auto ${isSelected ? 'text-[#8B5CF6]' : 'text-[#94A3B8]'}`}>
|
||
{opt.price}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Payment Method (Visual Only) */}
|
||
<div className="px-4 mt-8">
|
||
<h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-3">支付方式</h3>
|
||
<div className="space-y-2">
|
||
{PAYMENT_METHODS.map(method => (
|
||
<button
|
||
key={method.id}
|
||
onClick={() => setPaymentMethod(method.id)}
|
||
className={`w-full flex items-center justify-between p-3 rounded-xl border transition-all ${
|
||
paymentMethod === method.id
|
||
? 'bg-[#1C1F26] border-[#8B5CF6]/50'
|
||
: 'bg-transparent border-white/5 opacity-60'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-8 h-8 rounded flex items-center justify-center font-bold text-white ${method.id === 'alipay' ? 'bg-[#1677FF]' : 'bg-[#07C160]'}`}>
|
||
{method.icon}
|
||
</div>
|
||
<span className="text-sm text-white">{method.name}</span>
|
||
</div>
|
||
{paymentMethod === method.id && <Check size={16} className="text-[#8B5CF6]" />}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Terms */}
|
||
<div className="px-6 mt-8 mb-4 flex items-start gap-2 text-[10px] text-[#64748B] leading-tight">
|
||
<ShieldCheck size={12} className="shrink-0 mt-0.5" />
|
||
<p>充值即代表您已同意《用户充值协议》。虚拟商品一旦售出，不支持退换。</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Action Bar */}
|
||
<div className="absolute bottom-0 left-0 w-full p-4 bg-[#0F1014]/90 backdrop-blur-xl border-t border-white/5 z-30">
|
||
<button
|
||
onClick={handlePay}
|
||
disabled={isProcessing}
|
||
className="w-full h-12 rounded-xl bg-gradient-to-r from-[#8B5CF6] to-[#6366f1] text-white font-bold tracking-wide shadow-[0_0_20px_rgba(139,92,246,0.3)] active:scale-[0.98] transition-transform flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
|
||
>
|
||
{isProcessing ? (
|
||
<span className="animate-pulse">处理中...</span>
|
||
) : (
|
||
<>
|
||
<CreditCard size={18} />
|
||
立即支付 {RECHARGE_OPTIONS.find(o => o.id === selectedOption)?.price}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default TopUp; |