购买套餐里去充值桌面端和移动端支付流程封装

src/lib/models/trade.ts

@@ -19,9 +19,18 @@ export const Platform = {
   Mobile: 2,
 } as const
 
+// 支付状态枚举
+export const PaymentStatus = {
+  Pending: 0,
+  Completed: 1,
+  Cancelled: 2, // 同步修改
+  Refunded: 3,
+} as const
+
 // 定义类型
 export type PaymentMethod = typeof PaymentMethod[keyof typeof PaymentMethod]
 export type Platform = typeof Platform[keyof typeof Platform]
+export type PaymentStatus = typeof PaymentStatus[keyof typeof PaymentStatus]
 
 // 支付方法配置类型
 export type PaymentMethodConfig = {
@@ -29,86 +38,93 @@ export type PaymentMethodConfig = {
   icon: StaticImageData | null
   formValue: string
   availablePlatforms: Platform[]
-  actualMethod: PaymentMethod
+  getActualMethod: (platform: Platform) => PaymentMethod
 }
 
 // 支付方法配置
-export const PAYMENT_METHODS: Record<PaymentMethod, PaymentMethodConfig> = {
-  [PaymentMethod.Alipay]: {
+export const PAYMENT_METHODS: Record<string, PaymentMethodConfig> = {
+  alipay: {
     name: '支付宝',
     icon: alipay,
     formValue: 'alipay',
-    availablePlatforms: [Platform.Desktop],
-    actualMethod: PaymentMethod.Sft,
+    availablePlatforms: [Platform.Desktop, Platform.Mobile],
+    getActualMethod: platform =>
+      platform === Platform.Desktop ? PaymentMethod.Sft : PaymentMethod.SftAlipay,
   },
-  [PaymentMethod.WeChat]: {
+  wechat: {
     name: '微信支付',
     icon: wechat,
     formValue: 'wechat',
-    availablePlatforms: [Platform.Desktop],
-    actualMethod: PaymentMethod.Sft,
+    availablePlatforms: [Platform.Desktop, Platform.Mobile],
+    getActualMethod: platform =>
+      platform === Platform.Desktop ? PaymentMethod.Sft : PaymentMethod.SftWeChat,
   },
-  [PaymentMethod.Sft]: {
+  sft: {
     name: '商福通',
     icon: null,
     formValue: 'sft',
     availablePlatforms: [],
-    actualMethod: PaymentMethod.Sft,
-  },
-  [PaymentMethod.SftAlipay]: {
-    name: '支付宝',
-    icon: alipay,
-    formValue: 'sftAlipay',
-    availablePlatforms: [Platform.Mobile],
-    actualMethod: PaymentMethod.SftAlipay,
-  },
-  [PaymentMethod.SftWeChat]: {
-    name: '微信',
-    icon: wechat,
-    formValue: 'sftWeChat',
-    availablePlatforms: [Platform.Mobile],
-    actualMethod: PaymentMethod.SftWeChat,
+    getActualMethod: () => PaymentMethod.Sft,
   },
 } as const
 
+// 交易信息类型
+export interface Trade {
+  inner_no: string
+  method: PaymentMethod
+  pay_url: string
+  status?: PaymentStatus
+  amount?: number
+  created_at?: string
+  expired_at?: string
+}
+
+// 支付请求参数类型
+export type PaymentRequest = {
+  amount: string
+  platform: Platform
+  method: PaymentMethod
+  product_id?: string
+  product_name?: string
+}
+
+// 支付结果类型
+export type PaymentResult = {
+  success: boolean
+  trade_no: string
+  message?: string
+  payment_time?: string
+}
+
 // 设备检测Hook
 export const usePlatformType = (): Platform => {
-  const [platform, setPlatform] = useState<Platform>(Platform.Desktop)
+  // 在SSR环境下返回默认值
+  const [platform, setPlatform] = useState<Platform>(() => {
+    if (typeof window === 'undefined') return Platform.Desktop
+    return window.matchMedia('(max-width: 768px)').matches
+      ? Platform.Mobile
+      : Platform.Desktop
+  })
 
   useEffect(() => {
+    // 确保在客户端执行
+    if (typeof window === 'undefined') return
+
     const checkPlatform = () => {
       const isMobile = window.matchMedia('(max-width: 768px)').matches
       setPlatform(isMobile ? Platform.Mobile : Platform.Desktop)
     }
 
-    checkPlatform()
     const mediaQuery = window.matchMedia('(max-width: 768px)')
     mediaQuery.addEventListener('change', checkPlatform)
-    return () => mediaQuery.removeEventListener('change', checkPlatform)
+
+    return () => {
+      mediaQuery.removeEventListener('change', checkPlatform)
+    }
   }, [])
 
   return platform
 }
-// export const usePlatformType = (): Platform => {
-//   const [platform, setPlatform] = useState<Platform>(Platform.Desktop)
-
-//   useEffect(() => {
-//     // 确保在客户端执行
-//     if (typeof window === 'undefined') return
-
-//     const checkPlatform = () => {
-//       const isMobile = window.matchMedia('(max-width: 768px)').matches
-//       setPlatform(isMobile ? Platform.Mobile : Platform.Desktop)
-//     }
-
-//     checkPlatform()
-//     const mediaQuery = window.matchMedia('(max-width: 768px)')
-//     mediaQuery.addEventListener('change', checkPlatform)
-//     return () => mediaQuery.removeEventListener('change', checkPlatform)
-//   }, [])
-
-//   return platform
-// }
 
 // 支付表单验证schema
 export const paymentSchema = zod.object({
@@ -117,20 +133,13 @@ export const paymentSchema = zod.object({
 })
 
 export type PaymentSchema = zod.infer<typeof paymentSchema>
+// 新增函数：根据PaymentMethod获取展示信息
+export const getPaymentMethodInfo = (method: PaymentMethod) => {
+  const found = Object.values(PAYMENT_METHODS).find(
+    config => config.getActualMethod(Platform.Mobile) === method,
+  )
 
-// 支付请求参数类型
-export type PaymentRequest = {
-  amount: string
-  platform: Platform
-  method: PaymentMethod
+  return found
+    ? {icon: found.icon, name: found.name}
+    : {icon: null, name: '未知支付方式'}
 }
-
-export interface Trade {
-  inner_no: string
-  method: number
-  pay_url: string
-  status?: number
-  amount?: number
-}
-
-export interface OptionalTrade extends Partial<Trade> {}