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

'use client'
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 {PaymentModalProps} from './payment-modal'

export function MobilePayment(props: PaymentModalProps) {
  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">
              {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">
              ¥
              {' '}
              {props.amount.toFixed(2)}
            </span>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex gap-3">
          <Button
            theme="outline"
            className="flex-1 py-3 text-base"
            onClick={props.onClose} >
            取消
          </Button>
          <Button className="flex-1 py-3 text-base" onClick={() => window.location.href = props.pay_url} >
            确认支付
          </Button>
        </div>
      </div>
    </DialogContent>
  )
}