fix: 修改布局代码
This commit is contained in:
parent
98b3f9bb5b
commit
afdfbc63dc
@ -3,7 +3,7 @@ NEXT_PUBLIC_DEFAULT_LANGUAGE=en-US
|
||||
|
||||
# Site URL and API URL
|
||||
NEXT_PUBLIC_SITE_URL=https://user.ppanel.dev
|
||||
NEXT_PUBLIC_API_URL=https://api.ppanel.dev
|
||||
NEXT_PUBLIC_API_URL=https://api.kxsw.us
|
||||
NEXT_PUBLIC_CDN_URL=https://cdn.jsdelivr.net
|
||||
|
||||
# Home Page Settings
|
||||
|
||||
@ -2,10 +2,11 @@ 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@workspace/ui/components/tabs';
|
||||
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, useEffect, useImperativeHandle, useState } from 'react';
|
||||
|
||||
// 定义数据类型
|
||||
interface SubscriptionData {
|
||||
id: string;
|
||||
@ -24,15 +25,27 @@ interface SubscriptionData {
|
||||
};
|
||||
}
|
||||
|
||||
// 计算折扣价格的函数
|
||||
const calculateDiscountPrice = (unitPrice: number, discountPercent: number) => {
|
||||
// 折扣百分比转换为小数 (80 -> 0.8)
|
||||
const discountRate = discountPercent / 100;
|
||||
// 计算折扣后的价格
|
||||
const discountedPrice = unitPrice * discountRate;
|
||||
// 使用 unitConversion 避免浮点数精度问题
|
||||
return unitConversion('dollarsToCents', discountedPrice);
|
||||
};
|
||||
|
||||
// 计算原价（未折扣价格）
|
||||
const calculateOriginalPrice = (unitPrice: number, discountPercent: number) => {
|
||||
// 原价就是 unitPrice
|
||||
return unitConversion('dollarsToCents', unitPrice);
|
||||
};
|
||||
|
||||
// 套餐卡片组件
|
||||
const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: boolean }) => {
|
||||
const PlanCard = ({ plan }: { plan: SubscriptionData }) => {
|
||||
return (
|
||||
<div
|
||||
className={`relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 sm:p-6 md:p-8 ${
|
||||
isSelected
|
||||
? 'border-[#0F2C53] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
|
||||
: 'shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] hover:border-[#0F2C53]'
|
||||
} `}
|
||||
className={`relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-4 transition-all duration-300 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>
|
||||
@ -40,14 +53,16 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
{/* 价格区域 */}
|
||||
<div className='mb-6 sm:mb-8'>
|
||||
<div className='mb-2 flex items-baseline gap-2'>
|
||||
<span className='text-lg font-bold leading-[1.125em] text-[#666666] line-through sm:text-xl md:text-[24px]'>
|
||||
¥{plan.originalPrice}
|
||||
</span>
|
||||
{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.price}
|
||||
${plan.discount_price}
|
||||
</span>
|
||||
<span className='text-sm font-normal leading-[1.8em] text-[#4D4D4D] sm:text-[15px]'>
|
||||
/月
|
||||
/年
|
||||
</span>
|
||||
</div>
|
||||
<p className='text-left text-[10px] font-normal text-black'>年付享受8折优惠</p>
|
||||
@ -67,7 +82,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
可用流量：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.traffic}
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -75,7 +90,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
套餐时长：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.duration}
|
||||
1
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -83,7 +98,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
在线IP：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.onlineIPs}
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -91,7 +106,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
在线连接数：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.connections}
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -99,7 +114,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
峰值带宽：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.bandwidth}
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -107,7 +122,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
可用节点：
|
||||
</span>
|
||||
<span className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{plan.features.nodes}
|
||||
11
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex items-start justify-between py-1'>
|
||||
@ -115,7 +130,7 @@ const PlanCard = ({ plan, isSelected }: { plan: SubscriptionData; isSelected?: b
|
||||
网络稳定指数:
|
||||
</span>
|
||||
<div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
|
||||
{Array.from({ length: plan.features.stability }, (_, i) => (
|
||||
{Array.from({ length: 4 }, (_, i) => (
|
||||
<span key={i} className='text-black'>
|
||||
✭
|
||||
</span>
|
||||
@ -136,14 +151,19 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// 使用 useQuery 来管理请求
|
||||
const { data, isLoading, error, refetch } = 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 as unknown as SubscriptionData[];
|
||||
return list.filter((v) => v.unit_time === 'Month') as unknown as SubscriptionData[];
|
||||
} catch (err) {
|
||||
// 自定义错误处理
|
||||
console.error('获取订阅数据失败:', err);
|
||||
@ -167,73 +187,27 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
hide: () => setOpen(false),
|
||||
}));
|
||||
|
||||
// 处理数据
|
||||
const processedData =
|
||||
data?.map((item) => ({
|
||||
...item,
|
||||
displayPrice: `¥${item.price}`,
|
||||
displayDuration: item.duration === 'year' ? '年付' : '月付',
|
||||
})) || [];
|
||||
|
||||
// 如果没有数据，使用模拟数据
|
||||
const mockData: SubscriptionData[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Basic Plan',
|
||||
price: 8,
|
||||
originalPrice: 10,
|
||||
duration: 'year',
|
||||
features: {
|
||||
traffic: '140G',
|
||||
duration: '30天',
|
||||
onlineIPs: '3个',
|
||||
connections: '300',
|
||||
bandwidth: '200Mbps',
|
||||
nodes: '15个',
|
||||
stability: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Standard Plan',
|
||||
price: 24,
|
||||
originalPrice: 30,
|
||||
duration: 'year',
|
||||
features: {
|
||||
traffic: '160G',
|
||||
duration: '30天',
|
||||
onlineIPs: '3个',
|
||||
connections: '300',
|
||||
bandwidth: '300Mbps',
|
||||
nodes: '15个',
|
||||
stability: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Pro Plan',
|
||||
price: 48,
|
||||
originalPrice: 60,
|
||||
duration: 'year',
|
||||
features: {
|
||||
traffic: '180G',
|
||||
duration: '30天',
|
||||
onlineIPs: '3个',
|
||||
connections: '300',
|
||||
bandwidth: '500Mbps',
|
||||
nodes: '29个',
|
||||
stability: 5,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 使用真实数据或模拟数据
|
||||
const displayData = mockData;
|
||||
|
||||
// 按类型分组数据
|
||||
const yearlyPlans = displayData.filter((item) => item.duration === 'year');
|
||||
const monthlyPlans = displayData.filter((item) => item.duration === 'month');
|
||||
console.log(processedData);
|
||||
const yearlyPlans = data.map((item) => {
|
||||
const discountItem = item.discount.find((v) => v.quantity === 12);
|
||||
return {
|
||||
...item,
|
||||
origin_price: unitConversion('centsToDollars', item.unit_price * 12), // 原价
|
||||
discount_price: unitConversion(
|
||||
'centsToDollars',
|
||||
item.unit_price * (discountItem.discount / 100) * 12,
|
||||
), // 优惠价格
|
||||
};
|
||||
});
|
||||
const monthlyPlans = data.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
origin_price: '', // 原价
|
||||
discount_price: unitConversion('centsToDollars', item.unit_price), // 优惠价格
|
||||
};
|
||||
});
|
||||
const [tabValue, setTabValue] = useState('year');
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent
|
||||
@ -245,15 +219,22 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
'right-6 top-6 font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
|
||||
}
|
||||
>
|
||||
<DialogTitle className={'mb-4 text-center text-4xl font-bold text-[#0F2C53] md:text-5xl'}>
|
||||
选择套餐
|
||||
</DialogTitle>
|
||||
<div className={'min-h-[600px]'}>
|
||||
<DialogTitle className={''}>
|
||||
<div className={'mb-4 text-center text-4xl font-bold text-[#0F2C53] md:text-5xl'}>
|
||||
选择套餐
|
||||
</div>
|
||||
<div className={'mb-8 text-center text-lg font-medium text-[#666666]'}>
|
||||
选择最适合您的服务套餐
|
||||
</div>
|
||||
</DialogTitle>
|
||||
<div>
|
||||
<div className={'mt-8'}>
|
||||
<Tabs defaultValue='year' className={'text-center'}>
|
||||
<Tabs
|
||||
defaultValue='year'
|
||||
className={'text-center'}
|
||||
value={tabValue}
|
||||
onValueChange={setTabValue}
|
||||
>
|
||||
<TabsList className='mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
|
||||
<TabsTrigger
|
||||
className={
|
||||
@ -272,8 +253,11 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
月付套餐
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value='year'>
|
||||
</Tabs>
|
||||
</div>
|
||||
<ScrollArea className={'h-[600px]'}>
|
||||
{tabValue === 'year' && (
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div className='py-12 text-center'>
|
||||
<div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
|
||||
@ -290,9 +274,9 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
</button>
|
||||
</div>
|
||||
) : yearlyPlans.length > 0 ? (
|
||||
<div className='relative'>
|
||||
<div className='relative mt-8'>
|
||||
{/* 卡片容器 */}
|
||||
<div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
|
||||
<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'>
|
||||
{yearlyPlans.map((plan, index) => (
|
||||
<PlanCard key={plan.id} plan={plan} />
|
||||
))}
|
||||
@ -303,9 +287,10 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
<p className='text-lg text-gray-500'>暂无年付套餐</p>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value='month'>
|
||||
</div>
|
||||
)}
|
||||
{tabValue === 'month' && (
|
||||
<div>
|
||||
{isLoading ? (
|
||||
<div className='py-12 text-center'>
|
||||
<div className='mx-auto h-12 w-12 animate-spin rounded-full border-b-2 border-[#0F2C53]'></div>
|
||||
@ -323,9 +308,6 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
</div>
|
||||
) : monthlyPlans.length > 0 ? (
|
||||
<div className='relative'>
|
||||
{/* 连接线 */}
|
||||
<div className='absolute left-1/2 top-0 h-8 w-0.5 -translate-x-1/2 transform bg-gradient-to-b from-[#0F2C53] to-transparent opacity-60'></div>
|
||||
|
||||
{/* 卡片容器 */}
|
||||
<div className='mt-8 grid grid-cols-1 justify-items-center gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 lg:gap-8'>
|
||||
{monthlyPlans.map((plan, index) => (
|
||||
@ -338,9 +320,9 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
<p className='text-lg text-gray-500'>暂无月付套餐</p>
|
||||
</div>
|
||||
)}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user