购买套餐里去充值桌面端和移动端支付流程封装
This commit is contained in:
Eamon-meng
114
src/components/composites/payment/desktop-payment.tsx
Normal file
114
src/components/composites/payment/desktop-payment.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
'use client'
|
||||
import {DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import {completeResource} from '@/actions/resource'
|
||||
import {toast} from 'sonner'
|
||||
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'
|
||||
|
||||
interface Trade {
|
||||
inner_no: string
|
||||
method: number
|
||||
pay_url: string
|
||||
amount?: number
|
||||
status?: number
|
||||
}
|
||||
export function DesktopPayment({trade, onClose}: {trade: Trade, onClose: () => void}) {
|
||||
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})
|
||||
.catch((err) => {
|
||||
console.error('生成二维码失败:', err)
|
||||
toast.error('生成支付二维码失败')
|
||||
})
|
||||
}, [trade.method, trade.pay_url])
|
||||
|
||||
const handleComplete = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const resp = await completeResource({trade_no: trade.inner_no})
|
||||
if (!resp.success) throw new Error(resp.message)
|
||||
toast.success('支付成功')
|
||||
setPaymentVerified(true)
|
||||
setTimeout(onClose, 2000)
|
||||
}
|
||||
catch (e) {
|
||||
toast.error('支付验证失败', {description: (e as Error).message})
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{paymentVerified ? (
|
||||
<div className="text-center py-8">
|
||||
<CheckCircle className="mx-auto text-green-500 w-12 h-12"/>
|
||||
<p className="mt-4 text-lg font-medium">支付验证成功</p>
|
||||
</div>
|
||||
) : (
|
||||
<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"/>
|
||||
) : (
|
||||
<canvas ref={canvasRef} className="w-full h-full"/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">
|
||||
请使用
|
||||
{paymentInfo.name}
|
||||
扫码支付
|
||||
</p>
|
||||
|
||||
<div className="w-full text-center space-y-2">
|
||||
<p className="text-sm font-medium">
|
||||
支付金额:
|
||||
{' '}
|
||||
<span className="text-accent">
|
||||
¥
|
||||
{trade.amount?.toFixed(2) || '0.00'}
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
订单号:
|
||||
{trade.inner_no}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 w-full justify-center">
|
||||
<Button onClick={handleComplete} >
|
||||
{loading && <Loader className="animate-spin mr-2"/>}
|
||||
已完成支付
|
||||
</Button>
|
||||
<Button theme="outline" onClick={onClose}>
|
||||
关闭
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,24 @@
|
||||
// BillsPage负责数据获取和列表展示
|
||||
|
||||
// PaymentStatusCell负责支付状态显示和交互
|
||||
|
||||
// PaymentDialog负责支付过程处理
|
||||
// 导出支付相关组件
|
||||
export * from './payment-dialog'
|
||||
export * from './payment'
|
||||
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/
|
||||
// payment/
|
||||
// index.ts # 统一导出
|
||||
// payment-button.tsx # 支付按钮组件
|
||||
// payment-modal.tsx # 支付弹窗容器
|
||||
// mobile-payment.tsx # 移动端支付确认
|
||||
// desktop-payment.tsx # 桌面端支付确认
|
||||
// payment-status.tsx # 支付状态显示
|
||||
|
||||
// PaymentButton (点击)
|
||||
// ├─ 触发 onClick 创建订单
|
||||
// ├─ 成功后打开 PaymentModal
|
||||
// │ ├─ MobilePayment (移动端)
|
||||
// │ └─ DesktopPayment (桌面端)
|
||||
// └─ 支付成功 → onSuccess 回调
|
||||
// └─ 父组件执行后续逻辑
|
||||
|
||||
117
src/components/composites/payment/mobile-payment.tsx
Normal file
117
src/components/composites/payment/mobile-payment.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
'use client'
|
||||
import {DialogContent, DialogHeader, DialogTitle} 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'
|
||||
|
||||
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})
|
||||
if (!resp.success) throw new Error(resp.message)
|
||||
toast.success('支付成功')
|
||||
setPaymentVerified(true)
|
||||
setTimeout(onClose, 2000)
|
||||
}
|
||||
catch (e) {
|
||||
toast.error('支付验证失败', {description: (e as Error).message})
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<DialogContent className="max-w-[95vw] rounded-lg">
|
||||
{paymentVerified ? (
|
||||
<div className="py-6 text-center">
|
||||
<CheckCircle className="mx-auto h-14 w-14 text-green-500"/>
|
||||
<p className="mt-4 text-lg font-medium">支付验证成功</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* 支付确认信息 */}
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 text-blue-500">
|
||||
<CreditCard className="h-8 w-8"/>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-800">确认支付</h3>
|
||||
<p className="text-gray-500">请确认以下支付信息</p>
|
||||
</div>
|
||||
|
||||
{/* 支付详情 */}
|
||||
<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>
|
||||
</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>
|
||||
</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'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
theme="outline"
|
||||
className="flex-1 py-3 text-base"
|
||||
onClick={onClose} >
|
||||
取消
|
||||
</Button>
|
||||
<Button className="flex-1 py-3 text-base" onClick={() => window.location.href = trade.pay_url} >
|
||||
确认支付
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
)
|
||||
}
|
||||
56
src/components/composites/payment/payment-button.tsx
Normal file
56
src/components/composites/payment/payment-button.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
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'
|
||||
|
||||
export function PaymentButton({
|
||||
onClick,
|
||||
trade,
|
||||
disabled,
|
||||
onSuccess,
|
||||
}: {
|
||||
onClick: () => Promise<PaymentResponse>
|
||||
trade?: Trade
|
||||
disabled?: boolean
|
||||
onSuccess?: () => void
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const platform = usePlatformType() // 获取平台信息
|
||||
|
||||
const handleClick = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const result = await onClick()
|
||||
if (result?.success && result.data) {
|
||||
setOpen(true)
|
||||
}
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
{loading ? '处理中...' : '立即支付'}
|
||||
</Button>
|
||||
|
||||
{trade && (
|
||||
<PaymentModal
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
trade={trade}
|
||||
platform={platform} // 传递平台信息
|
||||
onSuccess={onSuccess}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
'use client'
|
||||
import {useEffect, useRef, useState, useMemo} from 'react'
|
||||
import * as qrcode from 'qrcode'
|
||||
import {Dialog, DialogContent, DialogHeader, DialogTitle} from '@/components/ui/dialog'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import {Loader, CheckCircle} from 'lucide-react'
|
||||
import {toast} from 'sonner'
|
||||
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
|
||||
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
|
||||
import Image from 'next/image'
|
||||
import {completeResource} from '@/actions/resource'
|
||||
|
||||
export function PaymentDialog({trade, open, onOpenChange}: {
|
||||
trade: {
|
||||
inner_no: string
|
||||
method: number
|
||||
pay_url: string
|
||||
amount?: number
|
||||
}
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [paymentVerified, setPaymentVerified] = useState(false)
|
||||
|
||||
const paymentInfo = useMemo(() => {
|
||||
return trade.method === 1 ? {
|
||||
icon: alipay,
|
||||
name: '支付宝',
|
||||
} : {
|
||||
icon: wechat,
|
||||
name: '微信支付',
|
||||
}
|
||||
}, [trade.method])
|
||||
|
||||
const canvas = useRef<HTMLCanvasElement>(null)
|
||||
// 生成微信二维码
|
||||
useEffect(() => {
|
||||
if (!open || !canvas.current || trade.method === 1) return
|
||||
qrcode.toCanvas(canvas.current, trade.pay_url, {
|
||||
width: 200,
|
||||
margin: 0,
|
||||
}).catch((err) => {
|
||||
console.error('生成二维码失败:', err)
|
||||
toast.error('生成支付二维码失败')
|
||||
})
|
||||
}, [open, trade.method, trade.pay_url])
|
||||
|
||||
// 支付成功后自动关闭
|
||||
useEffect(() => {
|
||||
if (paymentVerified) {
|
||||
const timer = setTimeout(() => {
|
||||
onOpenChange(false)
|
||||
setPaymentVerified(false)
|
||||
}, 2000)
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [paymentVerified, onOpenChange])
|
||||
|
||||
const handleComplete = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const resp = await completeResource({
|
||||
trade_no: trade.inner_no,
|
||||
})
|
||||
if (!resp.success) {
|
||||
throw new Error(resp.message)
|
||||
}
|
||||
toast.success('支付成功')
|
||||
setPaymentVerified(true)
|
||||
}
|
||||
catch (e) {
|
||||
toast.error('支付验证失败', {
|
||||
description: (e as Error).message,
|
||||
})
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent onOpenAutoFocus={() => {
|
||||
if (canvas.current && trade.pay_url) {
|
||||
qrcode.toCanvas(canvas.current, trade.pay_url, {width: 200})
|
||||
}
|
||||
}}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex gap-2 items-center">
|
||||
{paymentInfo.icon && (
|
||||
<Image
|
||||
src={paymentInfo.icon}
|
||||
alt={`${paymentInfo.name} logo`}
|
||||
width={24}
|
||||
height={24}
|
||||
className="rounded-md"
|
||||
/>
|
||||
)}
|
||||
<span>{paymentInfo.name}</span>
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{paymentVerified ? (
|
||||
<div className="text-center py-8">
|
||||
<CheckCircle className="mx-auto text-green-500 w-12 h-12"/>
|
||||
<p className="mt-4 text-lg font-medium">支付验证成功</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="bg-gray-100 size-50 flex items-center justify-center">
|
||||
{trade.method === 1 ? (
|
||||
<iframe src={trade.pay_url} className="w-full h-full"/>
|
||||
) : (
|
||||
<canvas ref={canvas} className="w-full h-full"/>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 text-center">
|
||||
请使用
|
||||
{trade.method === 1 ? '支付宝' : '微信'}
|
||||
扫码支付
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center space-y-2 w-full">
|
||||
<p className="text-sm font-medium">
|
||||
支付金额:
|
||||
<span className="text-accent">
|
||||
{typeof trade.amount === 'number'
|
||||
? trade.amount.toFixed(2)
|
||||
: '0.00'}
|
||||
元
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
订单号:
|
||||
{trade.inner_no}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!paymentVerified && (
|
||||
<div className="flex justify-center gap-4">
|
||||
<Button onClick={handleComplete} disabled={loading}>
|
||||
{loading && <Loader className="animate-spin mr-2"/>}
|
||||
已完成支付
|
||||
</Button>
|
||||
<Button theme="outline" onClick={() => onOpenChange(false)}>关闭</Button>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
43
src/components/composites/payment/payment-modal.tsx
Normal file
43
src/components/composites/payment/payment-modal.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
'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'
|
||||
|
||||
export function PaymentModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
trade,
|
||||
platform,
|
||||
onSuccess,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
trade: Trade
|
||||
platform: Platform
|
||||
onSuccess?: () => void
|
||||
}) {
|
||||
const handleClose = (success: boolean) => {
|
||||
onOpenChange(false)
|
||||
if (success && onSuccess) {
|
||||
onSuccess()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
{platform === Platform.Mobile ? (
|
||||
<MobilePayment
|
||||
trade={trade}
|
||||
onClose={() => handleClose(true)}
|
||||
/>
|
||||
) : (
|
||||
<DesktopPayment
|
||||
trade={trade}
|
||||
onClose={() => handleClose(true)}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
26
src/components/composites/payment/payment-status.tsx
Normal file
26
src/components/composites/payment/payment-status.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
'use client'
|
||||
import {useState, MouseEvent} from 'react'
|
||||
import {Dialog, DialogContent} from '@/components/ui/dialog'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import {CheckCircle, AlertCircle, ClockIcon} from 'lucide-react'
|
||||
import {format} from 'date-fns'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import wechat from '@/components/composites/purchase/_assets/wechat.svg'
|
||||
import alipay from '@/components/composites/purchase/_assets/alipay.svg'
|
||||
import {usePlatformType, Platform} from '@/lib/models/trade'
|
||||
import {PaymentDialog} from './payment-dialog'
|
||||
|
||||
export function PaymentStatusCell({trade}: {
|
||||
trade?: {
|
||||
inner_no: string
|
||||
method: number
|
||||
pay_url?: string
|
||||
status?: number
|
||||
amount?: number | string
|
||||
}
|
||||
}) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [confirmOpen, setConfirmOpen] = useState(false)
|
||||
const [paymentFailed, setPaymentFailed] = useState(false)
|
||||
const platform = usePlatformType()
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
if (!trade?.pay_url) return
|
||||
|
||||
if (platform === Platform.Desktop) {
|
||||
setOpen(true)
|
||||
}
|
||||
else {
|
||||
setConfirmOpen(true)
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmPayment = () => {
|
||||
setConfirmOpen(false)
|
||||
if (!trade?.pay_url) return
|
||||
const redirectTime = Date.now()
|
||||
window.location.href = trade.pay_url
|
||||
const checkPaymentStatus = () => {
|
||||
if (Date.now() - redirectTime > 3000) {
|
||||
setPaymentFailed(true)
|
||||
}
|
||||
}
|
||||
setTimeout(checkPaymentStatus, 3000)
|
||||
}
|
||||
|
||||
if (!trade || trade.status !== 0) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{trade?.status === 1 ? (
|
||||
<CheckCircle size={16} className="text-done"/>
|
||||
) : trade?.status === 2 ? (
|
||||
<AlertCircle size={16} className="text-weak"/>
|
||||
) : trade?.status === 3 ? (
|
||||
<AlertCircle size={16} className="text-fail"/>
|
||||
) : null}
|
||||
<span>
|
||||
{trade?.status === 1 ? '已完成'
|
||||
: trade?.status === 2 ? '已取消'
|
||||
: trade?.status === 3 ? '已退款' : '-'}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (paymentFailed) {
|
||||
return (
|
||||
<Dialog open={paymentFailed} onOpenChange={setPaymentFailed}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<div className="text-center mb-6">
|
||||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 text-primary mb-4">
|
||||
<i className="fa fa-credit-card text-2xl"></i>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-700 mb-2">支付失败</h3>
|
||||
<p className="text-neutral-500">未能成功唤起支付App，请检查是否已安装相关应用或选择其他支付方式。</p>
|
||||
</div>
|
||||
<div className="space-y-3 py-4 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">订单号</span>
|
||||
<span>{trade.inner_no}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">支付方式</span>
|
||||
<span>
|
||||
{trade.method === 1 ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<Image
|
||||
src={alipay}
|
||||
alt="支付宝logo"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<span>支付宝</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<Image
|
||||
src={wechat}
|
||||
alt="微信支付logo"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<span>微信支付</span>
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">支付金额</span>
|
||||
<span className="font-medium text-red-500">
|
||||
¥
|
||||
{typeof trade.amount === 'string'
|
||||
? parseFloat(trade.amount).toFixed(2)
|
||||
: (trade.amount || 0).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">支付时间</span>
|
||||
<span>{format(new Date(), 'yyyy-MM-dd HH:mm:ss')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-4">
|
||||
<Button className="w-full max-w-[200px]" onClick={() => setPaymentFailed(false)}>完成</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
if (!trade.inner_no || !trade.method || !trade.pay_url) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<ClockIcon size={16} className="text-warn"/>
|
||||
<span>订单异常</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<ClockIcon size={16} className="text-warn"/>
|
||||
<span>订单待支付</span>
|
||||
<Link
|
||||
href="#"
|
||||
onClick={handleClick}
|
||||
className="text-sm underline text-blue-500"
|
||||
passHref
|
||||
>
|
||||
{trade.inner_no}
|
||||
</Link>
|
||||
<PaymentDialog
|
||||
trade={{
|
||||
inner_no: trade.inner_no,
|
||||
method: trade.method,
|
||||
pay_url: trade.pay_url,
|
||||
amount: typeof trade.amount === 'string'
|
||||
? parseFloat(trade.amount)
|
||||
: trade.amount || 0,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
/>
|
||||
|
||||
<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
|
||||
<DialogContent>
|
||||
<div className="text-center mb-6">
|
||||
<div className="inline-flex items-center justify-center h-16 w-16 rounded-full bg-primary/10 text-primary mb-4">
|
||||
<i className="fa fa-credit-card text-2xl"></i>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-700 mb-2">确认支付</h3>
|
||||
<p className="text-neutral-500">请确认以下支付信息</p>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">订单号</span>
|
||||
<span>{trade.inner_no}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">支付方式</span>
|
||||
<span className="flex items-center gap-1">
|
||||
{trade.method === 1 ? (
|
||||
<Image
|
||||
src={alipay}
|
||||
alt="支付宝"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-md"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={wechat}
|
||||
alt="微信支付"
|
||||
width={16}
|
||||
height={16}
|
||||
className="rounded-md"
|
||||
/>
|
||||
)}
|
||||
{trade.method === 1 ? '支付宝' : '微信支付'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-500">支付金额</span>
|
||||
<span className="font-medium">
|
||||
¥
|
||||
{typeof trade.amount === 'string'
|
||||
? parseFloat(trade.amount).toFixed(2)
|
||||
: (trade.amount || 0).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<Button theme="outline" className="flex-1" onClick={() => setConfirmOpen(false)}> 取消 </Button>
|
||||
<Button className="flex-1" onClick={handleConfirmPayment}> 确认并支付 </Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
31
src/components/composites/payment/types.tsx
Normal file
31
src/components/composites/payment/types.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
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'
|
||||
Reference in New Issue
Block a user