114 lines
3.8 KiB
TypeScript
114 lines
3.8 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, useState } from 'react';
|
|
|
|
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 [subscribe, setSubscribe] = useState<API.Subscribe | undefined>();
|
|
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);
|
|
// 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
|
|
setSubscribe(plan);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<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={(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 subscribe={subscribe} setSubscribe={setSubscribe} />
|
|
</>
|
|
);
|
|
}
|