feat: 修改样式
This commit is contained in:
parent
62880768fa
commit
0aace63597
@ -5,6 +5,7 @@ import Recharge from '@/components/subscribe/recharge';
|
||||
import Renewal from '@/components/subscribe/renewal';
|
||||
import ResetTraffic from '@/components/subscribe/reset-traffic';
|
||||
import useGlobalStore from '@/config/use-global';
|
||||
import { getStat } from '@/services/common/common';
|
||||
import { queryUserSubscribe, resetUserSubscribeToken } from '@/services/user/user';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Button } from '@workspace/airo-ui/components/button';
|
||||
@ -136,11 +137,9 @@ export default function Content() {
|
||||
{/* 账户概况 Card */}
|
||||
<Card className='rounded-[20px] border border-[#D9D9D9] p-6 shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
|
||||
<div className='mb-1 sm:mb-4'>
|
||||
{userSubscribe?.[0]?.status === 1 ? (
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('accountOverview')}
|
||||
</h3>
|
||||
) : null}
|
||||
<h3 className='text-base font-medium text-[#666666] sm:text-xl'>
|
||||
{t('accountOverview')}
|
||||
</h3>
|
||||
<p className='mt-1 text-xs text-[#666666] sm:text-sm'>
|
||||
{user?.auth_methods?.[0]?.auth_identifier}
|
||||
</p>
|
||||
@ -148,7 +147,7 @@ export default function Content() {
|
||||
|
||||
<div className='mb-3 sm:mb-6'>
|
||||
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
|
||||
{t('annualPlanUser')}
|
||||
{userSubscribe?.length > 0 ? <div>1</div> : t('noYPlan')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -173,9 +172,11 @@ export default function Content() {
|
||||
<h3 className='flex items-center justify-between text-[#666666]'>
|
||||
<div className={'flex items-center justify-between'}>
|
||||
<span className={'text-base font-medium sm:text-xl'}>{t('planStatus')}</span>
|
||||
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
|
||||
{t('inEffect')}
|
||||
</span>
|
||||
{userSubscribe?.length > 0 && userSubscribe?.[0]?.status === 1 ? (
|
||||
<span className={'ml-2.5 rounded-full bg-[#A8D4ED] px-2 text-[8px] text-white'}>
|
||||
{t('inEffect')}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<ResetTraffic
|
||||
className={
|
||||
@ -185,73 +186,79 @@ export default function Content() {
|
||||
replacement={userSubscribe?.[0]?.subscribe.replacement}
|
||||
/>
|
||||
</h3>
|
||||
<div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
|
||||
{t('planExpirationTime')}
|
||||
{formatDate(userSubscribe?.[0]?.expire_time, false)}
|
||||
</div>
|
||||
<div className='mb-3 sm:mb-6'>
|
||||
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
|
||||
{userSubscribe?.[0]?.subscribe.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
|
||||
<div className='flex gap-2'>
|
||||
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
|
||||
(_, index) => {
|
||||
return (
|
||||
<div
|
||||
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
></div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
{userSubscribe?.length ? (
|
||||
<>
|
||||
<div className='mb-2 text-sm text-[#666666] sm:mb-[22px] sm:mt-1'>
|
||||
{t('planExpirationTime')}
|
||||
{formatDate(userSubscribe?.[0]?.expire_time, false)}
|
||||
</div>
|
||||
</div>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('online')}
|
||||
{userSubscribe?.[0]?.subscribe.device_limit}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex items-center justify-between'>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('usedTrafficTotalTraffic')}
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
/{' '}
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.traffic}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
</span>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('remaining')}
|
||||
{100 -
|
||||
Math.round(
|
||||
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
|
||||
(userSubscribe?.[0]?.traffic || 1)) *
|
||||
100,
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
|
||||
<div
|
||||
className={'h-full rounded-[20px] bg-[#225BA9]'}
|
||||
style={{
|
||||
width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mb-3 sm:mb-6'>
|
||||
<span className='text-2xl font-medium text-[#091B33] sm:text-3xl'>
|
||||
{userSubscribe?.[0]?.subscribe.name}
|
||||
</span>
|
||||
</div>
|
||||
<div className='mb-4 flex items-center justify-between'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<span className='text-xs sm:text-sm'>{t('availableDevices')}</span>
|
||||
<div className='flex gap-2'>
|
||||
{Array.from({ length: userSubscribe?.[0]?.subscribe.device_limit }).map(
|
||||
(_, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`h-4 w-4 rounded-full ${index < (userSubscribe?.[0]?.subscribe.device_limit || 0) > 1 ? 'bg-[#225BA9]' : 'bg-[#D9D9D9]'}`}
|
||||
></div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('online')}
|
||||
{userSubscribe?.[0]?.subscribe.device_limit}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className='mb-1 flex items-center justify-between'>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('usedTrafficTotalTraffic')}
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.upload + userSubscribe?.[0]?.download}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
/{' '}
|
||||
<Display
|
||||
type='traffic'
|
||||
value={userSubscribe?.[0]?.traffic}
|
||||
unlimited={!userSubscribe?.[0]?.traffic}
|
||||
/>
|
||||
</span>
|
||||
<span className='text-xs sm:text-sm'>
|
||||
{t('remaining')}
|
||||
{100 -
|
||||
Math.round(
|
||||
(((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) /
|
||||
(userSubscribe?.[0]?.traffic || 1)) *
|
||||
100,
|
||||
)}
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className='flex h-5 w-full items-center rounded-[20px] bg-[#EAEAEA] p-0.5'>
|
||||
<div
|
||||
className={'h-full rounded-[20px] bg-[#225BA9]'}
|
||||
style={{
|
||||
width: `${Math.round((((userSubscribe?.[0]?.upload || 0) + (userSubscribe?.[0]?.download || 0)) / (userSubscribe?.[0]?.traffic || 1)) * 100)}%`,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>{t('noPlanAvailable')}</div>
|
||||
)}
|
||||
</Card>
|
||||
{/* 网站公告 Card */}
|
||||
<Card className='relative order-4 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 pb-0 sm:order-none'>
|
||||
@ -339,7 +346,7 @@ export default function Content() {
|
||||
{t('nextResetDays')}
|
||||
</p>
|
||||
<p className='text-xs font-medium text-[#0F2C53] sm:text-lg'>
|
||||
{userSubscribe?.[0]
|
||||
{userSubscribe?.[0].reset_time
|
||||
? differenceInDays(new Date(userSubscribe?.[0].reset_time), new Date())
|
||||
: t('noReset')}
|
||||
</p>
|
||||
|
||||
@ -19,7 +19,7 @@ export default function Page() {
|
||||
const ref = useRef<ProListActions>(null);
|
||||
const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
|
||||
|
||||
const handlePayment = (orderNo) => {
|
||||
const handlePayment = async (orderNo) => {
|
||||
const data = await purchaseCheckout({
|
||||
orderNo: orderNo,
|
||||
returnUrl: window.location.href,
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
"accountOverview": "Account Overview",
|
||||
"address1": "Address 1",
|
||||
"announcementTitle": "Site Announcements",
|
||||
"annualPlanUser": "Annual Plan User",
|
||||
"annualMonthPlanUser": "Monthly Plan User",
|
||||
"annualYearPlanUser": "Annual Plan User",
|
||||
"availableDevices": "Available Devices",
|
||||
"beginnerTutorial": "Beginner Tutorial",
|
||||
"cancel": "Cancel",
|
||||
@ -28,7 +29,9 @@
|
||||
"mySubscriptions": "My Subscriptions",
|
||||
"nextResetDays": "Next Reset in Days",
|
||||
"noLimit": "No Limit",
|
||||
"noPlanAvailable": "No Plan Available",
|
||||
"noReset": "No Reset",
|
||||
"noYPlan": "No Plan Active",
|
||||
"online": "Online: ",
|
||||
"pageOf": "Page {pageIndex} of {pageCount}",
|
||||
"pinnedAnnouncement": "[Pinned]",
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
"accountOverview": "账户概况",
|
||||
"address1": "地址1",
|
||||
"announcementTitle": "网站公告",
|
||||
"annualPlanUser": "年度套餐用户",
|
||||
"annualMonthPlanUser": "月度套餐用户",
|
||||
"annualYearPlanUser": "年度套餐用户",
|
||||
"availableDevices": "可用设备",
|
||||
"beginnerTutorial": "新手教程",
|
||||
"cancel": "取消",
|
||||
@ -28,7 +29,9 @@
|
||||
"mySubscriptions": "我的订阅",
|
||||
"nextResetDays": "下次重置/天",
|
||||
"noLimit": "无限制",
|
||||
"noPlanAvailable": "暂无套餐",
|
||||
"noReset": "不重置",
|
||||
"noYPlan": "尚未有套餐生效",
|
||||
"online": "在线：",
|
||||
"pageOf": "第 {pageIndex} 页，共 {pageCount} 页",
|
||||
"pinnedAnnouncement": "【置顶公告】",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user