feat: 购买页面

src/pages/pricing/components/OrderSummary/index.tsx

@@ -3,23 +3,29 @@ import { memo } from 'react';
 import { Button } from 'antd';
 import { useTranslation } from 'react-i18next';
 
+import type { PayMethodType } from '@/defines';
 import { useResponsive } from '@/hooks/useResponsive';
 
 import LabelValueItem from '../LabelValueItem';
 import type { Plan } from '../../useService';
+import { useAction } from './useAction';
 import { useService } from './useService';
 
 export interface OrderSummaryProps {
     selectedPlan: Plan | null;
+    selectedPayMethod: PayMethodType | null;
 }
 
-const OrderSummary = memo(({ selectedPlan }: OrderSummaryProps) => {
+const OrderSummary = memo(({ selectedPlan, selectedPayMethod }: OrderSummaryProps) => {
     const { t } = useTranslation();
     const { isMobile } = useResponsive();
     const { orderTotal } = useService({ selectedPlan });
+    const { handlePayNow } = useAction({ selectedPlan, selectedPayMethod });
 
     return (
-        <div className={`flex flex-col bg-[#1B1D22] rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.05)] ${isMobile ? 'p-[14px] gap-2' : 'p-[25px_30px_25px_25px] gap-5'}`}>
+        <div
+            className={`flex flex-col bg-[#1B1D22] rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.05)] ${isMobile ? 'p-[14px] gap-2' : 'p-[25px_30px_25px_25px] gap-5'}`}
+        >
             <div className={`flex flex-col ${isMobile ? 'gap-2' : 'gap-5'}`}>
                 <LabelValueItem
                     label={t('pages.pricing.orderSummary.orderTotal')}
@@ -33,9 +39,7 @@ const OrderSummary = memo(({ selectedPlan }: OrderSummaryProps) => {
             <div className={`flex gap-5 ${isMobile ? 'flex-col' : 'flex-row'}`}>
                 <Button
                     className={`bg-[#0EA5E9] text-white text-sm font-medium leading-[1.4] uppercase rounded-[25px] px-[42px] py-[10px] h-auto border-none hover:bg-[#0EA5E9]/80 ${!isMobile ? 'w-[300px]' : ''}`}
-                    onClick={() => {
-                        // Handle payment
-                    }}
+                    onClick={handlePayNow}
                 >
                     {t('pages.pricing.orderSummary.goPayNow')}
                 </Button>

src/pages/pricing/components/OrderSummary/useAction.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+
+import type { PayMethodType } from '@/defines';
+
+import type { Plan } from '../../useService';
+
+export interface UseActionReturn {
+    handlePayNow: () => void;
+}
+
+export interface UseActionParams {
+    selectedPlan: Plan | null;
+    selectedPayMethod: PayMethodType | null;
+}
+
+export function useAction({ selectedPlan, selectedPayMethod }: UseActionParams): UseActionReturn {
+    const handlePayNow = useCallback(() => {
+        //TODO: 响应支付按钮点击事件
+        console.log('handlePayNow', selectedPlan, selectedPayMethod);
+    }, [selectedPlan, selectedPayMethod]);
+
+    return {
+        handlePayNow,
+    };
+}

src/pages/pricing/index.tsx

@@ -90,7 +90,7 @@ const Pricing = memo(() => {
                             ))}
                         </div>
                     </div>
-                    <OrderSummary selectedPlan={selectedPlan} />
+                    <OrderSummary selectedPlan={selectedPlan} selectedPayMethod={selectedPayMethod}/>
                 </div>
             </div>
         </div>