feat: 修改样式

2025-08-11 04:28:44 -07:00
parent 130a2506ac
commit 62880768fa
21 changed files with 257 additions and 105 deletions
@@ -1,3 +1,4 @@
+/*
 'use client';

 import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
@@ -47,3 +48,85 @@ export function SubscribeBilling({ order }: { order: API.Order }) {
    </Card>
  );
 }
+*/
+
+'use client';
+
+import { Display } from '@/components/display';
+import { Separator } from '@workspace/airo-ui/components/separator';
+import { useTranslations } from 'next-intl';
+
+interface SubscribeBillingProps {
+  order?: Partial<
+    API.OrderDetail & {
+      unit_price: number;
+      unit_time: number;
+      subscribe_discount: number;
+    }
+  >;
+}
+
+export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
+  const t = useTranslations('subscribe');
+  const t_c = useTranslations('components.billing');
+
+  return (
+    <>
+      <div className='mb-1 font-semibold text-[#225BA9]'>{t('billing.billingTitle')}</div>
+      <ul className='grid grid-cols-1 gap-1 text-[15px] font-light text-[#666] *:flex *:items-center *:justify-between lg:grid-cols-1'>
+        <li>
+          <span className=''>{t('billing.duration')}</span>
+          <span>
+            {order?.quantity === 1 ? t_c('30days') : ''}
+            {order?.quantity === 12 ? t_c('365days') : ''}
+          </span>
+        </li>
+        {order?.type && [1, 2].includes(order?.type) && (
+          <li>
+            <span className=''>{t('billing.duration')}</span>
+            <span>
+              {order?.quantity || 1} {t(order?.unit_time || 'Month')}
+            </span>
+          </li>
+        )}
+        <li>
+          <span className=''>{t('billing.price')}</span>
+          <span>
+            <Display type='currency' value={order?.price || order?.unit_price} />
+          </span>
+        </li>
+        <li>
+          <span className=''>{t('billing.productDiscount')}</span>
+          <span>
+            <Display type='currency' value={order?.discount} />
+          </span>
+        </li>
+        <li>
+          <span className=''>{t('billing.couponDiscount')}</span>
+          <span>
+            <Display type='currency' value={order?.coupon_discount} />
+          </span>
+        </li>
+        <li>
+          <span className='text-muted-foreground'>{t('billing.fee')}</span>
+          <span>
+            <Display type='currency' value={order?.fee_amount} />
+          </span>
+        </li>
+        <li>
+          <span className='text-muted-foreground'>{t('billing.gift')}</span>
+          <span>
+            <Display type='currency' value={order?.gift_amount} />
+          </span>
+        </li>
+      </ul>
+      <Separator className={'mb-3 mt-4 bg-[#225BA9]'} />
+      <div className='flex items-center justify-between font-semibold text-[#666]'>
+        <span className=''>{t('billing.total')}</span>
+        <span>
+          <Display type='currency' value={order?.amount} />
+        </span>
+      </div>
+    </>
+  );
+}
@@ -2,6 +2,7 @@

 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, purchase } from '@/services/user/order';
+import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/airo-ui/components/button';
 import {
@@ -23,6 +24,7 @@ import {
  useState,
  useTransition,
 } from 'react';
+import { toast } from 'sonner';
 import { SubscribeBilling } from './billing';
 import { SubscribeDetail } from './detail';

@@ -74,6 +76,7 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
    queryKey: ['preCreateOrder', subscribe?.id, params.quantity],
    queryFn: async () => {
      try {
+        console.log('123123', subscribe);
        const { data } = await preCreateOrder({
          ...params,
          subscribe_id: subscribe?.id as number,
@@ -107,7 +110,16 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
        const orderNo = response.data.data?.order_no;
        if (orderNo) {
          await getUserInfo();
-          router.push(`/dashboard`);
+          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'));
+            router.push(`/dashboard`);
+          }
        }
      } catch (error) {
        /* empty */
@@ -144,12 +156,6 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
                  <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-full
-                  block h-0 w-0
-                  border-l-[6px] border-r-[6px] border-t-[16px]
-                  border-l-transparent border-r-transparent border-t-[#E22C2E]
-                " />*/}
                    <span
                      className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
                      style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
@@ -2,6 +2,7 @@

 import useGlobalStore from '@/config/use-global';
 import { recharge } from '@/services/user/order';
+import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
 import { Button, ButtonProps } from '@workspace/airo-ui/components/button';
 import {
  Dialog,
@@ -36,7 +37,9 @@ export default function Recharge(props: Readonly<ButtonProps>) {
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
-        <Button {...props}>{t('walletRecharge')}</Button>
+        <AiroButton variant={'primary'} {...props}>
+          {t('walletRecharge')}
+        </AiroButton>
      </DialogTrigger>
      <DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
        <DialogHeader>