401 lines
13 KiB
TypeScript
401 lines
13 KiB
TypeScript
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
|
||
import { getSubscription } from '@/services/user/portal';
|
||
import { useQuery } from '@tanstack/react-query';
|
||
import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
|
||
import { ScrollArea } from '@workspace/ui/components/scroll-area';
|
||
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
||
import { unitConversion } from '@workspace/ui/utils';
|
||
import Image from 'next/image';
|
||
import {
|
||
forwardRef,
|
||
useCallback,
|
||
useEffect,
|
||
useImperativeHandle,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react';
|
||
|
||
import { TabContent } from './TabContent';
|
||
import { ProcessedPlanData } from './types';
|
||
|
||
// 加载状态组件
|
||
const LoadingState = () => (
|
||
<div className='py-12 text-center'>
|
||
<div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
|
||
<p className='mt-4 text-gray-600'>加载中...</p>
|
||
</div>
|
||
);
|
||
|
||
// 错误状态组件
|
||
const ErrorState = ({ onRetry }: { onRetry: () => void }) => (
|
||
<div className='py-12 text-center'>
|
||
<p className='text-lg text-red-500'>加载失败，请重试</p>
|
||
<button
|
||
onClick={onRetry}
|
||
className='mt-4 rounded-lg bg-[#0F2C53] px-6 py-2 text-white transition-colors hover:bg-[#0A2C47]'
|
||
>
|
||
重新加载
|
||
</button>
|
||
</div>
|
||
);
|
||
|
||
// 空状态组件
|
||
const EmptyState = ({ message }: { message: string }) => (
|
||
<div className='py-12 text-center'>
|
||
<p className='text-lg text-gray-500'>{message}</p>
|
||
</div>
|
||
);
|
||
|
||
// 价格显示组件
|
||
const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => (
|
||
<div className='mb-4 sm:mb-8'>
|
||
<div className='mb-1 flex items-baseline gap-2'>
|
||
{plan.origin_price && (
|
||
<span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
|
||
${plan.origin_price}
|
||
</span>
|
||
)}
|
||
<span className='text-lg font-bold leading-[1.125em] text-[#091B33] sm:text-xl md:text-[24px]'>
|
||
${plan.discount_price}
|
||
</span>
|
||
<span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>/年</span>
|
||
</div>
|
||
{plan.origin_price && (
|
||
<p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
|
||
)}
|
||
</div>
|
||
);
|
||
|
||
// 订阅按钮组件
|
||
const SubscribeButton = ({ onClick }: { onClick?: () => void }) => (
|
||
<button
|
||
onClick={onClick}
|
||
className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#0A2C47] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
|
||
>
|
||
订阅
|
||
</button>
|
||
);
|
||
|
||
// 星级评分组件
|
||
const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: number }) => (
|
||
<div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||
{Array.from({ length: Math.min(rating, maxRating) }, (_, i) => (
|
||
<span key={i} className='text-black'>
|
||
✭
|
||
</span>
|
||
))}
|
||
</div>
|
||
);
|
||
|
||
// 功能列表组件
|
||
const FeatureList = ({ plan }: { plan: ProcessedPlanData }) => {
|
||
const features = [
|
||
{ label: '可用流量', value: plan.features?.traffic || '1' },
|
||
{ label: '套餐时长', value: plan.features?.duration || '1' },
|
||
{ label: '在线IP', value: plan.features?.onlineIPs || '2' },
|
||
{ label: '在线连接数', value: plan.features?.connections || '3' },
|
||
{ label: '峰值带宽', value: plan.features?.bandwidth || '2' },
|
||
{ label: '可用节点', value: plan.features?.nodes || '11' },
|
||
];
|
||
|
||
return (
|
||
<div className='mt-6 space-y-0 sm:mt-8'>
|
||
<ul className='space-y-1'>
|
||
{features.map((feature) => (
|
||
<li key={feature.label} className='flex items-start justify-between py-1'>
|
||
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||
{feature.label}：
|
||
</span>
|
||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||
{feature.value}
|
||
</span>
|
||
</li>
|
||
))}
|
||
<li className='flex items-start justify-between py-1'>
|
||
<span className='text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||
网络稳定指数:
|
||
</span>
|
||
<StarRating rating={plan.features?.stability || 4} />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// 套餐卡片组件
|
||
const PlanCard = forwardRef<
|
||
HTMLDivElement,
|
||
{
|
||
plan: ProcessedPlanData;
|
||
tabValue: string;
|
||
onSubscribe?: (plan: ProcessedPlanData) => void;
|
||
isFirstCard?: boolean;
|
||
}
|
||
>(({ plan, onSubscribe, isFirstCard = false }, ref) => {
|
||
const handleSubscribe = () => {
|
||
onSubscribe?.(plan);
|
||
};
|
||
|
||
return (
|
||
<div
|
||
ref={ref}
|
||
className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 hover:shadow-lg sm:p-6 md:p-8'
|
||
>
|
||
{/* 套餐名称 */}
|
||
<h3 className='mb-4 text-left text-sm font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
|
||
|
||
{/* 价格区域 */}
|
||
<PriceDisplay plan={plan} />
|
||
|
||
{/* 订阅按钮 */}
|
||
<SubscribeButton onClick={handleSubscribe} />
|
||
|
||
{/* 功能列表 */}
|
||
<FeatureList plan={plan} />
|
||
</div>
|
||
);
|
||
});
|
||
|
||
PlanCard.displayName = 'PlanCard';
|
||
|
||
// 套餐列表组件
|
||
export const PlanList = ({
|
||
plans,
|
||
tabValue,
|
||
isLoading,
|
||
error,
|
||
onRetry,
|
||
emptyMessage,
|
||
onSubscribe,
|
||
firstPlanCardRef, // 新增参数
|
||
}: {
|
||
plans: ProcessedPlanData[];
|
||
tabValue: string;
|
||
isLoading: boolean;
|
||
error: any;
|
||
onRetry: () => void;
|
||
emptyMessage: string;
|
||
onSubscribe?: (plan: ProcessedPlanData) => void;
|
||
firstPlanCardRef?: React.RefObject<HTMLDivElement | null>;
|
||
}) => {
|
||
if (isLoading) return <LoadingState />;
|
||
if (error) return <ErrorState onRetry={onRetry} />;
|
||
if (plans.length === 0) return <EmptyState message={emptyMessage} />;
|
||
|
||
return (
|
||
<div className='grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
|
||
{plans.map((plan, index) => (
|
||
<PlanCard
|
||
key={`${plan.id}-${plan.name}`}
|
||
tabValue={tabValue}
|
||
plan={plan}
|
||
onSubscribe={onSubscribe}
|
||
isFirstCard={index === 0} // 标识第一项
|
||
ref={index === 0 ? firstPlanCardRef : undefined} // 第一项使用ref
|
||
/>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export interface OfferDialogRef {
|
||
show: () => void;
|
||
hide: () => void;
|
||
}
|
||
|
||
const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||
const [open, setOpen] = useState(false);
|
||
const [tabValue, setTabValue] = useState('year');
|
||
const [selectedPlan, setSelectedPlan] = useState<ProcessedPlanData | null>(null);
|
||
const [scrollAreaHeight, setScrollAreaHeight] = useState(450);
|
||
const [planCardHeight, setPlanCardHeight] = useState(600);
|
||
const dialogRef = useRef<HTMLDivElement>(null);
|
||
const scrollAreaRef = useRef<HTMLDivElement>(null);
|
||
const firstPlanCardRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 获取PlanCard高度
|
||
const getPlanCardHeight = useCallback(() => {
|
||
if (firstPlanCardRef.current) {
|
||
return firstPlanCardRef.current.offsetHeight;
|
||
}
|
||
return 600; // 默认高度
|
||
}, []);
|
||
|
||
// 计算 ScrollArea 高度
|
||
const calculateScrollAreaHeight = useCallback(() => {
|
||
if (dialogRef.current && scrollAreaRef.current) {
|
||
const isMobile = window.innerWidth < 768;
|
||
|
||
if (isMobile) {
|
||
// 移动端：使用动态计算
|
||
const dialogHeight = dialogRef.current.offsetHeight;
|
||
const scrollAreaTop = scrollAreaRef.current.offsetTop;
|
||
const calculatedHeight = dialogHeight - scrollAreaTop;
|
||
setScrollAreaHeight(calculatedHeight);
|
||
} else {
|
||
// PC端：使用PlanCard第一项高度
|
||
const cardHeight = getPlanCardHeight();
|
||
setScrollAreaHeight(cardHeight);
|
||
}
|
||
}
|
||
}, [getPlanCardHeight]);
|
||
|
||
// 使用 useQuery 来管理请求
|
||
const {
|
||
data = [],
|
||
isLoading,
|
||
error,
|
||
refetch,
|
||
} = useQuery({
|
||
queryKey: ['subscription'],
|
||
queryFn: async () => {
|
||
try {
|
||
const response = await getSubscription({ skipErrorHandler: true });
|
||
// 确保返回有效的数组，避免 undefined
|
||
const list = response.data?.data?.list || [];
|
||
return list.filter((v) => v.unit_time === 'Month') as unknown as ProcessedPlanData[];
|
||
} catch (err) {
|
||
// 自定义错误处理
|
||
console.error('获取订阅数据失败:', err);
|
||
// 返回空数组而不是抛出错误，避免 queryFn 返回 undefined
|
||
return [] as ProcessedPlanData[];
|
||
}
|
||
},
|
||
enabled: false, // 初始不执行，手动控制
|
||
retry: 1, // 失败时重试1次
|
||
});
|
||
|
||
// 监听对话框打开
|
||
useEffect(() => {
|
||
if (open) {
|
||
// 等待 DOM 渲染完成
|
||
const timer = setTimeout(calculateScrollAreaHeight, 0);
|
||
return () => clearTimeout(timer);
|
||
}
|
||
}, [open, calculateScrollAreaHeight]);
|
||
|
||
// 监听窗口大小变化
|
||
useEffect(() => {
|
||
if (open) {
|
||
refetch(); // 对话框打开时重新获取数据
|
||
const handleResize = () => {
|
||
calculateScrollAreaHeight();
|
||
};
|
||
|
||
window.addEventListener('resize', handleResize);
|
||
return () => window.removeEventListener('resize', handleResize);
|
||
}
|
||
}, [open, calculateScrollAreaHeight]);
|
||
|
||
useImperativeHandle(ref, () => ({
|
||
show: () => setOpen(true),
|
||
hide: () => setOpen(false),
|
||
}));
|
||
|
||
// 处理订阅点击
|
||
const handleSubscribe = (plan: ProcessedPlanData) => {
|
||
setSelectedPlan(plan);
|
||
console.log('用户选择了套餐:', plan);
|
||
// 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
|
||
};
|
||
|
||
// 处理套餐数据的工具函数
|
||
const processPlanData = (item: ProcessedPlanData, isYearly: boolean): ProcessedPlanData => {
|
||
if (isYearly) {
|
||
const discountItem = item.discount?.find((v) => v.quantity === 12);
|
||
return {
|
||
...item,
|
||
origin_price: unitConversion('centsToDollars', item.unit_price * 12).toString(), // 原价
|
||
discount_price: unitConversion(
|
||
'centsToDollars',
|
||
item.unit_price * ((discountItem?.discount || 100) / 100) * 12,
|
||
).toString(), // 优惠价格
|
||
};
|
||
} else {
|
||
return {
|
||
...item,
|
||
origin_price: '', // 月付没有原价
|
||
discount_price: unitConversion('centsToDollars', item.unit_price).toString(), // 月付价格
|
||
};
|
||
}
|
||
};
|
||
|
||
// 使用 useMemo 优化数据处理性能
|
||
const yearlyPlans: ProcessedPlanData[] = useMemo(
|
||
() => data.map((item) => processPlanData(item, true)),
|
||
[data],
|
||
);
|
||
|
||
const monthlyPlans: ProcessedPlanData[] = useMemo(
|
||
() => data.map((item) => processPlanData(item, false)),
|
||
[data],
|
||
);
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogContent
|
||
ref={dialogRef}
|
||
className='rounded-0 !container h-full w-full gap-0 px-8 py-8 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12 md:w-[1000px]'
|
||
closeIcon={<Image src={CloseSvg} alt={'close'} />}
|
||
closeClassName={
|
||
'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
|
||
}
|
||
>
|
||
<DialogTitle className={'sr-only'}></DialogTitle>
|
||
<div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
|
||
选择套餐
|
||
</div>
|
||
<div className={'text-lg font-medium text-[#666666] md:text-center'}>
|
||
选择最适合您的服务套餐
|
||
</div>
|
||
<div>
|
||
<Tabs
|
||
defaultValue='year'
|
||
className={'mt-8 text-center md:mt-16'}
|
||
value={tabValue}
|
||
onValueChange={setTabValue}
|
||
>
|
||
<TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5 md:mb-16'>
|
||
<TabsTrigger
|
||
className={
|
||
'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
|
||
}
|
||
value='year'
|
||
>
|
||
年付套餐
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
className={
|
||
'rounded-full px-10 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
|
||
}
|
||
value='month'
|
||
>
|
||
月付套餐
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
<ScrollArea
|
||
ref={scrollAreaRef}
|
||
className='overflow-y-auto'
|
||
style={{ height: `calc(${scrollAreaHeight}px - 32px)` }}
|
||
>
|
||
<TabContent
|
||
tabValue={tabValue}
|
||
yearlyPlans={yearlyPlans}
|
||
monthlyPlans={monthlyPlans}
|
||
isLoading={isLoading}
|
||
error={error}
|
||
onRetry={refetch}
|
||
onSubscribe={handleSubscribe}
|
||
firstPlanCardRef={firstPlanCardRef}
|
||
/>
|
||
</ScrollArea>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
});
|
||
|
||
export default OfferDialog;
|