995 lines
34 KiB
JavaScript
995 lines
34 KiB
JavaScript
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;
|