new-api/web/src/pages/TopUp/index.js

import React, { useEffect, useState, useContext } from 'react';
import {
  API,
  showError,
  showInfo,
  showSuccess,
  renderQuota,
  renderQuotaWithAmount,
  copy,
  getQuotaPerUnit,
} from '../../helpers';
import {
  Avatar,
  Typography,
  Card,
  Button,
  Modal,
  Toast,
  Input,
  InputNumber,
  Banner,
  Skeleton,
  Divider,
} from '@douyinfe/semi-ui';
import { SiAlipay, SiWechat } from 'react-icons/si';
import { useTranslation } from 'react-i18next';
import { UserContext } from '../../context/User';
import { StatusContext } from '../../context/Status/index.js';
import { useTheme } from '../../context/Theme';
import {
  CreditCard,
  Gift,
  Link as LinkIcon,
  Copy,
  Users,
  User,
  Coins,
} from 'lucide-react';

const { Text, Title } = Typography;

const TopUp = () => {
  const { t } = useTranslation();
  const [userState, userDispatch] = useContext(UserContext);
  const [statusState] = useContext(StatusContext);
  const theme = useTheme();

  const [redemptionCode, setRedemptionCode] = useState('');
  const [topUpCode, setTopUpCode] = useState('');
  const [amount, setAmount] = useState(0.0);
  const [minTopUp, setMinTopUp] = useState(statusState?.status?.min_topup || 1);
  const [topUpCount, setTopUpCount] = useState(
    statusState?.status?.min_topup || 1,
  );
  const [topUpLink, setTopUpLink] = useState(
    statusState?.status?.top_up_link || '',
  );
  const [enableOnlineTopUp, setEnableOnlineTopUp] = useState(
    statusState?.status?.enable_online_topup || false,
  );
  const [priceRatio, setPriceRatio] = useState(statusState?.status?.price || 1);
  const [userQuota, setUserQuota] = useState(0);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [open, setOpen] = useState(false);
  const [payWay, setPayWay] = useState('');
  const [userDataLoading, setUserDataLoading] = useState(true);
  const [amountLoading, setAmountLoading] = useState(false);
  const [paymentLoading, setPaymentLoading] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [payMethods, setPayMethods] = useState([]);

  // 邀请相关状态
  const [affLink, setAffLink] = useState('');
  const [openTransfer, setOpenTransfer] = useState(false);
  const [transferAmount, setTransferAmount] = useState(0);

  // 预设充值额度选项
  const [presetAmounts, setPresetAmounts] = useState([
    { value: 5 },
    { value: 10 },
    { value: 30 },
    { value: 50 },
    { value: 100 },
    { value: 300 },
    { value: 500 },
    { value: 1000 },
  ]);
  const [selectedPreset, setSelectedPreset] = useState(null);

  const getUsername = () => {
    if (userState.user) {
      return userState.user.username;
    } else {
      return 'null';
    }
  };

  const getUserRole = () => {
    if (!userState.user) return t('普通用户');

    switch (userState.user.role) {
      case 100:
        return t('超级管理员');
      case 10:
        return t('管理员');
      case 0:
      default:
        return t('普通用户');
    }
  };

  const topUp = async () => {
    if (redemptionCode === '') {
      showInfo(t('请输入兑换码！'));
      return;
    }
    setIsSubmitting(true);
    try {
      const res = await API.post('/api/user/topup', {
        key: redemptionCode,
      });
      const { success, message, data } = res.data;
      if (success) {
        showSuccess(t('兑换成功！'));
        Modal.success({
          title: t('兑换成功！'),
          content: t('成功兑换额度：') + renderQuota(data),
          centered: true,
        });
        setUserQuota((quota) => {
          return quota + data;
        });
        if (userState.user) {
          const updatedUser = {
            ...userState.user,
            quota: userState.user.quota + data,
          };
          userDispatch({ type: 'login', payload: updatedUser });
        }
        setRedemptionCode('');
      } else {
        showError(message);
      }
    } catch (err) {
      showError(t('请求失败'));
    } finally {
      setIsSubmitting(false);
    }
  };

  const openTopUpLink = () => {
    if (!topUpLink) {
      showError(t('超级管理员未设置充值链接！'));
      return;
    }
    window.open(topUpLink, '_blank');
  };

  const preTopUp = async (payment) => {
    if (!enableOnlineTopUp) {
      showError(t('管理员未开启在线充值！'));
      return;
    }
    setPaymentLoading(true);
    try {
      await getAmount();
      if (topUpCount < minTopUp) {
        showError(t('充值数量不能小于') + minTopUp);
        return;
      }
      setPayWay(payment);
      setOpen(true);
    } catch (error) {
      showError(t('获取金额失败'));
    } finally {
      setPaymentLoading(false);
    }
  };

  const onlineTopUp = async () => {
    if (amount === 0) {
      await getAmount();
    }
    if (topUpCount < minTopUp) {
      showError('充值数量不能小于' + minTopUp);
      return;
    }
    setConfirmLoading(true);
    setOpen(false);
    try {
      const res = await API.post('/api/user/pay', {
        amount: parseInt(topUpCount),
        top_up_code: topUpCode,
        payment_method: payWay,
      });
      if (res !== undefined) {
        const { message, data } = res.data;
        if (message === 'success') {
          let params = data;
          let url = res.data.url;
          let form = document.createElement('form');
          form.action = url;
          form.method = 'POST';
          let isSafari =
            navigator.userAgent.indexOf('Safari') > -1 &&
            navigator.userAgent.indexOf('Chrome') < 1;
          if (!isSafari) {
            form.target = '_blank';
          }
          for (let key in params) {
            let input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = params[key];
            form.appendChild(input);
          }
          document.body.appendChild(form);
          form.submit();
          document.body.removeChild(form);
        } else {
          showError(data);
        }
      } else {
        showError(res);
      }
    } catch (err) {
      console.log(err);
      showError(t('支付请求失败'));
    } finally {
      setConfirmLoading(false);
    }
  };

  const getUserQuota = async () => {
    setUserDataLoading(true);
    let res = await API.get(`/api/user/self`);
    const { success, message, data } = res.data;
    if (success) {
      setUserQuota(data.quota);
      userDispatch({ type: 'login', payload: data });
    } else {
      showError(message);
    }
    setUserDataLoading(false);
  };

  // 获取邀请链接
  const getAffLink = async () => {
    const res = await API.get('/api/user/aff');
    const { success, message, data } = res.data;
    if (success) {
      let link = `${window.location.origin}/register?aff=${data}`;
      setAffLink(link);
    } else {
      showError(message);
    }
  };

  // 划转邀请额度
  const transfer = async () => {
    if (transferAmount < getQuotaPerUnit()) {
      showError(t('划转金额最低为') + ' ' + renderQuota(getQuotaPerUnit()));
      return;
    }
    const res = await API.post(`/api/user/aff_transfer`, {
      quota: transferAmount,
    });
    const { success, message } = res.data;
    if (success) {
      showSuccess(message);
      setOpenTransfer(false);
      getUserQuota().then();
    } else {
      showError(message);
    }
  };

  // 复制邀请链接
  const handleAffLinkClick = async () => {
    await copy(affLink);
    showSuccess(t('邀请链接已复制到剪切板'));
  };

  useEffect(() => {
    if (userState?.user?.id) {
      setUserDataLoading(false);
      setUserQuota(userState.user.quota);
    } else {
      getUserQuota().then();
    }
    getAffLink().then();
    setTransferAmount(getQuotaPerUnit());

    let payMethods = localStorage.getItem('pay_methods');
    try {
      payMethods = JSON.parse(payMethods);
      if (payMethods && payMethods.length > 0) {
        // 检查name和type是否为空
        payMethods = payMethods.filter((method) => {
          return method.name && method.type;
        });
        // 如果没有color，则设置默认颜色
        payMethods = payMethods.map((method) => {
          if (!method.color) {
            if (method.type === 'zfb') {
              method.color = 'rgba(var(--semi-blue-5), 1)';
            } else if (method.type === 'wx') {
              method.color = 'rgba(var(--semi-green-5), 1)';
            } else {
              method.color = 'rgba(var(--semi-primary-5), 1)';
            }
          }
          return method;
        });
        setPayMethods(payMethods);
      }
    } catch (e) {
      console.log(e);
      showError(t('支付方式配置错误, 请联系管理员'));
    }
  }, []);

  useEffect(() => {
    if (statusState?.status) {
      setMinTopUp(statusState.status.min_topup || 1);
      setTopUpCount(statusState.status.min_topup || 1);
      setTopUpLink(statusState.status.top_up_link || '');
      setEnableOnlineTopUp(statusState.status.enable_online_topup || false);
      setPriceRatio(statusState.status.price || 1);
    }
  }, [statusState?.status]);

  const renderAmount = () => {
    return amount + ' ' + t('元');
  };

  const getAmount = async (value) => {
    if (value === undefined) {
      value = topUpCount;
    }
    setAmountLoading(true);
    try {
      const res = await API.post('/api/user/amount', {
        amount: parseFloat(value),
        top_up_code: topUpCode,
      });
      if (res !== undefined) {
        const { message, data } = res.data;
        if (message === 'success') {
          setAmount(parseFloat(data));
        } else {
          setAmount(0);
          Toast.error({ content: '错误：' + data, id: 'getAmount' });
        }
      } else {
        showError(res);
      }
    } catch (err) {
      console.log(err);
    }
    setAmountLoading(false);
  };

  const handleCancel = () => {
    setOpen(false);
  };

  const handleTransferCancel = () => {
    setOpenTransfer(false);
  };

  // 选择预设充值额度
  const selectPresetAmount = (preset) => {
    setTopUpCount(preset.value);
    setSelectedPreset(preset.value);
    setAmount(preset.value * priceRatio);
  };

  // 格式化大数字显示
  const formatLargeNumber = (num) => {
    return num.toString();
  };

  return (
    <div className='mx-auto relative min-h-screen lg:min-h-0'>
      {/* 划转模态框 */}
      <Modal
        title={
          <div className='flex items-center'>
            <CreditCard className='mr-2' size={18} />
            {t('划转邀请额度')}
          </div>
        }
        visible={openTransfer}
        onOk={transfer}
        onCancel={handleTransferCancel}
        maskClosable={false}
        size='small'
        centered
      >
        <div className='space-y-4'>
          <div>
            <Typography.Text strong className='block mb-2'>
              {t('可用邀请额度')}
            </Typography.Text>
            <Input
              value={renderQuota(userState?.user?.aff_quota)}
              disabled
              size='large'
            />
          </div>
          <div>
            <Typography.Text strong className='block mb-2'>
              {t('划转额度')} ({t('最低') + renderQuota(getQuotaPerUnit())})
            </Typography.Text>
            <InputNumber
              min={getQuotaPerUnit()}
              max={userState?.user?.aff_quota || 0}
              value={transferAmount}
              onChange={(value) => setTransferAmount(value)}
              size='large'
              className='w-full'
            />
          </div>
        </div>
      </Modal>

      {/* 充值确认模态框 */}
      <Modal
        title={
          <div className='flex items-center'>
            <CreditCard className='mr-2' size={18} />
            {t('充值确认')}
          </div>
        }
        visible={open}
        onOk={onlineTopUp}
        onCancel={handleCancel}
        maskClosable={false}
        size='small'
        centered
        confirmLoading={confirmLoading}
      >
        <div className='space-y-4'>
          <div className='flex justify-between items-center py-2'>
            <Text strong>{t('充值数量')}：</Text>
            <Text>{renderQuotaWithAmount(topUpCount)}</Text>
          </div>
          <div className='flex justify-between items-center py-2'>
            <Text strong>{t('实付金额')}：</Text>
            {amountLoading ? (
              <Skeleton.Title style={{ width: '60px', height: '16px' }} />
            ) : (
              <Text type='danger' strong>
                {renderAmount()}
              </Text>
            )}
          </div>
          <div className='flex justify-between items-center py-2'>
            <Text strong>{t('支付方式')}：</Text>
            <Text>
              {(() => {
                const payMethod = payMethods.find(
                  (method) => method.type === payWay,
                );
                if (payMethod) {
                  return (
                    <div className='flex items-center'>
                      {payMethod.type === 'zfb' ? (
                        <SiAlipay className='mr-1' size={16} />
                      ) : payMethod.type === 'wx' ? (
                        <SiWechat className='mr-1' size={16} />
                      ) : (
                        <CreditCard className='mr-1' size={16} />
                      )}
                      {payMethod.name}
                    </div>
                  );
                } else {
                  // 默认充值方式
                  return payWay === 'zfb' ? (
                    <div className='flex items-center'>
                      <SiAlipay className='mr-1' size={16} />
                      {t('支付宝')}
                    </div>
                  ) : (
                    <div className='flex items-center'>
                      <SiWechat className='mr-1' size={16} />
                      {t('微信')}
                    </div>
                  );
                }
              })()}
            </Text>
          </div>
        </div>
      </Modal>

      <div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
        {/* 左侧充值区域 */}
        <div className='lg:col-span-7 space-y-6 w-full'>
          {/* 在线充值卡片 */}
          <Card
            className='!rounded-2xl'
            shadows='always'
            bordered={false}
            header={
              <div className='px-5 py-4 pb-0'>
                <div className='flex items-center justify-between'>
                  <div className='flex items-center'>
                    <Avatar
                      className='mr-3 shadow-md flex-shrink-0'
                      color='blue'
                    >
                      <CreditCard size={24} />
                    </Avatar>
                    <div>
                      <Title heading={5} style={{ margin: 0 }}>
                        {t('在线充值')}
                      </Title>
                      <Text type='tertiary' className='text-sm'>
                        {t('快速方便的充值方式')}
                      </Text>
                    </div>
                  </div>

                  <div className='flex items-center'>
                    {userDataLoading ? (
                      <Skeleton.Paragraph style={{ width: '120px' }} rows={1} />
                    ) : (
                      <Text type='tertiary' className='hidden sm:block'>
                        <div className='flex items-center'>
                          <User size={14} className='mr-1' />
                          <span className='hidden md:inline'>
                            {getUsername()} ({getUserRole()})
                          </span>
                          <span className='md:hidden'>{getUsername()}</span>
                        </div>
                      </Text>
                    )}
                  </div>
                </div>
              </div>
            }
          >
            <div className='space-y-4'>
              {/* 账户余额信息 */}
              <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-2'>
                <Card className='!rounded-2xl'>
                  <Text type='tertiary' className='mb-1'>
                    {t('当前余额')}
                  </Text>
                  {userDataLoading ? (
                    <Skeleton.Title
                      style={{ width: '100px', height: '30px' }}
                    />
                  ) : (
                    <div className='text-xl font-semibold mt-2'>
                      {renderQuota(userState?.user?.quota || userQuota)}
                    </div>
                  )}
                </Card>
                <Card className='!rounded-2xl'>
                  <Text type='tertiary' className='mb-1'>
                    {t('历史消耗')}
                  </Text>
                  {userDataLoading ? (
                    <Skeleton.Title
                      style={{ width: '100px', height: '30px' }}
                    />
                  ) : (
                    <div className='text-xl font-semibold mt-2'>
                      {renderQuota(userState?.user?.used_quota || 0)}
                    </div>
                  )}
                </Card>
              </div>

              {enableOnlineTopUp && (
                <>
                  {/* 预设充值额度卡片网格 */}
                  <div>
                    <Text strong className='block mb-3'>
                      {t('选择充值额度')}
                    </Text>
                    <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3'>
                      {presetAmounts.map((preset, index) => (
                        <Card
                          key={index}
                          onClick={() => selectPresetAmount(preset)}
                          className={`cursor-pointer !rounded-2xl transition-all hover:shadow-md ${
                            selectedPreset === preset.value
                              ? 'border-blue-500'
                              : 'border-gray-200 hover:border-gray-300'
                          }`}
                          bodyStyle={{ textAlign: 'center' }}
                        >
                          <div className='font-medium text-lg flex items-center justify-center mb-1'>
                            <Coins size={16} className='mr-0.5' />
                            {formatLargeNumber(preset.value)}
                          </div>
                          <div className='text-xs text-gray-500'>
                            {t('实付')} ￥
                            {(preset.value * priceRatio).toFixed(2)}
                          </div>
                        </Card>
                      ))}
                    </div>
                  </div>
                  {/* 桌面端显示的自定义金额和支付按钮 */}
                  <div className='hidden md:block space-y-4'>
                    <Divider style={{ margin: '24px 0' }}>
                      <Text className='text-sm font-medium'>
                        {t('或输入自定义金额')}
                      </Text>
                    </Divider>

                    <div>
                      <div className='flex justify-between mb-2'>
                        <Text strong>{t('充值数量')}</Text>
                        {amountLoading ? (
                          <Skeleton.Title
                            style={{ width: '80px', height: '16px' }}
                          />
                        ) : (
                          <Text type='tertiary'>
                            {t('实付金额：') + renderAmount()}
                          </Text>
                        )}
                      </div>
                      <InputNumber
                        disabled={!enableOnlineTopUp}
                        placeholder={
                          t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
                        }
                        value={topUpCount}
                        min={minTopUp}
                        max={999999999}
                        step={1}
                        precision={0}
                        onChange={async (value) => {
                          if (value && value >= 1) {
                            setTopUpCount(value);
                            setSelectedPreset(null);
                            await getAmount(value);
                          }
                        }}
                        onBlur={(e) => {
                          const value = parseInt(e.target.value);
                          if (!value || value < 1) {
                            setTopUpCount(1);
                            getAmount(1);
                          }
                        }}
                        size='large'
                        className='w-full'
                        formatter={(value) => (value ? `${value}` : '')}
                        parser={(value) =>
                          value ? parseInt(value.replace(/[^\d]/g, '')) : 0
                        }
                      />
                    </div>

                    <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
                      {/* <Button
                        type='primary'
                        onClick={() => preTopUp('zfb')}
                        size='large'
                        disabled={!enableOnlineTopUp}
                        loading={paymentLoading && payWay === 'zfb'}
                        icon={<SiAlipay size={18} />}
                        style={{ height: '44px' }}
                      >
                        <span className='ml-2'>{t('支付宝')}</span>
                      </Button>
                      <Button
                        type='primary'
                        onClick={() => preTopUp('wx')}
                        size='large'
                        disabled={!enableOnlineTopUp}
                        loading={paymentLoading && payWay === 'wx'}
                        icon={<SiWechat size={18} />}
                        style={{ height: '44px' }}
                      >
                        <span className='ml-2'>{t('微信')}</span>
                      </Button> */}
                      {payMethods.map((payMethod) => (
                        <Button
                          key={payMethod.type}
                          type='primary'
                          onClick={() => preTopUp(payMethod.type)}
                          size='large'
                          disabled={!enableOnlineTopUp}
                          loading={paymentLoading && payWay === payMethod.type}
                          icon={
                            payMethod.type === 'zfb' ? (
                              <SiAlipay size={18} />
                            ) : payMethod.type === 'wx' ? (
                              <SiWechat size={18} />
                            ) : (
                              <CreditCard size={18} />
                            )
                          }
                          style={{
                            height: '44px',
                            color: payMethod.color,
                          }}
                        >
                          <span className='ml-2'>{payMethod.name}</span>
                        </Button>
                      ))}
                    </div>
                  </div>
                </>
              )}

              {!enableOnlineTopUp && (
                <Banner
                  type='warning'
                  description={t(
                    '管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。',
                  )}
                  closeIcon={null}
                  className='!rounded-2xl'
                />
              )}

              <Divider style={{ margin: '24px 0' }}>
                <Text className='text-sm font-medium'>{t('兑换码充值')}</Text>
              </Divider>

              <Card className='!rounded-2xl'>
                <div className='flex items-start mb-4'>
                  <Gift size={16} className='mr-2 mt-0.5' />
                  <Text strong>{t('使用兑换码快速充值')}</Text>
                </div>

                <div className='mb-4'>
                  <Input
                    placeholder={t('请输入兑换码')}
                    value={redemptionCode}
                    onChange={(value) => setRedemptionCode(value)}
                    size='large'
                  />
                </div>

                <div className='flex flex-col sm:flex-row gap-3'>
                  {topUpLink && (
                    <Button
                      type='secondary'
                      onClick={openTopUpLink}
                      size='large'
                      className='flex-1'
                      icon={<LinkIcon size={16} />}
                      style={{ height: '40px' }}
                    >
                      {t('获取兑换码')}
                    </Button>
                  )}
                  <Button
                    type='primary'
                    onClick={topUp}
                    disabled={isSubmitting || !redemptionCode}
                    loading={isSubmitting}
                    size='large'
                    className='flex-1'
                    style={{ height: '40px' }}
                  >
                    {isSubmitting ? t('兑换中...') : t('兑换')}
                  </Button>
                </div>
              </Card>
            </div>
          </Card>
        </div>

        {/* 右侧邀请信息卡片 */}
        <div className='lg:col-span-5'>
          <Card
            className='!rounded-2xl'
            shadows='always'
            bordered={false}
            header={
              <div className='px-5 py-4 pb-0'>
                <div className='flex items-center justify-between'>
                  <div className='flex items-center'>
                    <Avatar
                      className='mr-3 shadow-md flex-shrink-0'
                      color='green'
                    >
                      <Users size={24} />
                    </Avatar>
                    <div>
                      <Title heading={5} style={{ margin: 0 }}>
                        {t('邀请奖励')}
                      </Title>
                      <Text type='tertiary' className='text-sm'>
                        {t('邀请好友获得额外奖励')}
                      </Text>
                    </div>
                  </div>
                </div>
              </div>
            }
          >
            <div className='space-y-6'>
              <div className='grid grid-cols-1 gap-4'>
                <Card className='!rounded-2xl'>
                  <div className='flex justify-between items-center'>
                    <Text type='tertiary'>{t('待使用收益')}</Text>
                    <Button
                      type='primary'
                      theme='solid'
                      size='small'
                      disabled={
                        !userState?.user?.aff_quota ||
                        userState?.user?.aff_quota <= 0
                      }
                      onClick={() => setOpenTransfer(true)}
                    >
                      {t('划转到余额')}
                    </Button>
                  </div>
                  <div className='text-2xl font-semibold mt-2'>
                    {renderQuota(userState?.user?.aff_quota || 0)}
                  </div>
                </Card>

                <div className='grid grid-cols-2 gap-4'>
                  <Card className='!rounded-2xl'>
                    <Text type='tertiary'>{t('总收益')}</Text>
                    <div className='text-xl font-semibold mt-2'>
                      {renderQuota(userState?.user?.aff_history_quota || 0)}
                    </div>
                  </Card>
                  <Card className='!rounded-2xl'>
                    <Text type='tertiary'>{t('邀请人数')}</Text>
                    <div className='text-xl font-semibold mt-2 flex items-center'>
                      <Users size={16} className='mr-1' />
                      {userState?.user?.aff_count || 0}
                    </div>
                  </Card>
                </div>
              </div>

              <div className='space-y-4'>
                <Title heading={6}>{t('邀请链接')}</Title>
                <Input
                  value={affLink}
                  readOnly
                  size='large'
                  suffix={
                    <Button
                      type='primary'
                      theme='light'
                      onClick={handleAffLinkClick}
                      icon={<Copy size={14} />}
                    >
                      {t('复制')}
                    </Button>
                  }
                />

                <div className='mt-4'>
                  <Card className='!rounded-2xl'>
                    <div className='space-y-4'>
                      <div className='flex items-start'>
                        <div className='w-1.5 h-1.5 rounded-full bg-blue-500 mt-2 mr-3 flex-shrink-0'></div>
                        <Text type='tertiary' className='text-sm leading-6'>
                          {t('邀请好友注册，好友充值后您可获得相应奖励')}
                        </Text>
                      </div>
                      <div className='flex items-start'>
                        <div className='w-1.5 h-1.5 rounded-full bg-green-500 mt-2 mr-3 flex-shrink-0'></div>
                        <Text type='tertiary' className='text-sm leading-6'>
                          {t('通过划转功能将奖励额度转入到您的账户余额中')}
                        </Text>
                      </div>
                      <div className='flex items-start'>
                        <div className='w-1.5 h-1.5 rounded-full bg-purple-500 mt-2 mr-3 flex-shrink-0'></div>
                        <Text type='tertiary' className='text-sm leading-6'>
                          {t('邀请的好友越多，获得的奖励越多')}
                        </Text>
                      </div>
                    </div>
                  </Card>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </div>

      {/* 移动端底部固定的自定义金额和支付区域 */}
      {enableOnlineTopUp && (
        <div
          className='md:hidden fixed bottom-0 left-0 right-0 p-4 shadow-lg z-50'
          style={{ background: 'var(--semi-color-bg-0)' }}
        >
          <div className='space-y-4'>
            <div>
              <div className='flex justify-between mb-2'>
                <Text strong>{t('充值数量')}</Text>
                {amountLoading ? (
                  <Skeleton.Title style={{ width: '80px', height: '16px' }} />
                ) : (
                  <Text type='tertiary'>
                    {t('实付金额：') + renderAmount()}
                  </Text>
                )}
              </div>
              <InputNumber
                disabled={!enableOnlineTopUp}
                placeholder={
                  t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
                }
                value={topUpCount}
                min={minTopUp}
                max={999999999}
                step={1}
                precision={0}
                onChange={async (value) => {
                  if (value && value >= 1) {
                    setTopUpCount(value);
                    setSelectedPreset(null);
                    await getAmount(value);
                  }
                }}
                onBlur={(e) => {
                  const value = parseInt(e.target.value);
                  if (!value || value < 1) {
                    setTopUpCount(1);
                    getAmount(1);
                  }
                }}
                className='w-full'
                formatter={(value) => (value ? `${value}` : '')}
                parser={(value) =>
                  value ? parseInt(value.replace(/[^\d]/g, '')) : 0
                }
              />
            </div>

            <div className='grid grid-cols-2 gap-4'>
              {/* <Button
                type='primary'
                onClick={() => preTopUp('zfb')}
                disabled={!enableOnlineTopUp}
                loading={paymentLoading && payWay === 'zfb'}
                icon={<SiAlipay size={18} />}
              >
                <span className='ml-2'>{t('支付宝')}</span>
              </Button>
              <Button
                type='primary'
                onClick={() => preTopUp('wx')}
                disabled={!enableOnlineTopUp}
                loading={paymentLoading && payWay === 'wx'}
                icon={<SiWechat size={18} />}
              >
                <span className='ml-2'>{t('微信')}</span>
              </Button> */}
              {payMethods.map((payMethod) => (
                <Button
                  key={payMethod.type}
                  type='primary'
                  onClick={() => preTopUp(payMethod.type)}
                  disabled={!enableOnlineTopUp}
                  loading={paymentLoading && payWay === payMethod.type}
                  icon={
                    payMethod.type === 'zfb' ? (
                      <SiAlipay size={18} />
                    ) : payMethod.type === 'wx' ? (
                      <SiWechat size={18} />
                    ) : (
                      <CreditCard size={18} />
                    )
                  }
                  style={{
                    color: payMethod.color,
                  }}
                >
                  <span className='ml-2'>{payMethod.name}</span>
                </Button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default TopUp;