129 lines
4.2 KiB
TypeScript
129 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { querySubscribeList } from '@/services/user/subscribe';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Tabs, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
|
import { useTranslations } from 'next-intl';
|
|
import { useMemo, useRef, useState } from 'react';
|
|
|
|
import { LoginDialogProvider } from '@/app/auth/LoginDialogContext';
|
|
import { TabContent } from '@/components/main/OfferDialog/TabContent';
|
|
import { ProcessedPlanData } from '@/components/main/OfferDialog/types';
|
|
import Purchase from '@/components/subscribe/purchase';
|
|
import { unitConversion } from '@workspace/ui/utils';
|
|
|
|
export default function Page() {
|
|
const t = useTranslations('subscribe');
|
|
const [tabValue, setTabValue] = useState<'year' | 'month'>('year');
|
|
|
|
const { data, isLoading, error, refetch } = useQuery({
|
|
queryKey: ['querySubscribeList'],
|
|
queryFn: async () => {
|
|
const { data } = await querySubscribeList();
|
|
return data.data?.list?.filter((v) => v.unit_time === 'Month') || [];
|
|
},
|
|
});
|
|
|
|
// 处理套餐数据的工具函数
|
|
const processPlanData = (item: API.Subscribe, 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],
|
|
);
|
|
|
|
// 处理订阅点击
|
|
const handleSubscribe = (plan: ProcessedPlanData) => {
|
|
console.log('用户选择了套餐:', plan);
|
|
// 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
|
|
PurchaseRef.current.show(plan, tabValue);
|
|
};
|
|
|
|
const PurchaseRef = useRef<{
|
|
show: (subscribe: API.Subscribe, tabValue: string) => void;
|
|
hide: () => void;
|
|
}>(null);
|
|
|
|
return (
|
|
<>
|
|
<LoginDialogProvider>
|
|
<div
|
|
className={
|
|
'hidden text-4xl font-bold text-[#0F2C53] sm:block md:mb-4 md:text-center md:text-5xl'
|
|
}
|
|
>
|
|
选择套餐
|
|
</div>
|
|
<div
|
|
className={
|
|
'-mt-5 text-right text-lg font-bold text-[#666666] sm:mt-0 sm:text-center sm:font-medium'
|
|
}
|
|
>
|
|
选择最适合您的服务套餐
|
|
</div>
|
|
<div>
|
|
<Tabs
|
|
defaultValue='year'
|
|
className={'mt-8 text-center md:mt-16'}
|
|
value={tabValue}
|
|
onValueChange={(value) => setTabValue(value as 'year' | 'month')}
|
|
>
|
|
<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>
|
|
<TabContent
|
|
tabValue={tabValue}
|
|
yearlyPlans={yearlyPlans}
|
|
monthlyPlans={monthlyPlans}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
onRetry={refetch}
|
|
onSubscribe={handleSubscribe}
|
|
/>
|
|
</div>
|
|
<Purchase ref={PurchaseRef} />
|
|
</LoginDialogProvider>
|
|
</>
|
|
);
|
|
}
|