feat: 修改样式
This commit is contained in:
parent
59d180075b
commit
a918cdab68
@ -4,13 +4,12 @@ import { Display } from '@/components/display';
|
||||
import { Empty } from '@/components/empty';
|
||||
import { ProList, ProListActions } from '@/components/pro-list';
|
||||
import { closeOrder, queryOrderList } from '@/services/user/order';
|
||||
import { purchaseCheckout } from '@/services/user/portal';
|
||||
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
||||
import { Card, CardContent } from '@workspace/airo-ui/components/card';
|
||||
import { formatDate } from '@workspace/airo-ui/utils';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Link from 'next/link';
|
||||
import { useRef } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import OrderDetailDialog from './components/OrderDetailDialog';
|
||||
|
||||
export default function Page() {
|
||||
@ -19,19 +18,6 @@ export default function Page() {
|
||||
const ref = useRef<ProListActions>(null);
|
||||
const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
|
||||
|
||||
const handlePayment = async (orderNo) => {
|
||||
const data = await purchaseCheckout({
|
||||
orderNo: orderNo,
|
||||
returnUrl: window.location.href,
|
||||
});
|
||||
if (data.data?.type === 'url' && data.data.checkout_url) {
|
||||
window.open(data.data.checkout_url, '_blank');
|
||||
} else {
|
||||
toast.success(t('paymentSuccess'));
|
||||
ref?.current.reset();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProList<API.OrderDetail, Record<string, unknown>>
|
||||
@ -63,14 +49,10 @@ export default function Page() {
|
||||
>
|
||||
{t('cancelOrder')}
|
||||
</AiroButton>
|
||||
<AiroButton
|
||||
variant={'primary'}
|
||||
className={'ml-2'}
|
||||
onClick={() => {
|
||||
handlePayment(item.order_no);
|
||||
}}
|
||||
>
|
||||
{t('payment')}
|
||||
<AiroButton variant={'primary'} className={'ml-2'} asChild>
|
||||
<Link key='payment' href={`/payment?order_no=${item.order_no}`}>
|
||||
{t('payment')}
|
||||
</Link>
|
||||
</AiroButton>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@ -3,26 +3,18 @@
|
||||
import { Display } from '@/components/display';
|
||||
import StripePayment from '@/components/payment/stripe';
|
||||
import { SubscribeBilling } from '@/components/subscribe/billing';
|
||||
import { SubscribeDetail } from '@/components/subscribe/detail';
|
||||
import useGlobalStore from '@/config/use-global';
|
||||
import { queryOrderDetail } from '@/services/user/order';
|
||||
import { purchaseCheckout } from '@/services/user/portal';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Badge } from '@workspace/airo-ui/components/badge';
|
||||
import { Button } from '@workspace/airo-ui/components/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@workspace/airo-ui/components/card';
|
||||
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
||||
import { Card, CardContent } from '@workspace/airo-ui/components/card';
|
||||
import { Separator } from '@workspace/airo-ui/components/separator';
|
||||
import { Icon } from '@workspace/airo-ui/custom-components/icon';
|
||||
import { formatDate } from '@workspace/airo-ui/utils';
|
||||
import { useCountDown } from 'ahooks';
|
||||
import { addMinutes, format } from 'date-fns';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { QRCodeCanvas } from 'qrcode.react';
|
||||
import { useEffect, useState } from 'react';
|
||||
@ -88,37 +80,130 @@ export default function Page() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='grid gap-4 xl:grid-cols-2'>
|
||||
<Card className='order-2 xl:order-1'>
|
||||
<CardHeader className='bg-muted/50 flex flex-row items-start'>
|
||||
<div className='grid gap-0.5'>
|
||||
<CardTitle className='flex flex-col text-lg'>
|
||||
{t('orderNumber')}
|
||||
<span>{data?.orderNo}</span>
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{t('createdAt')}: {formatDate(data?.created_at)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className='grid gap-3 p-6 text-sm'>
|
||||
<div className='font-semibold'>{t('paymentMethod')}</div>
|
||||
<dl className='grid gap-3'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<dt className='text-muted-foreground'>
|
||||
<Badge>{data?.payment.name || data?.payment.platform}</Badge>
|
||||
</dt>
|
||||
<div className=''>
|
||||
<Card className='border-none shadow-none sm:border sm:shadow'>
|
||||
<CardContent className='grid gap-2 p-6 text-sm'>
|
||||
<div className='relative'>
|
||||
<div className={'absolute flex gap-3'}>
|
||||
<div
|
||||
className={
|
||||
'flex items-center justify-between rounded-md border-2 border-[#225BA9] p-0.5'
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={data?.payment.icon || `/payment/balance.svg`}
|
||||
width={32}
|
||||
height={32}
|
||||
alt={data?.payment.name}
|
||||
/>
|
||||
</div>
|
||||
<div className={'mt-1 text-sm font-medium text-[#666666]'}>
|
||||
{data?.payment.name || data?.payment.platform}
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
<Separator />
|
||||
|
||||
{data?.status && [2, 5].includes(data?.status) && (
|
||||
<div className='flex flex-col gap-4 sm:gap-8'>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<AiroButton variant={'primary'} asChild>
|
||||
<Link href='/dashboard'>{t('subscribeNow')}</Link>
|
||||
</AiroButton>
|
||||
<AiroButton variant='outline'>
|
||||
<Link href='/document'>{t('viewDocument')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
<h3 className='text-xl font-bold tracking-tight text-[#666666]'>
|
||||
{t('paymentSuccess')}
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
{data?.status === 1 && payment?.type === 'url' && (
|
||||
<div className='flex flex-col gap-4 sm:gap-8'>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<AiroButton
|
||||
variant={'primary'}
|
||||
onClick={() => {
|
||||
if (payment?.checkout_url) {
|
||||
window.location.href = payment?.checkout_url;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('goToPayment')}
|
||||
</AiroButton>
|
||||
<AiroButton variant='outline'>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
<div className={'flex items-center'}>
|
||||
<h3 className='text-xl font-bold tracking-tight text-[#666666]'>
|
||||
{t('waitingForPayment')}
|
||||
</h3>
|
||||
<p className='ml-3 flex items-center text-xl font-bold text-[#E22C2E]'>
|
||||
{countdownDisplay}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status === 1 && payment?.type === 'qr' && (
|
||||
<div className='flex flex-col gap-4 sm:gap-8'>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<AiroButton asChild variant={'primary'}>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</AiroButton>
|
||||
<AiroButton asChild variant='outline'>
|
||||
<Link href='/order'>{t('orderList')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('scanToPay')}</h3>
|
||||
<p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
|
||||
<QRCodeCanvas
|
||||
value={payment?.checkout_url || ''}
|
||||
size={208}
|
||||
imageSettings={{
|
||||
src: `/payment/alipay_f2f.svg`,
|
||||
width: 24,
|
||||
height: 24,
|
||||
excavate: true,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status === 1 && payment?.type === 'stripe' && (
|
||||
<div className='flex flex-col items-center gap-4 text-center sm:gap-8'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
|
||||
<p className='ml-3 flex items-center text-3xl font-bold'>{countdownDisplay}</p>
|
||||
{payment.stripe && <StripePayment {...payment.stripe} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status && [3, 4].includes(data?.status) && (
|
||||
<div className='flex flex-col gap-4 sm:gap-8'>
|
||||
<div className='flex justify-end gap-2'>
|
||||
<AiroButton variant={'primary'} asChild>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</AiroButton>
|
||||
<AiroButton asChild variant='outline'>
|
||||
<Link href='/order'>{t('orderList')}</Link>
|
||||
</AiroButton>
|
||||
</div>
|
||||
<h3 className='text-xl font-bold tracking-tight text-[#666666]'>
|
||||
{t('orderClosed')}
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Separator className='mb-3 mt-0 bg-[#225BA9] sm:mt-4' />
|
||||
<div className={'mb-4'}>
|
||||
<div className={'font-bold text-[#666]'}>{t('orderNumber')}</div>
|
||||
<div className={'text-xs text-[#4D4D4D]'}>{data?.order_no}</div>
|
||||
</div>
|
||||
{data?.type && [1, 2].includes(data.type) && (
|
||||
<SubscribeDetail
|
||||
subscribe={{
|
||||
...data?.subscribe,
|
||||
quantity: data?.quantity,
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<div className={'font-normal text-[#225BA9]'}>名称</div>
|
||||
<div className={'font-semibold'}>{data?.subscribe?.name}</div>
|
||||
</div>
|
||||
)}
|
||||
{data?.type === 3 && (
|
||||
<>
|
||||
@ -151,7 +236,11 @@ export default function Page() {
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
<Separator />
|
||||
<div>
|
||||
<div className={'font-normal text-[#225BA9]'}>{t('createdAt')}</div>
|
||||
<div className={'font-semibold'}>{formatDate(data?.created_at)}</div>
|
||||
</div>
|
||||
<Separator className='mb-3 mt-4 bg-[#225BA9]' />
|
||||
<SubscribeBilling
|
||||
order={{
|
||||
...data,
|
||||
@ -160,101 +249,6 @@ export default function Page() {
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className='order-1 flex flex-auto items-center justify-center xl:order-2'>
|
||||
<CardContent className='py-16'>
|
||||
{data?.status && [2, 5].includes(data?.status) && (
|
||||
<div className='flex flex-col items-center gap-8 text-center'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('paymentSuccess')}</h3>
|
||||
<Icon icon='mdi:success-circle-outline' className='text-7xl text-green-500' />
|
||||
<div className='flex gap-4'>
|
||||
<Button asChild>
|
||||
<Link href='/dashboard'>{t('subscribeNow')}</Link>
|
||||
</Button>
|
||||
<Button variant='outline'>
|
||||
<Link href='/document'>{t('viewDocument')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{data?.status === 1 && payment?.type === 'url' && (
|
||||
<div className='flex flex-col items-center gap-8 text-center'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
|
||||
<p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
|
||||
<Icon icon='mdi:access-time' className='text-muted-foreground text-7xl' />
|
||||
<div className='flex gap-4'>
|
||||
<Button
|
||||
onClick={() => {
|
||||
if (payment?.checkout_url) {
|
||||
window.location.href = payment?.checkout_url;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('goToPayment')}
|
||||
</Button>
|
||||
<Button variant='outline'>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status === 1 && payment?.type === 'qr' && (
|
||||
<div className='flex flex-col items-center gap-8 text-center'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('scanToPay')}</h3>
|
||||
<p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
|
||||
<QRCodeCanvas
|
||||
value={payment?.checkout_url || ''}
|
||||
size={208}
|
||||
imageSettings={{
|
||||
src: `/payment/alipay_f2f.svg`,
|
||||
width: 24,
|
||||
height: 24,
|
||||
excavate: true,
|
||||
}}
|
||||
/>
|
||||
<div className='flex gap-4'>
|
||||
<Button asChild>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</Button>
|
||||
<Button asChild variant='outline'>
|
||||
<Link href='/order'>{t('orderList')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status === 1 && payment?.type === 'stripe' && (
|
||||
<div className='flex flex-col items-center gap-8 text-center'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('waitingForPayment')}</h3>
|
||||
<p className='flex items-center text-3xl font-bold'>{countdownDisplay}</p>
|
||||
{payment.stripe && <StripePayment {...payment.stripe} />}
|
||||
{/* <div className='flex gap-4'>
|
||||
<Button asChild>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</Button>
|
||||
<Button asChild variant='outline'>
|
||||
<Link href='/order'>{t('orderList')}</Link>
|
||||
</Button>
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data?.status && [3, 4].includes(data?.status) && (
|
||||
<div className='flex flex-col items-center gap-8 text-center'>
|
||||
<h3 className='text-2xl font-bold tracking-tight'>{t('orderClosed')}</h3>
|
||||
<Icon icon='mdi:cancel' className='text-7xl text-red-500' />
|
||||
<div className='flex gap-4'>
|
||||
<Button asChild>
|
||||
<Link href='/subscribe'>{t('productList')}</Link>
|
||||
</Button>
|
||||
<Button asChild variant='outline'>
|
||||
<Link href='/order'>{t('orderList')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,7 +22,11 @@ export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>)
|
||||
const pathname = usePathname();
|
||||
const { toggleSidebar } = useSidebar();
|
||||
return (
|
||||
<Sidebar side='left' {...props} className={'border-0 bg-transparent md:bg-white'}>
|
||||
<Sidebar
|
||||
side='left'
|
||||
{...props}
|
||||
className={'border-0 bg-transparent pb-8 pt-4 shadow-none md:bg-white md:py-0 md:shadow-lg'}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
'relative ml-2.5 flex h-[calc(100dvh-10px-env(safe-area-inset-top))] flex-col rounded-[30px] bg-[#D9D9D9] px-4 md:ml-0 md:h-full md:rounded-none md:bg-white md:px-8'
|
||||
|
||||
@ -1,16 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
import { locales } from '@/config/constants';
|
||||
import { setLocale } from '@/utils/common';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@workspace/airo-ui/components/select';
|
||||
import { Icon } from '@workspace/airo-ui/custom-components/icon';
|
||||
import { getCountry } from '@workspace/airo-ui/utils';
|
||||
import { useLocale } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@ -52,7 +43,23 @@ export default function LanguageSwitch() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Select defaultValue={locale} onValueChange={handleLanguageChange}>
|
||||
<div>
|
||||
<div
|
||||
className='flex cursor-pointer items-center'
|
||||
onClick={() => {
|
||||
console.log(locale, 111);
|
||||
if (locale === 'en-US') {
|
||||
handleLanguageChange('zh-CN');
|
||||
} else {
|
||||
handleLanguageChange('en-US');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SvgIcon name={'language'} />
|
||||
<span className='sr-only'>{languages[locale as keyof typeof languages]}</span>
|
||||
</div>
|
||||
</div>
|
||||
/*<Select defaultValue={locale} onValueChange={handleLanguageChange}>
|
||||
<SelectTrigger className='hover:bg-accent hover:text-accent-foreground w-auto rounded-full border-none bg-transparent p-1 shadow-none focus:ring-0 [&>svg]:hidden'>
|
||||
<SelectValue>
|
||||
<div className='flex items-center'>
|
||||
@ -71,6 +78,6 @@ export default function LanguageSwitch() {
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Select>*/
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
import { getSubscription } from '@/services/user/portal';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
|
||||
import { ScrollArea } from '@workspace/airo-ui/components/scroll-area';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
|
||||
import { unitConversion } from '@workspace/airo-ui/utils';
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import { TabContent } from './TabContent';
|
||||
import { ProcessedPlanData } from './types';
|
||||
@ -69,9 +60,11 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => {
|
||||
{t('perYear')}
|
||||
</span>
|
||||
</div>
|
||||
{plan.origin_price && (
|
||||
<p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
|
||||
)}
|
||||
<div className={'h-[15px]'}>
|
||||
{plan.origin_price && (
|
||||
<p className='text-left text-[10px] font-normal text-black'>{t('yearlyDiscount')}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -161,7 +154,7 @@ const PlanCard = forwardRef<
|
||||
onSubscribe?: (plan: ProcessedPlanData) => void;
|
||||
isFirstCard?: boolean;
|
||||
}
|
||||
>(({ plan, onSubscribe, isFirstCard = false }, ref) => {
|
||||
>(({ plan, onSubscribe }, ref) => {
|
||||
const { user } = useGlobalStore();
|
||||
const { openLoginDialog } = useLoginDialog();
|
||||
const t = useTranslations('components.offerDialog');
|
||||
@ -186,7 +179,7 @@ const PlanCard = forwardRef<
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className='relative w-full max-w-[345px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:p-10'
|
||||
className='relative w-full min-w-[300px] cursor-pointer rounded-[20px] border border-[#D9D9D9] bg-white p-8 transition-all duration-300 hover:shadow-lg sm:w-[345px] sm:p-10'
|
||||
>
|
||||
{/* 套餐名称 */}
|
||||
<h3 className='mb-4 text-left text-xl font-normal sm:mb-6 sm:text-base'>{plan.name}</h3>
|
||||
@ -230,7 +223,6 @@ export const PlanList = ({
|
||||
onRetry,
|
||||
emptyMessage,
|
||||
onSubscribe,
|
||||
firstPlanCardRef, // 新增参数
|
||||
}: {
|
||||
plans: ProcessedPlanData[];
|
||||
tabValue: string;
|
||||
@ -239,24 +231,24 @@ export const PlanList = ({
|
||||
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 className={'flex justify-center'}>
|
||||
<div className='flex flex-col flex-wrap gap-6 sm:flex-row'>
|
||||
{plans.map((plan, index) => (
|
||||
<PlanCard
|
||||
key={`${plan.id}-${plan.name}`}
|
||||
tabValue={tabValue}
|
||||
plan={plan}
|
||||
onSubscribe={onSubscribe}
|
||||
isFirstCard={index === 0} // 标识第一项
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -270,40 +262,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
const t = useTranslations('components.offerDialog');
|
||||
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 = [],
|
||||
@ -325,40 +284,20 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
return [] as API.Subscribe[];
|
||||
}
|
||||
},
|
||||
enabled: false, // 初始不执行，手动控制
|
||||
enabled: true, // 初始不执行，手动控制
|
||||
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),
|
||||
show: () => {
|
||||
refetch();
|
||||
setOpen(true);
|
||||
},
|
||||
hide: () => setOpen(false),
|
||||
}));
|
||||
const PurchaseRef = useRef<{ show: (subscribe: API.Subscribe) => void; hide: () => void }>(null);
|
||||
// 处理订阅点击
|
||||
const handleSubscribe = (plan: ProcessedPlanData) => {
|
||||
setSelectedPlan(plan);
|
||||
// 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
|
||||
PurchaseRef.current.show(plan, tabValue);
|
||||
};
|
||||
@ -399,7 +338,7 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
<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]'
|
||||
className='rounded-0 h-full gap-0 px-8 py-8 sm:max-h-[95%] sm:!rounded-[32px] sm:px-8 sm:py-12 md:max-w-full'
|
||||
>
|
||||
<DialogTitle className={'sr-only'}></DialogTitle>
|
||||
<div className={'text-4xl font-bold text-[#0F2C53] md:mb-4 md:text-center md:text-5xl'}>
|
||||
@ -444,22 +383,15 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
|
||||
</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>
|
||||
<TabContent
|
||||
tabValue={tabValue}
|
||||
yearlyPlans={yearlyPlans}
|
||||
monthlyPlans={monthlyPlans}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
onRetry={refetch}
|
||||
onSubscribe={handleSubscribe}
|
||||
/>
|
||||
</div>
|
||||
<Purchase ref={PurchaseRef} />
|
||||
</DialogContent>
|
||||
|
||||
@ -40,7 +40,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
|
||||
{t('walletRecharge')}
|
||||
</AiroButton>
|
||||
</DialogTrigger>
|
||||
<DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
|
||||
<DialogContent className='flex h-auto flex-col overflow-hidden rounded-[32px]'>
|
||||
<DialogHeader>
|
||||
<DialogTitle className={'text-3xl'}>{t('balanceRecharge')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
@ -74,7 +74,7 @@ export default function Recharge(props: Readonly<ButtonProps>) {
|
||||
<div className={'flex items-center justify-center'}>
|
||||
<AiroButton
|
||||
variant={'primary'}
|
||||
className='fixed bottom-0 left-0 md:relative md:mt-6'
|
||||
className='relative mt-6'
|
||||
disabled={loading || !params.amount}
|
||||
onClick={() => {
|
||||
startTransition(async () => {
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
'use client';
|
||||
|
||||
import CouponInput from '@/components/subscribe/coupon-input';
|
||||
import DurationSelector from '@/components/subscribe/duration-selector';
|
||||
import PaymentMethods from '@/components/subscribe/payment-methods';
|
||||
import useGlobalStore from '@/config/use-global';
|
||||
import { preCreateOrder, renewal } from '@/services/user/order';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
|
||||
import { Button } from '@workspace/airo-ui/components/button';
|
||||
import { Card, CardContent } from '@workspace/airo-ui/components/card';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@ -16,6 +14,7 @@ import {
|
||||
DialogTrigger,
|
||||
} from '@workspace/airo-ui/components/dialog';
|
||||
import { Separator } from '@workspace/airo-ui/components/separator';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
|
||||
import { LoaderCircle } from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@ -43,6 +42,8 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
|
||||
const [loading, startTransition] = useTransition();
|
||||
const lastSuccessOrderRef = useRef<any>(null);
|
||||
|
||||
const [tabValue, setTabValue] = useState('year');
|
||||
|
||||
const { data: order } = useQuery({
|
||||
enabled: !!subscribe.id && open,
|
||||
queryKey: ['preCreateOrder', params],
|
||||
@ -106,20 +107,64 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
|
||||
{t('renewPlan')}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className='flex h-full max-w-screen-lg flex-col overflow-hidden md:h-auto'>
|
||||
<DialogContent className='flex h-full flex-col md:h-auto'>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('renewSubscription')}</DialogTitle>
|
||||
<DialogTitle className={'sr-only'}>{t('renewSubscription')}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className='grid w-full gap-3 lg:grid-cols-2'>
|
||||
<Card className='border-transparent shadow-none md:border-inherit md:shadow'>
|
||||
<CardContent className='grid gap-3 p-0 text-sm md:p-6'>
|
||||
<div className='pl-4 text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:pl-0 sm:text-center sm:text-4xl'>
|
||||
{t('renewSubscription')}
|
||||
</div>
|
||||
<div>
|
||||
<Tabs
|
||||
defaultValue='year'
|
||||
className='mt-8 text-center sm:mt-6'
|
||||
value={tabValue}
|
||||
onValueChange={(val) => {
|
||||
if (val === 'year') {
|
||||
handleChange('quantity', 12);
|
||||
} else if (val === 'month') {
|
||||
handleChange('quantity', 1);
|
||||
}
|
||||
setTabValue(val);
|
||||
}}
|
||||
>
|
||||
<TabsList className='relative mb-8 h-[74px] flex-wrap rounded-full bg-[#EAEAEA] p-2.5'>
|
||||
{tabValue === 'year' ? (
|
||||
<span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
|
||||
{t('discount20')}
|
||||
{/* 小三角箭头 */}
|
||||
<span
|
||||
className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
|
||||
style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
|
||||
/>
|
||||
</span>
|
||||
) : null}
|
||||
<TabsTrigger
|
||||
className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
|
||||
value='year'
|
||||
>
|
||||
{t('yearlyPlan')}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
className='rounded-full px-8 py-3.5 text-xl data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
|
||||
value='month'
|
||||
>
|
||||
{t('monthlyPlan')}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
<div className='w-full'>
|
||||
<div className='border-transparent shadow-none md:border-inherit'>
|
||||
<div className='grid p-0 text-sm md:p-6'>
|
||||
<SubscribeDetail
|
||||
subscribe={{
|
||||
...subscribe,
|
||||
quantity: params.quantity,
|
||||
}}
|
||||
/>
|
||||
<Separator />
|
||||
<Separator className='mb-3 mt-4 bg-[#225BA9]' />
|
||||
<SubscribeBilling
|
||||
order={{
|
||||
...order,
|
||||
@ -127,9 +172,27 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
|
||||
unit_price: subscribe?.unit_price,
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className='flex flex-col justify-between text-sm'>
|
||||
<Separator className='mb-3 mt-4 bg-[#225BA9]' />
|
||||
<PaymentMethods
|
||||
value={params.payment!}
|
||||
onChange={(value) => {
|
||||
handleChange('payment', value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-8 flex items-center justify-center'>
|
||||
<AiroButton
|
||||
variant='primary'
|
||||
className='w-[150px]'
|
||||
disabled={loading}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{loading && <LoaderCircle className='mr-2 animate-spin' />}
|
||||
{t('buyNow')}
|
||||
</AiroButton>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className='flex flex-col justify-between text-sm'>
|
||||
<div className='mb-6 grid gap-3'>
|
||||
<DurationSelector
|
||||
quantity={params.quantity!}
|
||||
@ -158,7 +221,7 @@ export default function Renewal({ id, subscribe, className }: Readonly<RenewalPr
|
||||
{loading && <LoaderCircle className='mr-2 animate-spin' />}
|
||||
{t('buyNow')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>*/}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -28,21 +28,23 @@ export function UserNav({ from = '' }: { from?: string }) {
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
{from === 'profile' ? (
|
||||
<div className='mb-3 mt-4 flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
|
||||
<Avatar className='h-[34px] w-[34px]'>
|
||||
<AvatarImage
|
||||
alt={user?.avatar ?? ''}
|
||||
src={user?.avatar ?? ''}
|
||||
className='object-cover'
|
||||
/>
|
||||
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold md:text-[27px]'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
|
||||
<div className={'pb-3 pt-4'}>
|
||||
<div className='flex cursor-pointer items-center gap-2 rounded-full bg-[#EAEAEA] p-[3px] pr-6'>
|
||||
<Avatar className='h-[34px] w-[34px]'>
|
||||
<AvatarImage
|
||||
alt={user?.avatar ?? ''}
|
||||
src={user?.avatar ?? ''}
|
||||
className='object-cover'
|
||||
/>
|
||||
<AvatarFallback className='to-primary text-background bg-[#0F2C53] bg-gradient-to-br text-[28px] font-bold md:text-[27px]'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier.toUpperCase().charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className='flex flex-1 items-center justify-between text-xs md:text-sm'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier.split('@')[0]}
|
||||
</div>
|
||||
<Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
|
||||
</div>
|
||||
<Icon icon='lucide:ellipsis' className='text-muted-foreground !size-6' />
|
||||
</div>
|
||||
) : (
|
||||
<Avatar className='h-14 w-14 cursor-pointer md:h-16 md:w-16'>
|
||||
|
||||
@ -42,6 +42,13 @@ export const navs = [
|
||||
hidden: true,
|
||||
image: 'profile',
|
||||
},
|
||||
{
|
||||
url: '/payment',
|
||||
icon: 'uil:megaphone',
|
||||
title: 'payment',
|
||||
hidden: true,
|
||||
image: 'profile',
|
||||
},
|
||||
{
|
||||
url: '/ticket',
|
||||
icon: 'uil:message',
|
||||
|
||||
@ -51,14 +51,16 @@ const sheetVariants = cva(
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
VariantProps<typeof sheetVariants> {
|
||||
overlayClassName?: string;
|
||||
}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = 'right', className, children, ...props }, ref) => (
|
||||
>(({ side = 'right', className, overlayClassName, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetOverlay className={overlayClassName} />
|
||||
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
|
||||
<SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none'>
|
||||
<X className='h-4 w-4' />
|
||||
|
||||
@ -209,6 +209,7 @@ const Sidebar = React.forwardRef<
|
||||
'bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden',
|
||||
className,
|
||||
)}
|
||||
overlayClassName={'bg-white/30 backdrop-blur-sm'}
|
||||
style={
|
||||
{
|
||||
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user