From bf1d6cb2d9ac969b7fa0aa504f1c5bd63a2969e9 Mon Sep 17 00:00:00 2001
From: zyh <zyh320888@vip.qq.com>
Date: Tue, 22 Oct 2024 10:42:22 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=AE=A4=E8=AF=81?=
 =?UTF-8?q?=E6=9C=BA=E5=88=B6=E4=BB=A5=E5=AE=89=E5=85=A8=E5=9C=B0=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=94=AF=E4=BB=98=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/auth/PaymentModal.tsx    | 18 +++++++++++++++---
 app/routes/api.purchase-subscription.ts |  6 +++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/components/auth/PaymentModal.tsx b/app/components/auth/PaymentModal.tsx
index 7a40465ec..a12e72696 100644
--- a/app/components/auth/PaymentModal.tsx
+++ b/app/components/auth/PaymentModal.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
 import { toast } from 'react-toastify';
+import { useAuth } from '~/hooks/useAuth'; // 导入 useAuth hook
 
 interface PaymentModalProps {
   isOpen: boolean;
@@ -22,6 +23,7 @@ interface PaymentResponse {
   did: string;
   expires_in: string;
   return_url: string;
+  orderNo: string;
 }
 
 interface PaymentStatusResponse {
@@ -31,10 +33,20 @@ interface PaymentStatusResponse {
 
 export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }: PaymentModalProps) {
   const [timeLeft, setTimeLeft] = useState(parseInt(paymentData.expires_in));
+  const { token } = useAuth(); // 获取认证token
 
   const checkPaymentStatus = useCallback(async () => {
+    if (!token) {
+      console.error('No authentication token available');
+      return;
+    }
+
     try {
-      const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.no}`);
+      const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.orderNo}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
       if (!response.ok) {
         if (response.status === 404) {
           console.error('Order not found');
@@ -52,7 +64,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
       console.error('Error checking payment status:', error);
       toast.error('检查支付状态时出错，请稍后再试');
     }
-  }, [paymentData.no, onPaymentSuccess, onClose]);
+  }, [paymentData.orderNo, onPaymentSuccess, onClose, token]);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -89,7 +101,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
             </div>
             <div className="text-center">
               <p className="text-bolt-elements-textPrimary">订单金额: ¥{paymentData.order_amount}</p>
-              <p className="text-bolt-elements-textSecondary">订单号: {paymentData.no}</p>
+              <p className="text-bolt-elements-textSecondary">订单号: {paymentData.orderNo}</p>
               <p className="text-bolt-elements-textSecondary">支付方式: {paymentData.pay_type}</p>
             </div>
             <div className="text-center">
diff --git a/app/routes/api.purchase-subscription.ts b/app/routes/api.purchase-subscription.ts
index ddf44c613..63267c275 100644
--- a/app/routes/api.purchase-subscription.ts
+++ b/app/routes/api.purchase-subscription.ts
@@ -11,7 +11,7 @@ export async function action({ request }: { request: Request }) {
     return error as Response;
   }
 
-  const { planId, billingCycle } = await request.json() as { planId: string; billingCycle: string };
+  const { planId, billingCycle } = (await request.json()) as { planId: string; billingCycle: string };
 
   try {
     // 获取订阅计划详情
@@ -36,7 +36,7 @@ export async function action({ request }: { request: Request }) {
       `${plan.name} 订阅 (${billingCycle === 'yearly' ? '年付' : '月付'})`,
       'alipay', // 或其他支付方式
       price, // 不用转换为分
-      userId.toString()
+      userId.toString(),
     );
 
     // 创建待处理的交易记录
@@ -51,7 +51,7 @@ export async function action({ request }: { request: Request }) {
       transaction_id: orderNo,
     });
 
-    return json({ success: true, paymentData });
+    return json({ success: true, paymentData: { ...paymentData, orderNo } });
   } catch (error) {
     console.error('初始化订阅购买时出错:', error);
     return json({ error: '初始化订阅购买失败' }, { status: 500 });