175 lines
8.9 KiB
TypeScript
175 lines
8.9 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { ChevronLeft, Check, Crown, Zap, Star, Shield, Smartphone, Infinity } from 'lucide-react';
|
||
|
||
interface SubscriptionProps {
|
||
onBack: () => void;
|
||
}
|
||
|
||
const PLANS = [
|
||
{
|
||
id: 'month',
|
||
name: '月度协议',
|
||
price: '¥28',
|
||
period: '/月',
|
||
desc: '灵便之选，随时取消',
|
||
isPopular: false
|
||
},
|
||
{
|
||
id: 'year',
|
||
name: '年度神经连接',
|
||
price: '¥298',
|
||
period: '/年',
|
||
desc: '节省 20%，尊享全年',
|
||
originalPrice: '¥336',
|
||
isPopular: true
|
||
},
|
||
];
|
||
|
||
const PRIVILEGES = [
|
||
{ icon: Infinity, title: '剧本库无限畅玩', desc: '解锁全部付费/限定剧本' },
|
||
{ icon: Zap, title: '高频信号通道', desc: '解锁 Extreme 级震动强度' },
|
||
{ icon: Smartphone, title: '多设备同步', desc: '支持多台 Link-X 设备同时控制' },
|
||
{ icon: Star, title: 'AI 专属人格', desc: '解锁隐藏性格与深度记忆模式' },
|
||
{ icon: Crown, title: '尊贵身份标识', desc: '专属头像框与社区徽章' },
|
||
{ icon: Shield, title: '隐私加密通道', desc: '端对端加密，无痕浏览' },
|
||
];
|
||
|
||
const Subscription: React.FC<SubscriptionProps> = ({ onBack }) => {
|
||
const [selectedPlan, setSelectedPlan] = useState('year');
|
||
const [isProcessing, setIsProcessing] = useState(false);
|
||
|
||
const handleSubscribe = () => {
|
||
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>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto no-scrollbar pb-32">
|
||
|
||
{/* Hero Section */}
|
||
<div className="relative h-48 overflow-hidden mb-6 shrink-0">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-[#1C1F26] via-[#0F1014] to-[#0F1014]"></div>
|
||
{/* Gold Glow */}
|
||
<div className="absolute top-[-50%] left-1/2 -translate-x-1/2 w-[120%] h-full bg-[#F59E0B]/10 blur-[60px] rounded-full"></div>
|
||
|
||
<div className="relative z-10 h-full flex flex-col items-center justify-center text-center px-6">
|
||
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-[#F59E0B] to-[#FCD34D] flex items-center justify-center mb-3 shadow-[0_0_20px_rgba(245,158,11,0.3)]">
|
||
<Crown size={24} className="text-black" fill="currentColor" />
|
||
</div>
|
||
<h2 className="text-xl font-bold text-white tracking-wide">升级至 Wei AI Pro</h2>
|
||
<p className="text-xs text-[#94A3B8] mt-2 max-w-[200px]">解锁全部感官限制，获得更加深度的沉浸式体验。</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Plan Selection */}
|
||
<div className="px-4 space-y-4 mb-8">
|
||
{PLANS.map((plan) => {
|
||
const isSelected = selectedPlan === plan.id;
|
||
return (
|
||
<div
|
||
key={plan.id}
|
||
onClick={() => setSelectedPlan(plan.id)}
|
||
className={`relative p-0.5 rounded-2xl transition-all duration-300 active:scale-[0.99] ${
|
||
isSelected
|
||
? 'bg-gradient-to-r from-[#F59E0B] to-[#FCD34D] shadow-[0_0_20px_rgba(245,158,11,0.15)]'
|
||
: 'bg-white/10'
|
||
}`}
|
||
>
|
||
<div className="bg-[#1C1F26] rounded-[14px] p-4 flex items-center justify-between relative z-10">
|
||
<div className="flex items-center gap-4">
|
||
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors shrink-0 ${
|
||
isSelected ? 'border-[#F59E0B] bg-[#F59E0B]' : 'border-[#64748B]'
|
||
}`}>
|
||
{isSelected && <Check size={12} className="text-black stroke-[3]" />}
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center gap-2">
|
||
<h3 className={`text-base font-bold ${isSelected ? 'text-white' : 'text-[#94A3B8]'}`}>{plan.name}</h3>
|
||
{plan.isPopular && (
|
||
<span className="text-[9px] font-bold bg-[#F59E0B] text-black px-1.5 py-0.5 rounded tracking-wide shrink-0">
|
||
超值推荐
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-[#64748B] mt-1 line-clamp-1">{plan.desc}</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right shrink-0">
|
||
{plan.originalPrice && (
|
||
<span className="block text-[10px] text-[#64748B] line-through mb-0.5">{plan.originalPrice}</span>
|
||
)}
|
||
<div className="flex items-end justify-end">
|
||
<span className={`text-xl font-bold font-mono ${isSelected ? 'text-[#F59E0B]' : 'text-white'}`}>{plan.price}</span>
|
||
<span className="text-xs text-[#64748B] mb-1 ml-0.5">{plan.period}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Privileges Grid */}
|
||
<div className="px-5">
|
||
<h3 className="text-xs font-bold text-[#64748B] uppercase tracking-widest mb-4 flex items-center gap-2">
|
||
<Star size={12} /> 会员特权
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-x-4 gap-y-6">
|
||
{PRIVILEGES.map((item, idx) => (
|
||
<div key={idx} className="flex gap-3">
|
||
<div className="shrink-0 w-8 h-8 rounded-lg bg-[#F59E0B]/10 flex items-center justify-center text-[#F59E0B]">
|
||
<item.icon size={16} />
|
||
</div>
|
||
<div>
|
||
<h4 className="text-xs font-bold text-white mb-0.5">{item.title}</h4>
|
||
<p className="text-[10px] text-[#64748B] leading-tight">{item.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Terms */}
|
||
<div className="px-6 mt-8 mb-4 text-[10px] text-[#475569] text-center leading-relaxed">
|
||
<p>订阅将自动续费。取消需在当前周期结束前24小时内操作。</p>
|
||
<p className="mt-2">点击下方按钮即代表同意《会员服务协议》</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={handleSubscribe}
|
||
disabled={isProcessing}
|
||
className="w-full h-12 rounded-xl bg-gradient-to-r from-[#F59E0B] to-[#FBBF24] text-black font-bold tracking-wide shadow-[0_0_20px_rgba(245,158,11,0.2)] 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>
|
||
) : (
|
||
<>
|
||
<Zap size={18} fill="currentColor" />
|
||
立即开启 {PLANS.find(p => p.id === selectedPlan)?.price}
|
||
</>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Subscription; |