Browse Source

✨ feat(payment): 添加支付相关功能实现

- 在API类型中添加PaymentRoutes并导出paymentClient
- 实现支付页面调用后端API获取支付参数的功能
- 添加PaymentRoutes类型定义

🔧 chore(settings): 更新命令安全配置
- 添加npx tsc命令到允许执行的命令列表中
yourname 2 months ago
parent
commit
7695ca5c24
4 changed files with 33 additions and 12 deletions
  1. 2 1
      .claude/settings.local.json
  2. 6 2
      mini/src/api.ts
  3. 24 9
      mini/src/pages/payment/index.tsx
  4. 1 0
      packages/server/src/index.ts

+ 2 - 1
.claude/settings.local.json

@@ -52,7 +52,8 @@
       "Bash(rm:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
-      "Bash(pnpm typecheck:*)"
+      "Bash(pnpm typecheck:*)",
+      "Bash(npx tsc:*)"
     ],
     "deny": [],
     "ask": []

+ 6 - 2
mini/src/api.ts

@@ -9,7 +9,8 @@ import type {
   OrderRoutes,
   // OrderGoodsRoutes,
   MerchantRoutes,
-  AreaRoutes
+  AreaRoutes,
+  PaymentRoutes
 } from '@d8d/server'
 import { rpcClient } from './utils/rpc-client'
 
@@ -28,4 +29,7 @@ export const orderClient = rpcClient<OrderRoutes>().api.v1.orders
 export const merchantClient = rpcClient<MerchantRoutes>().api.v1.merchants
 
 // 系统相关客户端
-export const areaClient = rpcClient<AreaRoutes>().api.v1.areas
+export const areaClient = rpcClient<AreaRoutes>().api.v1.areas
+
+// 支付客户端
+export const paymentClient = rpcClient<PaymentRoutes>().api.v1.payments

+ 24 - 9
mini/src/pages/payment/index.tsx

@@ -14,6 +14,7 @@ import {
   PaymentRateLimiter,
   retryPayment
 } from '@/utils/payment'
+import { paymentClient } from '@/api'
 
 interface PaymentPageParams {
   orderId: number
@@ -57,17 +58,31 @@ const PaymentPage = () => {
     queryFn: async () => {
       if (!params?.orderId) throw new Error('订单ID无效')
 
-      // 这里应该调用后端API获取微信支付参数
-      // 暂时模拟返回支付参数
-      const mockPaymentData: PaymentData = {
-        timeStamp: Math.floor(Date.now() / 1000).toString(),
-        nonceStr: Math.random().toString(36).substring(2, 15),
-        package: 'prepay_id=wx' + Math.random().toString(36).substring(2, 15),
-        signType: 'RSA',
-        paySign: 'mock_sign_' + Math.random().toString(36).substring(2, 15)
+      // 调用后端API获取微信支付参数
+      const response = await paymentClient.payment.$post({
+        json: {
+          orderId: params.orderId,
+          totalAmount: Math.round(params.amount * 100), // 转换为分
+          description: `订单支付 - ${params.orderNo || `ORD${params.orderId}`}`
+        }
+      })
+
+      if (response.status !== 200) {
+        throw new Error(`获取支付参数失败: ${response.status}`)
+      }
+
+      const responseData = await response.json()
+
+      // 转换响应数据格式
+      const paymentData: PaymentData = {
+        timeStamp: responseData.timeStamp,
+        nonceStr: responseData.nonceStr,
+        package: responseData.package,
+        signType: responseData.signType,
+        paySign: responseData.paySign
       }
 
-      return mockPaymentData
+      return paymentData
     },
     enabled: !!params?.orderId && paymentStatus === PaymentStatus.PENDING
   })

+ 1 - 0
packages/server/src/index.ts

@@ -187,6 +187,7 @@ export type AdminOrderGoodsRoutes = typeof adminOrderGoodsApiRoutes
 export type AdminOrderRefundRoutes = typeof adminOrderRefundApiRoutes
 export type AreaRoutes = typeof areaApiRoutes
 export type AdminAreaRoutes = typeof adminAreaApiRoutes
+export type PaymentRoutes = typeof paymentApiRoutes
 
 app.route('/', api)
 export default app