1479 lines
52 KiB
TypeScript
1479 lines
52 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import {
|
||
Box,
|
||
Button,
|
||
Flex,
|
||
Text,
|
||
Badge,
|
||
VStack,
|
||
HStack,
|
||
useToast,
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalCloseButton,
|
||
useDisclosure,
|
||
Image,
|
||
Progress,
|
||
Divider,
|
||
Input,
|
||
Icon,
|
||
Container,
|
||
useBreakpointValue,
|
||
} from '@chakra-ui/react';
|
||
import {
|
||
FaWeixin,
|
||
FaGem,
|
||
FaCheck,
|
||
FaQrcode,
|
||
FaClock,
|
||
FaRedo,
|
||
FaCrown,
|
||
FaStar,
|
||
FaTimes,
|
||
FaChevronDown,
|
||
FaChevronUp,
|
||
} from 'react-icons/fa';
|
||
|
||
import { logger } from '../../utils/logger';
|
||
import { useAuth } from '../../contexts/AuthContext';
|
||
import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
|
||
import { subscriptionConfig, themeColors } from '../../views/Pages/Account/subscription-content';
|
||
|
||
// 计费周期选择器组件 - 移动端垂直布局（年付在上），桌面端水平布局
|
||
interface CycleSelectorProps {
|
||
options: any[];
|
||
selectedCycle: string;
|
||
onSelectCycle: (cycle: string) => void;
|
||
}
|
||
|
||
function CycleSelector({ options, selectedCycle, onSelectCycle }: CycleSelectorProps) {
|
||
// 使用 useBreakpointValue 动态获取是否是移动端
|
||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||
|
||
// 移动端倒序显示（年付在上），桌面端正常顺序
|
||
const displayOptions = isMobile ? [...options].reverse() : options;
|
||
|
||
return (
|
||
<Flex
|
||
direction={{ base: 'column', md: 'row' }}
|
||
gap={3}
|
||
p={2}
|
||
bg="rgba(255, 255, 255, 0.03)"
|
||
borderRadius="xl"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
backdropFilter="blur(10px)"
|
||
justify="center"
|
||
align="center"
|
||
w={{ base: 'full', md: 'auto' }}
|
||
maxW={{ base: '320px', md: 'none' }}
|
||
mx="auto"
|
||
>
|
||
{displayOptions.map((option: any) => (
|
||
<Box key={option.cycleKey} position="relative" w={{ base: 'full', md: 'auto' }}>
|
||
{option.discountPercent > 0 && (
|
||
<Badge
|
||
position="absolute"
|
||
top={{ base: '50%', md: '-10px' }}
|
||
right={{ base: '10px', md: '-10px' }}
|
||
transform={{ base: 'translateY(-50%)', md: 'none' }}
|
||
colorScheme="red"
|
||
fontSize="xs"
|
||
px={2}
|
||
py={1}
|
||
borderRadius="full"
|
||
fontWeight="bold"
|
||
zIndex={1}
|
||
>
|
||
省{option.discountPercent}%
|
||
</Badge>
|
||
)}
|
||
|
||
<Button
|
||
size="lg"
|
||
w={{ base: 'full', md: 'auto' }}
|
||
px={6}
|
||
py={6}
|
||
borderRadius="lg"
|
||
bg={selectedCycle === option.cycleKey ? 'linear-gradient(135deg, #D4AF37, #B8941F)' : 'transparent'}
|
||
color={selectedCycle === option.cycleKey ? '#000' : '#fff'}
|
||
border="1px solid"
|
||
borderColor={selectedCycle === option.cycleKey ? 'rgba(212, 175, 55, 0.3)' : 'rgba(255, 255, 255, 0.1)'}
|
||
onClick={() => onSelectCycle(option.cycleKey)}
|
||
_hover={{
|
||
transform: 'translateY(-2px)',
|
||
borderColor: 'rgba(212, 175, 55, 0.5)',
|
||
shadow: selectedCycle === option.cycleKey
|
||
? '0 0 20px rgba(212, 175, 55, 0.3)'
|
||
: '0 4px 12px rgba(0, 0, 0, 0.5)',
|
||
}}
|
||
transition="all 0.3s"
|
||
fontWeight="bold"
|
||
justifyContent={{ base: 'flex-start', md: 'center' }}
|
||
pl={{ base: 6, md: 6 }}
|
||
>
|
||
{option.label}
|
||
</Button>
|
||
</Box>
|
||
))}
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
export default function SubscriptionContentNew() {
|
||
const { user } = useAuth();
|
||
const subscriptionEvents = useSubscriptionEvents({
|
||
currentSubscription: {
|
||
plan: user?.subscription_plan || 'free',
|
||
status: user?.subscription_status || 'inactive',
|
||
},
|
||
});
|
||
|
||
const [selectedCycle, setSelectedCycle] = useState('monthly');
|
||
const [selectedPlan, setSelectedPlan] = useState(null);
|
||
const [subscriptionPlans, setSubscriptionPlans] = useState([]);
|
||
const [priceInfo, setPriceInfo] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [promoCode, setPromoCode] = useState('');
|
||
const [promoCodeApplied, setPromoCodeApplied] = useState(false);
|
||
const [promoCodeError, setPromoCodeError] = useState('');
|
||
const [validatingPromo, setValidatingPromo] = useState(false);
|
||
|
||
const [paymentOrder, setPaymentOrder] = useState(null);
|
||
const [paymentCountdown, setPaymentCountdown] = useState(300);
|
||
const [autoCheckInterval, setAutoCheckInterval] = useState(null);
|
||
const [forceUpdating, setForceUpdating] = useState(false);
|
||
|
||
const [openFaqIndex, setOpenFaqIndex] = useState(null);
|
||
|
||
const { isOpen, onOpen, onClose } = useDisclosure();
|
||
const toast = useToast();
|
||
|
||
// 倒计时更新
|
||
useEffect(() => {
|
||
let timer: any;
|
||
if (paymentCountdown > 0) {
|
||
timer = setInterval(() => {
|
||
setPaymentCountdown((prev) => {
|
||
if (prev <= 1) {
|
||
handlePaymentExpire();
|
||
return 0;
|
||
}
|
||
return prev - 1;
|
||
});
|
||
}, 1000);
|
||
}
|
||
return () => clearInterval(timer);
|
||
}, [paymentCountdown]);
|
||
|
||
// 组件卸载时清理定时器
|
||
useEffect(() => {
|
||
return () => {
|
||
stopAutoPaymentCheck();
|
||
};
|
||
}, []);
|
||
|
||
// 组件加载时获取套餐数据
|
||
useEffect(() => {
|
||
fetchSubscriptionPlans();
|
||
}, []);
|
||
|
||
const fetchSubscriptionPlans = async () => {
|
||
try {
|
||
logger.debug('SubscriptionContentNew', '正在获取订阅套餐');
|
||
const response = await fetch('/api/subscription/plans');
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
|
||
if (data.success && Array.isArray(data.data)) {
|
||
const validPlans = data.data.filter(
|
||
(plan: any) =>
|
||
plan &&
|
||
plan.name &&
|
||
typeof plan.monthly_price === 'number' &&
|
||
typeof plan.yearly_price === 'number'
|
||
);
|
||
logger.debug('SubscriptionContentNew', '套餐加载成功', {
|
||
status: response.status,
|
||
validPlansCount: validPlans.length,
|
||
});
|
||
setSubscriptionPlans(validPlans);
|
||
} else {
|
||
logger.warn('SubscriptionContentNew', '套餐数据格式异常', { data });
|
||
setSubscriptionPlans([]);
|
||
}
|
||
} else {
|
||
logger.error('SubscriptionContentNew', 'fetchSubscriptionPlans', new Error(`HTTP ${response.status}`));
|
||
setSubscriptionPlans([]);
|
||
}
|
||
} catch (error) {
|
||
logger.error('SubscriptionContentNew', 'fetchSubscriptionPlans', error);
|
||
setSubscriptionPlans([]);
|
||
}
|
||
};
|
||
|
||
const handlePaymentExpire = () => {
|
||
stopAutoPaymentCheck();
|
||
toast({
|
||
title: '支付二维码已过期',
|
||
description: '请重新创建订单',
|
||
status: 'warning',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
};
|
||
|
||
const stopAutoPaymentCheck = () => {
|
||
if (autoCheckInterval) {
|
||
clearInterval(autoCheckInterval);
|
||
setAutoCheckInterval(null);
|
||
}
|
||
};
|
||
|
||
const formatTime = (seconds: number) => {
|
||
const minutes = Math.floor(seconds / 60);
|
||
const remainingSeconds = seconds % 60;
|
||
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||
};
|
||
|
||
// 计算价格
|
||
const calculatePrice = async (plan: any, cycle: string, promoCodeValue: any = null) => {
|
||
try {
|
||
const validPromoCode = promoCodeValue && typeof promoCodeValue === 'string' && promoCodeValue.trim()
|
||
? promoCodeValue.trim()
|
||
: null;
|
||
|
||
const response = await fetch('/api/subscription/calculate-price', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
to_plan: plan.name,
|
||
to_cycle: cycle,
|
||
promo_code: validPromoCode,
|
||
}),
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
setPriceInfo(data.data);
|
||
return data.data;
|
||
}
|
||
}
|
||
return null;
|
||
} catch (error) {
|
||
logger.error('SubscriptionContent', 'calculatePrice', error);
|
||
return null;
|
||
}
|
||
};
|
||
|
||
// 验证优惠码
|
||
const handleValidatePromoCode = async () => {
|
||
const trimmedCode = promoCode.trim();
|
||
if (!trimmedCode) {
|
||
setPromoCodeError('请输入优惠码');
|
||
return;
|
||
}
|
||
if (!selectedPlan) {
|
||
setPromoCodeError('请先选择套餐');
|
||
return;
|
||
}
|
||
|
||
setValidatingPromo(true);
|
||
setPromoCodeError('');
|
||
|
||
try {
|
||
const result = await calculatePrice(selectedPlan, selectedCycle, trimmedCode);
|
||
if (result && !result.promo_error) {
|
||
setPromoCodeApplied(true);
|
||
toast({
|
||
title: '优惠码已应用',
|
||
description: `节省 ¥${result.discount_amount.toFixed(2)}`,
|
||
status: 'success',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
} else {
|
||
setPromoCodeError(result?.promo_error || '优惠码无效');
|
||
setPromoCodeApplied(false);
|
||
}
|
||
} catch (error) {
|
||
setPromoCodeError('验证失败,请重试');
|
||
setPromoCodeApplied(false);
|
||
} finally {
|
||
setValidatingPromo(false);
|
||
}
|
||
};
|
||
|
||
const handleRemovePromoCode = async () => {
|
||
setPromoCode('');
|
||
setPromoCodeApplied(false);
|
||
setPromoCodeError('');
|
||
if (selectedPlan) {
|
||
await calculatePrice(selectedPlan, selectedCycle, null);
|
||
}
|
||
};
|
||
|
||
const handleSubscribe = async (plan: any) => {
|
||
if (!user) {
|
||
toast({
|
||
title: '请先登录',
|
||
description: '登录后即可订阅',
|
||
status: 'warning',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
return;
|
||
}
|
||
|
||
subscriptionEvents.trackPricingPlanSelected(
|
||
plan.name,
|
||
selectedCycle,
|
||
getCurrentPrice(plan)
|
||
);
|
||
|
||
setSelectedPlan(plan);
|
||
await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
|
||
onOpen();
|
||
};
|
||
|
||
const handleCreatePaymentOrder = async () => {
|
||
if (!selectedPlan || !user) return;
|
||
|
||
setLoading(true);
|
||
try {
|
||
const price = priceInfo?.final_amount || getCurrentPrice(selectedPlan);
|
||
|
||
// 检查是否为免费升级（剩余价值足够抵扣新套餐价格）
|
||
if (price === 0 && priceInfo?.is_upgrade) {
|
||
const response = await fetch('/api/subscription/free-upgrade', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
plan_name: selectedPlan.name,
|
||
billing_cycle: selectedCycle,
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
subscriptionEvents.trackPaymentSuccessful({
|
||
planName: selectedPlan.name,
|
||
paymentMethod: 'free_upgrade',
|
||
amount: 0,
|
||
orderId: 'free_upgrade',
|
||
transactionId: 'free_upgrade',
|
||
});
|
||
|
||
toast({
|
||
title: '升级成功！',
|
||
description: data.message,
|
||
status: 'success',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
});
|
||
|
||
onClose();
|
||
setTimeout(() => window.location.reload(), 2000);
|
||
return;
|
||
} else {
|
||
throw new Error(data.error || '免费升级失败');
|
||
}
|
||
}
|
||
|
||
subscriptionEvents.trackPaymentInitiated({
|
||
planName: selectedPlan.name,
|
||
paymentMethod: 'wechat_pay',
|
||
amount: price,
|
||
billingCycle: selectedCycle,
|
||
});
|
||
|
||
const response = await fetch('/api/payment/create-order', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
plan_name: selectedPlan.name,
|
||
billing_cycle: selectedCycle,
|
||
promo_code: promoCodeApplied ? promoCode : null,
|
||
}),
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success) {
|
||
setPaymentOrder(data.data);
|
||
setPaymentCountdown(30 * 60); // 30分钟
|
||
startAutoPaymentCheck(data.data.id);
|
||
|
||
toast({
|
||
title: '订单创建成功',
|
||
description: '请使用微信扫描二维码完成支付',
|
||
status: 'success',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
} else {
|
||
throw new Error(data.message || '创建订单失败');
|
||
}
|
||
} else {
|
||
throw new Error('网络请求失败');
|
||
}
|
||
} catch (error: any) {
|
||
subscriptionEvents.trackPaymentFailed(
|
||
{
|
||
planName: selectedPlan.name,
|
||
paymentMethod: 'wechat_pay',
|
||
amount: getCurrentPrice(selectedPlan),
|
||
},
|
||
error.message
|
||
);
|
||
|
||
toast({
|
||
title: '创建订单失败',
|
||
description: error.message,
|
||
status: 'error',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const startAutoPaymentCheck = (orderId: string) => {
|
||
const checkInterval = setInterval(async () => {
|
||
try {
|
||
const response = await fetch(`/api/payment/order/${orderId}/status`, {
|
||
credentials: 'include',
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success && data.data.status === 'paid') {
|
||
clearInterval(checkInterval);
|
||
setAutoCheckInterval(null);
|
||
|
||
subscriptionEvents.trackPaymentSuccessful({
|
||
planName: selectedPlan?.name,
|
||
paymentMethod: 'wechat_pay',
|
||
amount: paymentOrder?.amount,
|
||
orderId: orderId,
|
||
transactionId: data.data.transaction_id,
|
||
});
|
||
|
||
toast({
|
||
title: '支付成功！',
|
||
description: '您的订阅已激活',
|
||
status: 'success',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
});
|
||
|
||
onClose();
|
||
setTimeout(() => window.location.reload(), 2000);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
logger.error('SubscriptionContent', 'checkPaymentStatus', error);
|
||
}
|
||
}, 3000);
|
||
|
||
setAutoCheckInterval(checkInterval as any);
|
||
};
|
||
|
||
const handleForceUpdate = async () => {
|
||
if (!paymentOrder) return;
|
||
|
||
setForceUpdating(true);
|
||
try {
|
||
const response = await fetch(`/api/payment/order/${paymentOrder.order_id}/status`, {
|
||
credentials: 'include',
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
if (data.success && data.data.status === 'paid') {
|
||
toast({
|
||
title: '支付成功！',
|
||
description: '您的订阅已激活',
|
||
status: 'success',
|
||
duration: 5000,
|
||
isClosable: true,
|
||
});
|
||
|
||
onClose();
|
||
setTimeout(() => window.location.reload(), 2000);
|
||
} else {
|
||
toast({
|
||
title: '未检测到支付',
|
||
description: '请确认已完成支付后重试',
|
||
status: 'info',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
}
|
||
}
|
||
} catch (error: any) {
|
||
toast({
|
||
title: '查询失败',
|
||
description: error.message,
|
||
status: 'error',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
});
|
||
} finally {
|
||
setForceUpdating(false);
|
||
}
|
||
};
|
||
|
||
// 合并数据库数据和前端配置
|
||
const getMergedPlans = () => {
|
||
// 如果数据库还没有加载数据，使用静态配置
|
||
if (subscriptionPlans.length === 0) {
|
||
return subscriptionConfig.plans;
|
||
}
|
||
|
||
// 合并数据库价格和前端UI配置
|
||
return subscriptionConfig.plans.map((configPlan: any) => {
|
||
const dbPlan = subscriptionPlans.find((p: any) => p.name === configPlan.name);
|
||
|
||
if (!dbPlan) {
|
||
return configPlan; // 如果数据库中没有，使用前端配置
|
||
}
|
||
|
||
// 解析数据库中的 pricing_options JSON
|
||
let pricingOptions = configPlan.pricingOptions;
|
||
if (dbPlan.pricing_options) {
|
||
try {
|
||
const parsedOptions = typeof dbPlan.pricing_options === 'string'
|
||
? JSON.parse(dbPlan.pricing_options)
|
||
: dbPlan.pricing_options;
|
||
|
||
if (Array.isArray(parsedOptions) && parsedOptions.length > 0) {
|
||
pricingOptions = parsedOptions.map((opt: any) => ({
|
||
cycleKey: opt.cycle_key,
|
||
label: opt.label,
|
||
months: opt.months,
|
||
price: parseFloat(opt.price),
|
||
originalPrice: opt.original_price ? parseFloat(opt.original_price) : null,
|
||
discountPercent: opt.discount_percent || 0,
|
||
}));
|
||
}
|
||
} catch (error) {
|
||
logger.error('SubscriptionContentNew', '解析pricing_options失败', error);
|
||
}
|
||
}
|
||
|
||
// 合并数据，数据库价格优先
|
||
return {
|
||
...configPlan,
|
||
monthly_price: dbPlan.monthly_price,
|
||
yearly_price: dbPlan.yearly_price,
|
||
pricingOptions: pricingOptions,
|
||
displayName: dbPlan.display_name || configPlan.displayName,
|
||
description: dbPlan.description || configPlan.description,
|
||
};
|
||
});
|
||
};
|
||
|
||
const getCurrentPrice = (plan: any) => {
|
||
if (!plan || plan.name === 'free') return 0;
|
||
|
||
const option = plan.pricingOptions?.find(
|
||
(opt: any) => opt.cycleKey === selectedCycle
|
||
);
|
||
return option ? option.price : plan.pricingOptions?.[0]?.price || 0;
|
||
};
|
||
|
||
const getCurrentPriceOption = (plan: any) => {
|
||
if (!plan || plan.name === 'free') return null;
|
||
return plan.pricingOptions?.find((opt: any) => opt.cycleKey === selectedCycle);
|
||
};
|
||
|
||
const getIconComponent = (iconName: string) => {
|
||
const icons: any = {
|
||
star: FaStar,
|
||
gem: FaGem,
|
||
crown: FaCrown,
|
||
};
|
||
return icons[iconName] || FaStar;
|
||
};
|
||
|
||
// 获取按钮文字
|
||
const getButtonText = (plan: any) => {
|
||
const currentPlanName = user?.subscription_type;
|
||
const isActive = user?.subscription_status === 'active';
|
||
|
||
if (!isActive || !currentPlanName || currentPlanName === 'free') {
|
||
return `选择${plan.displayName}`;
|
||
}
|
||
|
||
if (currentPlanName === plan.name) {
|
||
// 同级续费
|
||
return `续费${plan.displayName}`;
|
||
}
|
||
|
||
// 升级或降级
|
||
if (currentPlanName === 'pro' && plan.name === 'max') {
|
||
return `升级为${plan.displayName}`;
|
||
}
|
||
|
||
if (currentPlanName === 'max' && plan.name === 'pro') {
|
||
return `到期后切换到${plan.displayName}`;
|
||
}
|
||
|
||
return `选择${plan.displayName}`;
|
||
};
|
||
|
||
// 判断按钮是否可点击
|
||
const isButtonDisabled = (plan: any) => {
|
||
return false; // 所有套餐都可以选择，包括当前套餐（续费）
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
minH="100vh"
|
||
bg="#0a0a0a"
|
||
pt={{ base: 8, md: 16 }}
|
||
pb={{ base: 16, md: 24 }}
|
||
position="relative"
|
||
overflow="hidden"
|
||
>
|
||
{/* 背景光晕 */}
|
||
<Box
|
||
position="absolute"
|
||
top="20%"
|
||
left="10%"
|
||
w="400px"
|
||
h="400px"
|
||
bg="rgba(212, 175, 55, 0.15)"
|
||
borderRadius="full"
|
||
filter="blur(100px)"
|
||
pointerEvents="none"
|
||
zIndex={0}
|
||
/>
|
||
<Box
|
||
position="absolute"
|
||
bottom="10%"
|
||
right="10%"
|
||
w="500px"
|
||
h="500px"
|
||
bg="rgba(212, 175, 55, 0.1)"
|
||
borderRadius="full"
|
||
filter="blur(120px)"
|
||
pointerEvents="none"
|
||
zIndex={0}
|
||
/>
|
||
|
||
<Container maxW="1400px" px={{ base: 4, md: 6 }} position="relative" zIndex={1}>
|
||
{/* 标题区域 */}
|
||
<VStack spacing={4} mb={12} textAlign="center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<Text
|
||
fontSize="sm"
|
||
color="rgba(212, 175, 55, 0.8)"
|
||
fontWeight="medium"
|
||
letterSpacing="wider"
|
||
textTransform="uppercase"
|
||
>
|
||
订阅方案
|
||
</Text>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: -20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
>
|
||
<Text
|
||
fontSize={{ base: '3xl', md: '5xl', lg: '6xl' }}
|
||
fontWeight="bold"
|
||
bgGradient="radial-gradient(circle at center, #FFFFFF 0%, rgba(255,255,255,0.6) 100%)"
|
||
bgClip="text"
|
||
lineHeight="1.2"
|
||
>
|
||
立即开启智能决策
|
||
</Text>
|
||
</motion.div>
|
||
</VStack>
|
||
|
||
{/* 当前订阅状态 */}
|
||
{user && user.subscription_type && user.subscription_type !== 'free' && user.subscription_status === 'active' && (
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: 0.2 }}
|
||
>
|
||
<Box
|
||
mb={12}
|
||
p={6}
|
||
borderRadius="2xl"
|
||
bg="rgba(212, 175, 55, 0.05)"
|
||
border="2px solid"
|
||
borderColor="rgba(212, 175, 55, 0.3)"
|
||
backdropFilter="blur(20px)"
|
||
maxW="600px"
|
||
mx="auto"
|
||
position="relative"
|
||
overflow="hidden"
|
||
_before={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: '4px',
|
||
bgGradient: 'linear-gradient(90deg, rgba(212, 175, 55, 0.5), rgba(212, 175, 55, 1), rgba(212, 175, 55, 0.5))',
|
||
}}
|
||
>
|
||
<VStack spacing={4} align="stretch">
|
||
<HStack justify="space-between" align="center">
|
||
<HStack spacing={3}>
|
||
<Icon
|
||
as={user.subscription_type === 'max' ? FaCrown : FaGem}
|
||
color="#D4AF37"
|
||
boxSize={6}
|
||
/>
|
||
<VStack align="start" spacing={0}>
|
||
<Text color="white" fontSize="lg" fontWeight="bold">
|
||
当前订阅: {user.subscription_type === 'max' ? 'Max 旗舰版' : 'Pro 专业版'}
|
||
</Text>
|
||
{user.billing_cycle && (
|
||
<Text color="rgba(255, 255, 255, 0.6)" fontSize="xs">
|
||
{user.billing_cycle === 'monthly' ? '月付' :
|
||
user.billing_cycle === 'quarterly' ? '季付' :
|
||
user.billing_cycle === 'semiannual' ? '半年付' :
|
||
user.billing_cycle === 'yearly' ? '年付' : user.billing_cycle}
|
||
</Text>
|
||
)}
|
||
</VStack>
|
||
</HStack>
|
||
<Badge
|
||
px={3}
|
||
py={1}
|
||
borderRadius="full"
|
||
bg="rgba(76, 175, 80, 0.2)"
|
||
border="1px solid rgba(76, 175, 80, 0.4)"
|
||
color="green.300"
|
||
fontSize="xs"
|
||
fontWeight="medium"
|
||
>
|
||
使用中
|
||
</Badge>
|
||
</HStack>
|
||
|
||
<Divider borderColor="rgba(212, 175, 55, 0.2)" />
|
||
|
||
<Flex justify="space-between" align="center">
|
||
<HStack spacing={2}>
|
||
<Icon as={FaClock} color="rgba(212, 175, 55, 0.8)" boxSize={4} />
|
||
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
|
||
到期时间
|
||
</Text>
|
||
</HStack>
|
||
<Text color="#D4AF37" fontSize="md" fontWeight="bold">
|
||
{user.subscription_end_date
|
||
? new Date(user.subscription_end_date).toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
})
|
||
: '永久有效'
|
||
}
|
||
</Text>
|
||
</Flex>
|
||
|
||
{user.subscription_end_date && (() => {
|
||
const endDate = new Date(user.subscription_end_date);
|
||
const today = new Date();
|
||
const daysLeft = Math.ceil((endDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||
|
||
if (daysLeft > 0 && daysLeft <= 30) {
|
||
return (
|
||
<Box
|
||
p={2}
|
||
borderRadius="md"
|
||
bg="rgba(255, 165, 0, 0.1)"
|
||
border="1px solid rgba(255, 165, 0, 0.3)"
|
||
>
|
||
<Text color="orange.300" fontSize="xs" textAlign="center">
|
||
⚠️ 还有 {daysLeft} 天到期，记得及时续费哦
|
||
</Text>
|
||
</Box>
|
||
);
|
||
}
|
||
return null;
|
||
})()}
|
||
</VStack>
|
||
</Box>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* 计费周期选择器 */}
|
||
<VStack spacing={6} mb={16}>
|
||
<Text fontSize="md" color="rgba(255, 255, 255, 0.7)">
|
||
选择计费周期 · 时长越长优惠越大
|
||
</Text>
|
||
|
||
<CycleSelector
|
||
options={getMergedPlans()[1]?.pricingOptions || []}
|
||
selectedCycle={selectedCycle}
|
||
onSelectCycle={setSelectedCycle}
|
||
/>
|
||
|
||
{(() => {
|
||
const currentOption = getMergedPlans()[1]?.pricingOptions?.find(
|
||
(opt: any) => opt.cycleKey === selectedCycle
|
||
);
|
||
if (currentOption && currentOption.discountPercent > 0) {
|
||
return (
|
||
<HStack spacing={2}>
|
||
<Icon as={FaStar} color="#D4AF37" boxSize={4} />
|
||
<Text fontSize="sm" color="#D4AF37" fontWeight="medium">
|
||
当前选择可节省 {currentOption.discountPercent}% 的费用
|
||
</Text>
|
||
</HStack>
|
||
);
|
||
}
|
||
return null;
|
||
})()}
|
||
</VStack>
|
||
|
||
{/* 套餐卡片 - 借鉴 index.pug 设计 */}
|
||
<Flex
|
||
justify="center"
|
||
gap={4}
|
||
mb={16}
|
||
flexWrap={{ base: 'wrap', lg: 'nowrap' }}
|
||
maxW="1200px"
|
||
mx="auto"
|
||
>
|
||
{getMergedPlans().slice(1).map((plan: any, index: number) => {
|
||
const IconComponent = getIconComponent(plan.icon);
|
||
const currentPriceOption = getCurrentPriceOption(plan);
|
||
const isCurrentPlan =
|
||
user?.subscription_type === plan.name &&
|
||
user?.subscription_status === 'active';
|
||
|
||
const isPremium = plan.name === 'max';
|
||
|
||
return (
|
||
<motion.div
|
||
key={plan.name}
|
||
initial={{ opacity: 0, y: 50 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||
style={{ flex: 1, maxWidth: '500px', width: '100%' }}
|
||
>
|
||
<Box
|
||
position="relative"
|
||
h="100%"
|
||
borderRadius="20px"
|
||
overflow="hidden"
|
||
bg={isPremium ? 'rgba(10, 10, 10, 0.5)' : 'rgba(10, 10, 10, 0.3)'}
|
||
border={isPremium ? '1px solid rgba(212, 175, 55, 0.3)' : '1px solid rgba(255, 255, 255, 0.1)'}
|
||
boxShadow={isPremium ? '0 20px 60px rgba(212, 175, 55, 0.2)' : '0 20px 60px rgba(0, 0, 0, 0.3)'}
|
||
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
|
||
_hover={{
|
||
transform: 'translateY(-8px)',
|
||
borderColor: isPremium ? 'rgba(212, 175, 55, 0.5)' : 'rgba(255, 255, 255, 0.2)',
|
||
boxShadow: isPremium
|
||
? '0 30px 80px rgba(212, 175, 55, 0.3)'
|
||
: '0 30px 80px rgba(0, 0, 0, 0.5)',
|
||
}}
|
||
_before={
|
||
isPremium
|
||
? {
|
||
content: '""',
|
||
position: 'absolute',
|
||
top: '50%',
|
||
left: '50%',
|
||
transform: 'translate(-50%, -50%)',
|
||
width: '120%',
|
||
height: '120%',
|
||
background: 'radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%)',
|
||
pointerEvents: 'none',
|
||
zIndex: 0,
|
||
}
|
||
: {}
|
||
}
|
||
_after={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
inset: 0,
|
||
borderRadius: '20px',
|
||
border: '1px solid',
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
{/* 套餐标题 */}
|
||
<Box
|
||
position="relative"
|
||
zIndex={2}
|
||
py={3}
|
||
px={8.5}
|
||
fontSize="lg"
|
||
fontWeight="bold"
|
||
bgGradient={
|
||
isPremium
|
||
? 'linear-gradient(to right, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.2))'
|
||
: 'linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))'
|
||
}
|
||
borderTopRadius="20px"
|
||
color={isPremium ? '#D4AF37' : 'white'}
|
||
>
|
||
{plan.displayName}
|
||
</Box>
|
||
|
||
<VStack
|
||
spacing={0}
|
||
align="stretch"
|
||
position="relative"
|
||
zIndex={3}
|
||
flex={1}
|
||
mt={-1}
|
||
p={3.5}
|
||
pb={8}
|
||
backdropFilter={isPremium ? 'blur(32px)' : 'blur(20px)'}
|
||
bg={isPremium ? 'rgba(255, 255, 255, 0.07)' : 'rgba(255, 255, 255, 0.01)'}
|
||
borderRadius="20px"
|
||
_after={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
inset: 0,
|
||
borderRadius: '20px',
|
||
border: '1px solid',
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
{/* 价格卡片 */}
|
||
<Box
|
||
position="relative"
|
||
mb={6}
|
||
p={6}
|
||
borderRadius="16px"
|
||
bg={isPremium ? 'rgba(212, 175, 55, 0.1)' : 'rgba(255, 255, 255, 0.03)'}
|
||
backdropFilter="blur(20px)"
|
||
boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
|
||
_after={{
|
||
content: '""',
|
||
position: 'absolute',
|
||
inset: 0,
|
||
borderRadius: '16px',
|
||
border: '1px solid',
|
||
borderColor: isPremium ? 'rgba(212, 175, 55, 0.2)' : 'rgba(255, 255, 255, 0.1)',
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
<Flex align="baseline" justify="center" mb={5}>
|
||
<Text
|
||
fontSize="5xl"
|
||
fontWeight="bold"
|
||
bgGradient="radial-gradient(circle at center, #FFFFFF 0%, rgba(255,255,255,0.6) 100%)"
|
||
bgClip="text"
|
||
lineHeight="1"
|
||
letterSpacing="-0.02em"
|
||
>
|
||
¥{getCurrentPrice(plan)}
|
||
</Text>
|
||
<Text fontSize="lg" color="rgba(255, 255, 255, 0.6)" ml={2}>
|
||
/ {currentPriceOption?.label || '月'}
|
||
</Text>
|
||
</Flex>
|
||
|
||
<Button
|
||
w="full"
|
||
size="lg"
|
||
h="56px"
|
||
bg={
|
||
isPremium
|
||
? 'linear-gradient(135deg, #D4AF37 0%, #B8941F 100%)'
|
||
: 'rgba(255, 255, 255, 0.05)'
|
||
}
|
||
color={
|
||
isPremium
|
||
? '#000'
|
||
: '#fff'
|
||
}
|
||
border={
|
||
isPremium
|
||
? 'none'
|
||
: '1px solid rgba(255, 255, 255, 0.1)'
|
||
}
|
||
fontWeight="bold"
|
||
fontSize="md"
|
||
borderRadius="lg"
|
||
onClick={() => handleSubscribe(plan)}
|
||
isDisabled={isButtonDisabled(plan)}
|
||
cursor="pointer"
|
||
_hover={{
|
||
transform: 'translateY(-2px)',
|
||
shadow: isPremium
|
||
? '0 8px 30px rgba(212, 175, 55, 0.4)'
|
||
: '0 8px 20px rgba(255, 255, 255, 0.1)',
|
||
bg: isPremium
|
||
? 'linear-gradient(135deg, #E5C047 0%, #C9A52F 100%)'
|
||
: 'rgba(255, 255, 255, 0.08)',
|
||
}}
|
||
_active={{
|
||
transform: 'translateY(0)',
|
||
}}
|
||
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
||
>
|
||
{getButtonText(plan)}
|
||
</Button>
|
||
</Box>
|
||
|
||
{/* 功能列表 */}
|
||
<VStack spacing={4} align="stretch" px={2}>
|
||
{plan.features.map((feature: any, idx: number) => (
|
||
<Flex key={idx} align="start" gap={3}>
|
||
<Flex
|
||
justify="center"
|
||
align="center"
|
||
flexShrink={0}
|
||
w={5}
|
||
h={5}
|
||
mt={0.5}
|
||
bg={feature.enabled ? (isPremium ? '#D4AF37' : '#00ff88') : 'transparent'}
|
||
borderRadius="full"
|
||
boxShadow={
|
||
feature.enabled
|
||
? isPremium
|
||
? '0 0 0 1px rgba(212,175,55,0.30) inset, 0 0 10px rgba(212,175,55,0.50) inset'
|
||
: '0 0 0 1px rgba(255,255,255,0.20) inset, 0 0 10px rgba(255,255,255,0.50) inset'
|
||
: 'none'
|
||
}
|
||
>
|
||
<Icon
|
||
as={feature.enabled ? FaCheck : FaTimes}
|
||
color={feature.enabled ? '#000' : 'rgba(255, 255, 255, 0.3)'}
|
||
boxSize={3}
|
||
/>
|
||
</Flex>
|
||
<Text
|
||
fontSize="sm"
|
||
color={feature.enabled ? 'rgba(255, 255, 255, 0.85)' : 'rgba(255, 255, 255, 0.35)'}
|
||
flex={1}
|
||
fontWeight={feature.enabled && isPremium && idx === 0 ? 'semibold' : 'normal'}
|
||
lineHeight="1.6"
|
||
>
|
||
{feature.name}
|
||
{feature.limit && (
|
||
<Text as="span" fontSize="xs" color={isPremium ? '#E5C047' : '#00ff88'} ml={1.5} fontWeight="medium">
|
||
({feature.limit})
|
||
</Text>
|
||
)}
|
||
</Text>
|
||
</Flex>
|
||
))}
|
||
</VStack>
|
||
</VStack>
|
||
</Box>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</Flex>
|
||
|
||
{/* FAQ 区域 */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<Box
|
||
p={8}
|
||
borderRadius="2xl"
|
||
bg="rgba(30, 30, 30, 0.5)"
|
||
backdropFilter="blur(20px)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
maxW="900px"
|
||
mx="auto"
|
||
>
|
||
<Text fontSize="2xl" fontWeight="bold" color="white" mb={6} textAlign="center">
|
||
常见问题
|
||
</Text>
|
||
|
||
<VStack spacing={4} align="stretch">
|
||
{subscriptionConfig.faqs.map((faq: any, index: number) => (
|
||
<Box
|
||
key={index}
|
||
borderRadius="lg"
|
||
bg="rgba(255, 255, 255, 0.03)"
|
||
border="1px solid"
|
||
borderColor="rgba(255, 255, 255, 0.1)"
|
||
overflow="hidden"
|
||
transition="all 0.3s"
|
||
_hover={{
|
||
bg: 'rgba(255, 255, 255, 0.05)',
|
||
borderColor: 'rgba(212, 175, 55, 0.3)',
|
||
}}
|
||
>
|
||
<Flex
|
||
p={5}
|
||
justify="space-between"
|
||
align="center"
|
||
cursor="pointer"
|
||
onClick={() => setOpenFaqIndex(openFaqIndex === index ? null : index)}
|
||
>
|
||
<Text fontSize="md" fontWeight="medium" color="white">
|
||
{faq.question}
|
||
</Text>
|
||
<Icon
|
||
as={openFaqIndex === index ? FaChevronUp : FaChevronDown}
|
||
color="#D4AF37"
|
||
boxSize={5}
|
||
/>
|
||
</Flex>
|
||
|
||
<AnimatePresence>
|
||
{openFaqIndex === index && (
|
||
<motion.div
|
||
initial={{ height: 0, opacity: 0 }}
|
||
animate={{ height: 'auto', opacity: 1 }}
|
||
exit={{ height: 0, opacity: 0 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<Box p={5} pt={0} color="rgba(255, 255, 255, 0.7)" fontSize="sm">
|
||
{faq.answer.split('\n').map((line: string, idx: number) => (
|
||
<Text key={idx} mb={line.startsWith('•') ? 1 : 2}>
|
||
{line}
|
||
</Text>
|
||
))}
|
||
</Box>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</Box>
|
||
))}
|
||
</VStack>
|
||
</Box>
|
||
</motion.div>
|
||
</Container>
|
||
|
||
{/* 支付模态框 */}
|
||
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
|
||
<ModalOverlay bg="rgba(0, 0, 0, 0.8)" backdropFilter="blur(10px)" />
|
||
<ModalContent bg="#1e1e1e" borderRadius="2xl" border="1px solid rgba(255, 255, 255, 0.1)">
|
||
<ModalHeader color="white">微信支付</ModalHeader>
|
||
<ModalCloseButton color="white" />
|
||
<ModalBody pb={6}>
|
||
{!paymentOrder ? (
|
||
<VStack spacing={6} align="stretch">
|
||
{/* 订阅类型提示 */}
|
||
{selectedPlan && priceInfo && (
|
||
<>
|
||
{priceInfo.is_upgrade && (
|
||
<Box
|
||
p={3}
|
||
bg="rgba(76, 175, 80, 0.1)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(76, 175, 80, 0.3)"
|
||
>
|
||
<HStack spacing={2}>
|
||
<Icon as={FaCheck} color="green.400" />
|
||
<Text color="green.400" fontSize="sm" fontWeight="medium">
|
||
{priceInfo.final_amount === 0
|
||
? `恭喜！您的当前订阅剩余价值足够直接升级到${selectedPlan.displayName}，无需支付额外费用！`
|
||
: `升级到${selectedPlan.displayName}，立即生效！按差价补缴费用`}
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
{priceInfo.is_downgrade && (
|
||
<Box
|
||
p={3}
|
||
bg="rgba(255, 165, 0, 0.1)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255, 165, 0, 0.3)"
|
||
>
|
||
<HStack spacing={2}>
|
||
<Icon as={FaClock} color="orange.400" />
|
||
<Text color="orange.400" fontSize="sm" fontWeight="medium">
|
||
当前{priceInfo.current_plan?.toUpperCase()}订阅到期后自动切换到{selectedPlan.displayName}
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
{priceInfo.is_renewal && (
|
||
<Box
|
||
p={3}
|
||
bg="rgba(33, 150, 243, 0.1)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(33, 150, 243, 0.3)"
|
||
>
|
||
<HStack spacing={2}>
|
||
<Icon as={FaRedo} color="blue.400" />
|
||
<Text color="blue.400" fontSize="sm" fontWeight="medium">
|
||
续费{selectedPlan.displayName}，在当前到期日基础上延长时长
|
||
</Text>
|
||
</HStack>
|
||
</Box>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* 价格明细 */}
|
||
{selectedPlan && priceInfo && (
|
||
<Box
|
||
p={4}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255, 255, 255, 0.1)"
|
||
>
|
||
<VStack spacing={3} align="stretch">
|
||
<Flex justify="space-between" align="center">
|
||
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
|
||
{selectedPlan.displayName} · {selectedCycle === 'monthly' ? '月付' : selectedCycle === 'quarterly' ? '季付' : selectedCycle === 'semiannual' ? '半年付' : '年付'}
|
||
</Text>
|
||
<Text color="white" fontWeight="medium">
|
||
¥{priceInfo.original_price?.toFixed(2) || getCurrentPrice(selectedPlan).toFixed(2)}
|
||
</Text>
|
||
</Flex>
|
||
|
||
{/* 升级抵扣价值 */}
|
||
{priceInfo.is_upgrade && priceInfo.remaining_value > 0 && (
|
||
<Flex justify="space-between" align="center">
|
||
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
|
||
当前订阅剩余价值抵扣
|
||
</Text>
|
||
<Text color="green.400" fontWeight="medium">
|
||
-¥{priceInfo.remaining_value.toFixed(2)}
|
||
</Text>
|
||
</Flex>
|
||
)}
|
||
|
||
{/* 优惠码折扣 */}
|
||
{promoCodeApplied && priceInfo.discount_amount > 0 && (
|
||
<Flex justify="space-between" align="center">
|
||
<HStack spacing={2}>
|
||
<Icon as={FaCheck} color="green.400" boxSize={3} />
|
||
<Text color="rgba(255, 255, 255, 0.7)" fontSize="sm">
|
||
优惠码折扣
|
||
</Text>
|
||
</HStack>
|
||
<Text color="green.400" fontWeight="medium">
|
||
-¥{priceInfo.discount_amount.toFixed(2)}
|
||
</Text>
|
||
</Flex>
|
||
)}
|
||
|
||
<Divider borderColor="rgba(255, 255, 255, 0.1)" />
|
||
|
||
<Flex justify="space-between" align="baseline">
|
||
<Text fontSize="lg" fontWeight="bold" color="white">实付金额:</Text>
|
||
<Text fontSize="2xl" fontWeight="bold" color="#D4AF37">
|
||
¥{priceInfo.final_amount.toFixed(2)}
|
||
</Text>
|
||
</Flex>
|
||
</VStack>
|
||
</Box>
|
||
)}
|
||
|
||
{/* 优惠码输入 */}
|
||
{selectedPlan && (
|
||
<Box>
|
||
<HStack spacing={2}>
|
||
<Input
|
||
placeholder="输入优惠码（可选）"
|
||
value={promoCode}
|
||
onChange={(e) => {
|
||
setPromoCode(e.target.value.toUpperCase());
|
||
setPromoCodeError('');
|
||
}}
|
||
size="md"
|
||
isDisabled={promoCodeApplied}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
border="1px solid rgba(255, 255, 255, 0.1)"
|
||
color="white"
|
||
_placeholder={{ color: 'rgba(255, 255, 255, 0.4)' }}
|
||
_hover={{ borderColor: 'rgba(212, 175, 55, 0.3)' }}
|
||
_focus={{ borderColor: '#D4AF37', boxShadow: '0 0 0 1px #D4AF37' }}
|
||
/>
|
||
<Button
|
||
bgGradient="linear-gradient(135deg, rgba(138, 43, 226, 0.8), rgba(123, 31, 162, 0.8))"
|
||
color="white"
|
||
onClick={handleValidatePromoCode}
|
||
isLoading={validatingPromo}
|
||
isDisabled={!promoCode || promoCodeApplied}
|
||
minW="80px"
|
||
_hover={{
|
||
bgGradient: 'linear-gradient(135deg, rgba(138, 43, 226, 1), rgba(123, 31, 162, 1))',
|
||
}}
|
||
>
|
||
应用
|
||
</Button>
|
||
</HStack>
|
||
{promoCodeError && (
|
||
<Text color="red.400" fontSize="sm" mt={2}>
|
||
{promoCodeError}
|
||
</Text>
|
||
)}
|
||
{promoCodeApplied && priceInfo && (
|
||
<HStack
|
||
mt={2}
|
||
p={2}
|
||
bg="rgba(72, 187, 120, 0.1)"
|
||
borderRadius="md"
|
||
border="1px solid rgba(72, 187, 120, 0.3)"
|
||
>
|
||
<Icon as={FaCheck} color="green.400" />
|
||
<Text color="green.400" fontSize="sm" fontWeight="medium" flex={1}>
|
||
优惠码已应用！节省 ¥{priceInfo.discount_amount.toFixed(2)}
|
||
</Text>
|
||
<Icon
|
||
as={FaTimes}
|
||
color="rgba(255, 255, 255, 0.5)"
|
||
cursor="pointer"
|
||
onClick={handleRemovePromoCode}
|
||
_hover={{ color: 'red.400' }}
|
||
/>
|
||
</HStack>
|
||
)}
|
||
</Box>
|
||
)}
|
||
|
||
<Button
|
||
w="full"
|
||
size="lg"
|
||
bgGradient="linear-gradient(135deg, #D4AF37, #B8941F)"
|
||
color="#000"
|
||
fontWeight="bold"
|
||
onClick={handleCreatePaymentOrder}
|
||
isLoading={loading}
|
||
isDisabled={!selectedPlan}
|
||
_hover={{
|
||
bgGradient: 'linear-gradient(135deg, #F4E3A7, #D4AF37)',
|
||
}}
|
||
>
|
||
{priceInfo?.is_upgrade && priceInfo?.final_amount === 0
|
||
? '立即免费升级'
|
||
: '创建微信支付订单'}
|
||
</Button>
|
||
</VStack>
|
||
) : (
|
||
<VStack spacing={4}>
|
||
<Text color="rgba(255, 255, 255, 0.7)" fontSize="lg" fontWeight="bold">
|
||
请使用微信扫描二维码完成支付
|
||
</Text>
|
||
|
||
{/* 倒计时 */}
|
||
<Box
|
||
p={3}
|
||
bg="rgba(255, 165, 0, 0.1)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255, 165, 0, 0.3)"
|
||
w="full"
|
||
>
|
||
<HStack justify="center" spacing={2} mb={2}>
|
||
<Icon as={FaClock} color="orange.400" />
|
||
<Text color="orange.300" fontSize="sm">
|
||
二维码有效时间: {formatTime(paymentCountdown)}
|
||
</Text>
|
||
</HStack>
|
||
<Progress
|
||
value={(paymentCountdown / (30 * 60)) * 100}
|
||
colorScheme="orange"
|
||
size="sm"
|
||
borderRadius="full"
|
||
/>
|
||
</Box>
|
||
|
||
{/* 二维码 */}
|
||
<Box textAlign="center">
|
||
{paymentOrder.qr_code_url ? (
|
||
<Image
|
||
src={paymentOrder.qr_code_url}
|
||
alt="微信支付二维码"
|
||
mx="auto"
|
||
maxW="200px"
|
||
border="2px solid"
|
||
borderColor="rgba(255, 255, 255, 0.2)"
|
||
borderRadius="lg"
|
||
bg="white"
|
||
p={2}
|
||
/>
|
||
) : (
|
||
<Flex
|
||
w="200px"
|
||
h="200px"
|
||
mx="auto"
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
border="2px solid"
|
||
borderColor="rgba(255, 255, 255, 0.2)"
|
||
borderRadius="lg"
|
||
>
|
||
<Icon as={FaQrcode} color="rgba(255, 255, 255, 0.3)" boxSize={12} />
|
||
</Flex>
|
||
)}
|
||
</Box>
|
||
|
||
{/* 订单信息 */}
|
||
<Box
|
||
p={4}
|
||
bg="rgba(255, 255, 255, 0.05)"
|
||
borderRadius="lg"
|
||
border="1px solid rgba(255, 255, 255, 0.1)"
|
||
w="full"
|
||
>
|
||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)" mb={2}>
|
||
订单号: {paymentOrder.order_no}
|
||
</Text>
|
||
<Flex justify="space-between" align="baseline">
|
||
<Text color="rgba(255, 255, 255, 0.7)">支付金额:</Text>
|
||
<Text fontSize="xl" fontWeight="bold" color="#D4AF37">
|
||
¥{paymentOrder.amount}
|
||
</Text>
|
||
</Flex>
|
||
</Box>
|
||
|
||
{/* 操作按钮 */}
|
||
<VStack spacing={3} w="full">
|
||
<Button
|
||
w="full"
|
||
size="lg"
|
||
bgGradient="linear-gradient(135deg, #D4AF37, #B8941F)"
|
||
color="#000"
|
||
fontWeight="bold"
|
||
leftIcon={<Icon as={FaRedo} />}
|
||
onClick={handleForceUpdate}
|
||
isLoading={forceUpdating}
|
||
_hover={{
|
||
bgGradient: 'linear-gradient(135deg, #F4E3A7, #D4AF37)',
|
||
}}
|
||
>
|
||
已完成支付
|
||
</Button>
|
||
</VStack>
|
||
</VStack>
|
||
)}
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
</Box>
|
||
);
|
||
}
|