支付流程重新设计枚举值更新传参方式

src/components/composites/recharge/index.tsx

@@ -19,16 +19,19 @@ import {RechargePrepare} from '@/actions/user'
 import {useProfileStore} from '@/components/stores-provider'
 import {merge} from '@/lib/utils'
 import {
-  Platform,
-  PAYMENT_METHODS,
+  TradePlatform,
   usePlatformType,
-  PaymentMethod,
+  TradeMethod,
+  TradeMethodDecoration,
 } from '@/lib/models/trade'
 import {PaymentModal} from '@/components/composites/payment/payment-modal'
-import type {Trade} from '@/components/composites/payment/types'
+import Image from 'next/image'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import {PaymentProps} from '@/components/composites/payment/type'
 
 const schema = zod.object({
-  method: zod.enum(['alipay', 'wechat', 'sft', 'sftAlipay', 'sftWeChat']),
+  method: zod.enum(['alipay', 'wechat']),
   amount: zod.number().min(1, '充值金额必须大于 0'),
 })
 
@@ -51,54 +54,36 @@ export default function RechargeModal(props: RechargeModelProps) {
     },
   })
 
-  const method = form.watch('method')
-  const amount = form.watch('amount')
-  const [trade, setTrade] = useState<Trade | null>(null)
+  const [trade, setTrade] = useState<PaymentProps>()
   const refreshProfile = useProfileStore(store => store.refreshProfile)
 
-  // 获取当前平台可用的支付方法
-  const availableMethods = useMemo(() => {
-    return Object.values(PAYMENT_METHODS)
-      .filter(method => method.availablePlatforms.includes(platform))
-      .map(method => ({
-        value: method.formValue,
-        name: method.name,
-        icon: method.icon,
-      }))
-  }, [platform])
-
   const createRecharge = async (data: Schema) => {
-    try {
-      const paymentMethod = Object.entries(PAYMENT_METHODS).find(
-        ([_, config]) => config.formValue === data.method,
-      )
+    console.log(data, 'data')
 
-      if (!paymentMethod) {
-        throw new Error('无效的支付方式')
-      }
-      const actualMethod = paymentMethod[1].getActualMethod(platform)
-      console.log('转换后的支付方式:', {
-        formValue: data.method,
-        platform: platform === Platform.Mobile ? 'Mobile' : 'Desktop',
-        actualMethod,
-        methodName: actualMethod === PaymentMethod.Alipay ? 'Alipay'
-          : actualMethod === PaymentMethod.SftAlipay ? 'SftAlipay'
-            : actualMethod === PaymentMethod.WeChat ? 'WeChat'
-              : actualMethod === PaymentMethod.SftWeChat ? 'SftWeChat' : 'Unknown',
-      })
-      const resp = {
+    try {
+      const method = platform === TradePlatform.Desktop
+        ? TradeMethod.Sft
+        : data.method === 'alipay'
+          ? TradeMethod.SftAlipay
+          : TradeMethod.SftWechat
+
+      const req = {
         amount: data.amount.toString(),
         platform: platform,
-        method: actualMethod,
+        method: method,
       }
+      console.log(req, '请求参数')
+
+      const result = await RechargePrepare(req)
 
-      const result = await RechargePrepare(resp)
       if (result.success) {
         setTrade({
           inner_no: result.data.trade_no,
-          method: actualMethod,
           pay_url: result.data.pay_url,
           amount: data.amount,
+          platform: platform,
+          method: method,
+          decoration: TradeMethodDecoration[data.method],
         })
       }
       else {
@@ -116,18 +101,31 @@ export default function RechargeModal(props: RechargeModelProps) {
     try {
       await refreshProfile()
       toast.success('充值成功')
-      setOpen(false)
-      form.reset()
+      setTrade(undefined) // 清除交易状态
+      setOpen(false) // 关闭弹窗
+      form.reset() // 重置表单
     }
     catch (e) {
-      toast.error('刷新账户信息失败', {
-        description: (e as Error).message,
-      })
+      toast.error('刷新账户信息失败')
     }
   }
 
+  const handleClose = () => {
+    setTrade(undefined)
+    setOpen(false)
+    form.reset()
+  }
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          setTrade(undefined)
+          form.reset()
+        }
+        setOpen(isOpen)
+      }}>
       <DialogTrigger asChild>
         <Button
           theme="accent"
@@ -138,7 +136,7 @@ export default function RechargeModal(props: RechargeModelProps) {
         </Button>
       </DialogTrigger>
 
-      <DialogContent className={platform === Platform.Mobile ? 'max-w-[95vw]' : 'max-w-md'}>
+      <DialogContent className={platform === TradePlatform.Mobile ? 'max-w-[95vw]' : 'max-w-md'}>
         {!trade ? (
           <>
             <DialogTitle className="flex flex-col gap-2">充值中心</DialogTitle>
@@ -185,22 +183,28 @@ export default function RechargeModal(props: RechargeModelProps) {
                 {({id, field}) => (
                   <RadioGroup
                     id={id}
-                    defaultValue={field.value}
+                    {...field}
                     onValueChange={field.onChange}
                     className="flex gap-2"
                   >
-                    {availableMethods.map(({value, name, icon}) => (
-                      <FormOption
-                        key={value}
-                        id={`${id}-${value}`}
-                        value={value}
-                        compare={field.value}
-                        className="flex-1 flex-row justify-center items-center"
-                      >
-                        {icon && <img src={icon.src} alt={`${name} logo`} className="w-6 h-6 mr-2"/>}
-                        <span>{name}</span>
-                      </FormOption>
-                    ))}
+                    <FormOption
+                      id="alipay"
+                      value="alipay"
+                      compare={field.value}
+                      className="flex-1 flex-row justify-center items-center"
+                    >
+                      <Image src={alipay} alt="logo" aria-hidden className="w-6 h-6 mr-2"/>
+                      <span>支付宝</span>
+                    </FormOption>
+                    <FormOption
+                      id="wechat"
+                      value="wechat"
+                      compare={field.value}
+                      className="flex-1 flex-row justify-center items-center"
+                    >
+                      <Image src={wechat} alt="logo" aria-hidden className="w-6 h-6 mr-2"/>
+                      <span>微信</span>
+                    </FormOption>
                   </RadioGroup>
                 )}
               </FormField>
@@ -212,16 +216,9 @@ export default function RechargeModal(props: RechargeModelProps) {
           </>
         ) : (
           <PaymentModal
-            open={open}
-            onOpenChange={(open) => {
-              if (!open) {
-                setTrade(null)
-                setOpen(false)
-              }
-            }}
-            trade={trade}
-            platform={platform}
+            {...trade}
             onSuccess={handlePaymentSuccess}
+            onClose={handleClose}
           />
         )}
       </DialogContent>