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 [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());
  }, []);

  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>
              {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>
                    </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>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default TopUp;