web/src/components/composites/payment/mobile-payment.tsx

'use client'
import {DialogClose, DialogContent} from '@/components/ui/dialog'
import {Button} from '@/components/ui/button'
import {toast} from 'sonner'
import {CreditCard, Loader} from 'lucide-react'
import {useState} from 'react'
import Image from 'next/image'
import {PaymentModalProps} from './payment-modal'
import {getTradeMethodDecoration} from '@/lib/models/trade'

export function MobilePayment(props: PaymentModalProps) {
  const decoration = getTradeMethodDecoration(props.method)
  const [loading, setLoading] = useState(false) // 加载状态
  const [paymentInitiated, setPaymentInitiated] = useState(false) // 是否已发起支付

  // 处理确认支付
  const handleConfirmPayment = () => {
    try {
      const newWindow = window.open(props.pay_url, '_blank')
      if (!newWindow) {
        toast.error('请允许弹出窗口以完成支付')
        return
      }
      setPaymentInitiated(true)
    }
    catch (error) {
      toast.error('无法打开支付页面')
    }
  }

  // 处理支付完成确认
  const handlePaymentComplete = async () => {
    setLoading(true)
    await props.onConfirm(true) // 调用父组件传入的确认方法
    setLoading(false)
  }

  return (
    <DialogContent className="max-w-[95vw] rounded-lg">
      <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">{props.inner_no}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-600">支付方式</span>
            <div className="flex items-center gap-2">
              {decoration.icon && (
                <Image
                  src={decoration.icon}
                  alt={decoration.text}
                  width={28}
                  height={28}
                  className="rounded-md"
                />
              )}
              <span>{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">
              ¥
              {' '}
              {props.amount.toFixed(2)}
            </span>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex gap-3">
          {!paymentInitiated ? ( // 未发起支付时显示
            <>
              <DialogClose asChild>
                <Button
                  theme="outline"
                  className="flex-1 py-3 text-base"
                  onClick={props.onClose}
                >
                  取消
                </Button>
              </DialogClose>
              <Button
                className="flex-1 py-3 text-base"
                onClick={handleConfirmPayment}
              >
                确认支付
              </Button>
            </>
          ) : ( // 已发起支付时显示
            <Button
              className="flex-1 py-3 text-base"
              onClick={handlePaymentComplete}
              disabled={loading}
            >
              {loading && <Loader className="animate-spin mr-2" size={18}/>}
              已完成支付
            </Button>
          )}
        </div>
      </div>
    </DialogContent>
  )
}