浏览代码

✨ feat(payment): 优化支付页面数据转换与状态管理

- 移除未使用的 `useQuery` 导入,简化依赖
- 新增 `transformCreditBalanceData` 函数,统一处理信用额度数据转换
- 移除冗余的 `isCreditBalanceLoading` 状态,简化组件状态管理
- 在 `fetchCreditBalance` 和 `handleCreditPayment` 中应用数据转换函数,确保数据类型一致性
- 优化 `useMutation` 钩子,仅保留 `isPending` 状态,减少不必要的状态变量
yourname 1 月之前
父节点
当前提交
d062e0f332
共有 1 个文件被更改,包括 14 次插入10 次删除
  1. 14 10
      mini/src/pages/payment/index.tsx

+ 14 - 10
mini/src/pages/payment/index.tsx

@@ -6,7 +6,7 @@
 import Taro, { useRouter } from '@tarojs/taro'
 import { useState, useEffect } from 'react'
 import { View, Text } from '@tarojs/components'
-import { useQuery, useMutation } from '@tanstack/react-query'
+import { useMutation } from '@tanstack/react-query'
 import { Button } from '@/components/ui/button'
 import { Navbar } from '@/components/ui/navbar'
 import {
@@ -33,6 +33,16 @@ interface CreditBalanceData {
   isEnabled: boolean
 }
 
+// API响应可能包含额外字段,转换函数提取所需字段并转换类型
+function transformCreditBalanceData(data: any): CreditBalanceData {
+  return {
+    totalLimit: data.totalLimit,
+    usedAmount: data.usedAmount,
+    availableAmount: data.availableAmount,
+    isEnabled: data.isEnabled === 1 || data.isEnabled > 0
+  }
+}
+
 enum PaymentMethod {
   WECHAT = 'wechat',
   CREDIT = 'credit'
@@ -44,7 +54,6 @@ const PaymentPage = () => {
   const [errorMessage, setErrorMessage] = useState('')
   const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<PaymentMethod>(PaymentMethod.WECHAT)
   const [creditBalance, setCreditBalance] = useState<CreditBalanceData | null>(null)
-  const [isCreditBalanceLoading, setIsCreditBalanceLoading] = useState(false)
 
   // 使用useRouter钩子获取路由参数
   const router = useRouter()
@@ -55,13 +64,12 @@ const PaymentPage = () => {
 
   // 获取用户额度信息
   const fetchCreditBalance = async () => {
-    setIsCreditBalanceLoading(true)
     try {
       const response = await creditBalanceClient.me.$get({})
 
       if (response.status === 200) {
         const balanceData = await response.json()
-        setCreditBalance(balanceData)
+        setCreditBalance(transformCreditBalanceData(balanceData))
       } else if (response.status === 404) {
         // 用户没有额度记录,创建默认额度
         setCreditBalance({
@@ -87,8 +95,6 @@ const PaymentPage = () => {
         availableAmount: 0,
         isEnabled: false
       })
-    } finally {
-      setIsCreditBalanceLoading(false)
     }
   }
 
@@ -101,9 +107,7 @@ const PaymentPage = () => {
   // 获取微信支付参数(手动触发)
   const {
     mutateAsync: fetchWechatPaymentParams,
-    data: paymentData,
-    isLoading: paymentLoading,
-    error: paymentError
+    isPending: paymentLoading
   } = useMutation({
     mutationFn: async () => {
       if (!orderId) throw new Error('订单ID无效')
@@ -185,7 +189,7 @@ const PaymentPage = () => {
 
         // 更新本地额度信息
         const updatedBalance = await response.json()
-        setCreditBalance(updatedBalance)
+        setCreditBalance(transformCreditBalanceData(updatedBalance))
 
         // 跳转到支付成功页面
         setTimeout(() => {