feat: 修改样式

apps/user/app/(main)/(content)/(user)/order/page.tsx

@@ -4,11 +4,13 @@ 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 { Button } from '@workspace/airo-ui/components/button';
+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 { useRef } from 'react';
+import { toast } from 'sonner';
 import OrderDetailDialog from './components/OrderDetailDialog';
 
 export default function Page() {
@@ -16,6 +18,20 @@ export default function Page() {
 
   const ref = useRef<ProListActions>(null);
   const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
+
+  const handlePayment = (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>>
@@ -38,26 +54,32 @@ export default function Page() {
                 <div>
                   {item.status === 1 ? (
                     <>
-                      <Button
-                        className='min-w-[150px] rounded-full border-[#F8BFD2] bg-[#F8BFD2] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#F8BFD2] hover:bg-[#FF4248] hover:text-white'
+                      <AiroButton
+                        variant={'danger'}
                         onClick={async () => {
                           await closeOrder({ orderNo: item.order_no });
                           ref.current?.refresh();
                         }}
                       >
                         {t('cancelOrder')}
-                      </Button>
-                      <Button className='ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white'>
+                      </AiroButton>
+                      <AiroButton
+                        variant={'primary'}
+                        className={'ml-2'}
+                        onClick={() => {
+                          handlePayment(item.order_no);
+                        }}
+                      >
                         {t('payment')}
-                      </Button>
+                      </AiroButton>
                     </>
                   ) : (
-                    <Button
+                    <AiroButton
+                      variant={'default'}
                       onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
-                      className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
                     >
                       {t('detail')}
-                    </Button>
+                    </AiroButton>
                   )}
                 </div>
               </div>