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

2025-06-23 11:20:54 +08:00
parent 50cd4c5760
commit f15cefff4d
13 changed files with 225 additions and 427 deletions
--- a/src/components/composites/payment/desktop-payment.tsx
+++ b/src/components/composites/payment/desktop-payment.tsx
@@ -7,44 +7,32 @@ import {CheckCircle, Loader} from 'lucide-react'
 import {useState, useEffect, useRef} from 'react'
 import * as qrcode from 'qrcode'
 import Image from 'next/image'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {PaymentMethod} from './types'
+import {TradeMethod} from '@/lib/models/trade'
+import {PaymentModalProps} from './payment-modal'

-interface Trade {
-  inner_no: string
-  method: number
-  pay_url: string
-  amount?: number
-  status?: number
-}
-export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => void}) {
+export function DesktopPayment(props: PaymentModalProps) {
+  console.log(props, 'props')
  const [paymentVerified, setPaymentVerified] = useState(false)
  const [loading, setLoading] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)

-  const paymentInfo = {
-    icon: trade.method === PaymentMethod.Alipay ? alipay : wechat,
-    name: trade.method === PaymentMethod.Alipay ? '支付宝' : '微信支付',
-  }
-
  useEffect(() => {
-    if (!canvasRef.current || trade.method === 1) return
-    qrcode.toCanvas(canvasRef.current, trade.pay_url, {width: 200})
+    if (!canvasRef.current || props.method === TradeMethod.Alipay) return
+    qrcode.toCanvas(canvasRef.current, props.pay_url, {width: 200})
      .catch((err) => {
        console.error('生成二维码失败:', err)
        toast.error('生成支付二维码失败')
      })
-  }, [trade.method, trade.pay_url])
+  }, [props.method, props.pay_url])

  const handleComplete = async () => {
    setLoading(true)
    try {
-      const resp = await completeResource({trade_no: trade.inner_no})
+      const resp = await completeResource({trade_no: props.inner_no})
      if (!resp.success) throw new Error(resp.message)
      toast.success('支付成功')
      setPaymentVerified(true)
-      setTimeout(onClose, 2000)
+      setTimeout(() => props.onSuccess?.(), 2000)
    }
    catch (e) {
      toast.error('支付验证失败', {description: (e as Error).message})
@@ -53,13 +41,24 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
      setLoading(false)
    }
  }
+  console.log(props.decoration.text, 'props.decoration.text')

  return (
    <DialogContent>
      <DialogHeader>
        <DialogTitle className="flex gap-2 items-center">
-          <Image src={paymentInfo.icon} alt={paymentInfo.name} width={24} height={24}/>
-          <span>{paymentInfo.name}</span>
+          {props.decoration.icon ? (
+            <Image
+              src={props.decoration.icon}
+              alt={props.decoration.text}
+              width={24}
+              height={24}
+              className="rounded-md"
+            />
+          ) : (
+            <div className="w-6 h-6 bg-gray-200 rounded-full"/>
+          )}
+          <span>{props.decoration.text}</span>
        </DialogTitle>
      </DialogHeader>

@@ -71,15 +70,15 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
      ) : (
        <div className="flex flex-col items-center gap-4">
          <div className="bg-gray-100 w-52 h-52 flex items-center justify-center">
-            {trade.method === 1 ? (
-              <iframe src={trade.pay_url} className="w-full h-full"/>
+            {props.method === TradeMethod.Alipay ? (
+              <iframe src={props.pay_url} className="w-full h-full"/>
            ) : (
              <canvas ref={canvasRef} className="w-full h-full"/>
            )}
          </div>
          <p className="text-sm text-gray-600">
            请使用
-            {paymentInfo.name}
+            {props.decoration.text}
            扫码支付
          </p>

@@ -89,12 +88,12 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
              {' '}
              <span className="text-accent">
                ¥
-                {trade.amount?.toFixed(2) || '0.00'}
+                {props.amount?.toFixed(2) || '0.00'}
              </span>
            </p>
            <p className="text-xs text-gray-500">
              订单号:
-              {trade.inner_no}
+              {props.inner_no}
            </p>
          </div>

@@ -103,7 +102,7 @@ export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => v
              {loading && <Loader className="animate-spin mr-2"/>}
              已完成支付
            </Button>
-            <Button theme="outline" onClick={onClose}>
+            <Button theme="outline" onClick={() => props.onClose?.()}>
              关闭
            </Button>
          </div>
--- a/src/components/composites/payment/index.ts
+++ b/src/components/composites/payment/index.ts
@@ -3,7 +3,6 @@ export * from './payment-button'
 export * from './payment-modal'
 export * from './mobile-payment'
 export * from './desktop-payment'
-export type {Trade, PaymentResponse, PaymentMethod} from './types'

 // components/
 //   composites/
--- a/src/components/composites/payment/mobile-payment.tsx
+++ b/src/components/composites/payment/mobile-payment.tsx
@@ -1,46 +1,27 @@
 'use client'
-import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
+import {DialogContent} from '@/components/ui/dialog'
 import {Button} from '@/components/ui/button'
 import {completeResource} from '@/actions/resource'
 import {toast} from 'sonner'
 import {CheckCircle, CreditCard} from 'lucide-react'
 import {useState} from 'react'
 import Image from 'next/image'
-import wechat from '@/components/composites/purchase/_assets/wechat.svg'
-import alipay from '@/components/composites/purchase/_assets/alipay.svg'
-import {Trade, PaymentMethod} from './types'
+import {PaymentModalProps} from './payment-modal'
+
+export function MobilePayment(props: PaymentModalProps) {
+  console.log(props, 'props')

-export function MobilePayment({
-  trade,
-  onClose,
-}: {
-  trade: Trade
-  onClose: () => void
-}) {
  const [paymentVerified, setPaymentVerified] = useState(false)
  const [loading, setLoading] = useState(false)
-  const paymentInfo = (() => {
-    switch (trade.method) {
-    case PaymentMethod.Alipay:
-    case PaymentMethod.SftAlipay:
-      return {icon: alipay, name: '支付宝'}
-    case PaymentMethod.WeChat:
-    case PaymentMethod.SftWeChat:
-      return {icon: wechat, name: '微信支付'}
-    default:
-      console.warn('Unknown payment method:', trade.method)
-      return {icon: wechat, name: '微信支付'} // 默认返回微信支付
-    }
-  })()

  const handleComplete = async () => {
    setLoading(true)
    try {
-      const resp = await completeResource({trade_no: trade.inner_no})
+      const resp = await completeResource({trade_no: props.inner_no})
      if (!resp.success) throw new Error(resp.message)
      toast.success('支付成功')
      setPaymentVerified(true)
-      setTimeout(onClose, 2000)
+      props.onClose?.()
    }
    catch (e) {
      toast.error('支付验证失败', {description: (e as Error).message})
@@ -72,28 +53,29 @@ export function MobilePayment({
          <div className="space-y-4 rounded-lg bg-gray-50 p-4">
            <div className="flex justify-between">
              <span className="text-gray-600">订单号</span>
-              <span className="font-medium">{trade.inner_no}</span>
+              <span className="font-medium">{props.inner_no}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">支付方式</span>
              <div className="flex items-center gap-2">
-                <Image
-                  src={paymentInfo.icon}
-                  alt={paymentInfo.name}
-                  width={28}
-                  height={28}
-                  className="rounded-md"
-                />
-                <span>{paymentInfo.name}</span>
+                {props.decoration.icon && (
+                  <Image
+                    src={props.decoration.icon}
+                    alt={props.decoration.text}
+                    width={28}
+                    height={28}
+                    className="rounded-md"
+                  />
+                )}
+                <span>{props.decoration.text}</span>
              </div>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">支付金额</span>
              <span className="text-lg font-bold text-blue-600">
                ¥
-                {typeof trade.amount === 'number'
-                  ? trade.amount.toFixed(2)
-                  : '0.00'}
+                {' '}
+                {props.amount.toFixed(2)}
              </span>
            </div>
          </div>
@@ -103,10 +85,10 @@ export function MobilePayment({
            <Button
              theme="outline"
              className="flex-1 py-3 text-base"
-              onClick={onClose} >
+              onClick={props.onClose} >
              取消
            </Button>
-            <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = trade.pay_url} >
+            <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = props.pay_url} >
              确认支付
            </Button>
          </div>
--- a/src/components/composites/payment/payment-button.tsx
+++ b/src/components/composites/payment/payment-button.tsx
@@ -2,31 +2,24 @@
 import {Button} from '@/components/ui/button'
 import {useState} from 'react'
 import {PaymentModal} from './payment-modal'
-import type {Trade, PaymentResponse} from './types'
-import {usePlatformType, Platform} from '@/lib/models/trade'
+import {PaymentProps} from './type'

 export function PaymentButton({
  onClick,
-  trade,
  disabled,
  onSuccess,
 }: {
-  onClick: () => Promise<PaymentResponse>
-  trade?: Trade
+  onClick: () => Promise<PaymentProps>
  disabled?: boolean
  onSuccess?: () => void
 }) {
-  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
-  const platform = usePlatformType() // 获取平台信息
+  const [trade, setTrade] = useState<PaymentProps>()

  const handleClick = async () => {
    setLoading(true)
    try {
-      const result = await onClick()
-      if (result?.success && result.data) {
-        setOpen(true)
-      }
+      setTrade(await onClick())
    }
    finally {
      setLoading(false)
@@ -44,10 +37,7 @@ export function PaymentButton({

      {trade && (
        <PaymentModal
-          open={open}
-          onOpenChange={setOpen}
-          trade={trade}
-          platform={platform} // 传递平台信息
+          {...trade}
          onSuccess={onSuccess}
        />
      )}
--- a/src/components/composites/payment/payment-modal.tsx
+++ b/src/components/composites/payment/payment-modal.tsx
@@ -1,41 +1,35 @@
 'use client'
-import {Dialog} from '@/components/ui/dialog'
 import {MobilePayment} from './mobile-payment'
 import {DesktopPayment} from './desktop-payment'
-import {Platform} from '@/lib/models/trade'
-import {Trade} from './types'
+import {TradePlatform} from '@/lib/models/trade'
+import {Dialog} from '@/components/ui/dialog'
+import {PaymentProps} from './type'

-export function PaymentModal({
-  open,
-  onOpenChange,
-  trade,
-  platform,
-  onSuccess,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  trade: Trade
-  platform: Platform
+export type PaymentModalProps = {
  onSuccess?: () => void
-}) {
+  onClose?: () => void
+} & PaymentProps
+
+export function PaymentModal(props: PaymentModalProps) {
  const handleClose = (success: boolean) => {
-    onOpenChange(false)
-    if (success && onSuccess) {
-      onSuccess()
+    if (success && props.onSuccess) {
+      props.onSuccess()
    }
  }

  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      {platform === Platform.Mobile ? (
+    <Dialog
+      defaultOpen={true}
+      onOpenChange={(open) => {
+        if (!open) props.onClose?.()
+      }}>
+      {props.platform === TradePlatform.Mobile ? (
        <MobilePayment
-          trade={trade}
-          onClose={() => handleClose(true)}
+          {...props}
        />
      ) : (
        <DesktopPayment
-          trade={trade}
-          onClose={() => handleClose(true)}
+          {...props}
        />
      )}
    </Dialog>
--- a/src/components/composites/payment/payment-status.tsx
+++ b/src/components/composites/payment/payment-status.tsx
@@ -1,26 +0,0 @@
-'use client'
-import {CheckCircle, AlertCircle, ClockIcon} from 'lucide-react'
-import {Trade, PaymentStatus} from './types'
-
-export function PaymentStatus({trade}: {trade?: Trade}) {
-  if (!trade) return null
-
-  return (
-    <div className="flex items-center gap-2">
-      {trade.status === PaymentStatus.Completed ? (
-        <CheckCircle size={16} className="text-done"/>
-      ) : trade.status === PaymentStatus.Cancelled ? (
-        <AlertCircle size={16} className="text-weak"/>
-      ) : trade.status === PaymentStatus.Refunded ? (
-        <AlertCircle size={16} className="text-fail"/>
-      ) : (
-        <ClockIcon size={16} className="text-warn"/>
-      )}
-      <span>
-        {trade.status === PaymentStatus.Completed ? '已完成'
-          : trade.status === PaymentStatus.Cancelled ? '已取消'
-            : trade.status === PaymentStatus.Refunded ? '已退款' : '待支付'}
-      </span>
-    </div>
-  )
-}
--- a/src/components/composites/payment/type.ts
+++ b/src/components/composites/payment/type.ts
@@ -0,0 +1,15 @@
+import {TradeMethod, PaymentMethodConfig, TradePlatform} from '@/lib/models/trade'
+import {StaticImageData} from 'next/image'
+
+// 交易信息类型
+export type PaymentProps = {
+  inner_no: string
+  pay_url: string
+  amount: number
+  platform: TradePlatform
+  method: TradeMethod
+  decoration: {
+    icon: StaticImageData
+    text: string
+  }
+}
--- a/src/components/composites/payment/types.tsx
+++ b/src/components/composites/payment/types.tsx
@@ -1,31 +0,0 @@
-export enum PaymentMethod {
-  Alipay = 1,
-  WeChat = 2,
-  Sft = 3,
-  SftAlipay = 4,
-  SftWeChat = 5,
-}
-
-export interface Trade {
-  inner_no: string
-  method: PaymentMethod
-  pay_url: string
-  amount?: number
-  status?: PaymentStatus
-}
-
-export interface PaymentResponse {
-  success: boolean
-  data?: {
-    trade_no: string
-    pay_url: string
-  }
-  message?: string
-}
-export enum PaymentStatus {
-  Pending = 0,
-  Completed = 1,
-  Cancelled = 2,
-  Refunded = 3,
-}
-export type PaymentPlatform = 'mobile' | 'desktop'