💳 feat(TopUp): unify payment cards, add header stats, brand icons, and mobile refinements [[memory:5659506]]
- Add RightStatsCard and place it in RechargeCard header
- Shows current balance, historical spend, and request count
- Mobile: stacks under title; three metrics split equally (flex-1); vertical dividers hidden on small screens
- Remove extra margins; small card styling
- RechargeCard
- Replace redeem code Input icon with Semi UI IconGift
- Style “Payable amount” number in red and bold; keep same style in confirm modal
- Always render payment methods as Cards (remove Button variant) with adaptive grid
- Use brand color icons: SiAlipay (#1677FF), SiWechat (#07C160), SiStripe (#635BFF)
- Replace Stripe icon with SiStripe
- Integrate RightStatsCard props; adjust header to flex-col on mobile and flex-row on desktop
- Hide Banner close button when online top-up is disabled (closeIcon={null})
- InvitationCard
- Simplify to match RechargeCard’s minimalist slate style
- Use Card title for “Rewards” and place content directly in body
- Improve link input and copy button; use Badge dots for bullet points
- TopUp index
- Remove separate right-column stats card; pass userState and renderQuota to RechargeCard
- Cleanup
- Lint passes; no functional changes to APIs or business logic
This commit is contained in:
t0ng7u
542
web/src/components/topup/index.jsx
Normal file
542
web/src/components/topup/index.jsx
Normal file
@@ -0,0 +1,542 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import {
|
||||
API,
|
||||
showError,
|
||||
showInfo,
|
||||
showSuccess,
|
||||
renderQuota,
|
||||
renderQuotaWithAmount,
|
||||
copy,
|
||||
getQuotaPerUnit,
|
||||
} from '../../helpers';
|
||||
import {
|
||||
Modal,
|
||||
Toast,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { UserContext } from '../../context/User';
|
||||
import { StatusContext } from '../../context/Status/index.js';
|
||||
|
||||
import RechargeCard from './RechargeCard';
|
||||
import InvitationCard from './InvitationCard';
|
||||
import TransferModal from './modals/TransferModal';
|
||||
import PaymentConfirmModal from './modals/PaymentConfirmModal';
|
||||
|
||||
const TopUp = () => {
|
||||
const { t } = useTranslation();
|
||||
const [userState, userDispatch] = useContext(UserContext);
|
||||
const [statusState] = useContext(StatusContext);
|
||||
|
||||
const [redemptionCode, setRedemptionCode] = 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 [enableStripeTopUp, setEnableStripeTopUp] = useState(statusState?.status?.enable_stripe_topup || false);
|
||||
const [statusLoading, setStatusLoading] = useState(true);
|
||||
|
||||
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 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 (payment === 'stripe') {
|
||||
if (!enableStripeTopUp) {
|
||||
showError(t('管理员未开启Stripe充值！'));
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!enableOnlineTopUp) {
|
||||
showError(t('管理员未开启在线充值！'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setPayWay(payment);
|
||||
setPaymentLoading(true);
|
||||
try {
|
||||
if (payment === 'stripe') {
|
||||
await getStripeAmount();
|
||||
} else {
|
||||
await getAmount();
|
||||
}
|
||||
|
||||
if (topUpCount < minTopUp) {
|
||||
showError(t('充值数量不能小于') + minTopUp);
|
||||
return;
|
||||
}
|
||||
setOpen(true);
|
||||
} catch (error) {
|
||||
showError(t('获取金额失败'));
|
||||
} finally {
|
||||
setPaymentLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onlineTopUp = async () => {
|
||||
if (payWay === 'stripe') {
|
||||
// Stripe 支付处理
|
||||
if (amount === 0) {
|
||||
await getStripeAmount();
|
||||
}
|
||||
} else {
|
||||
// 普通支付处理
|
||||
if (amount === 0) {
|
||||
await getAmount();
|
||||
}
|
||||
}
|
||||
|
||||
if (topUpCount < minTopUp) {
|
||||
showError('充值数量不能小于' + minTopUp);
|
||||
return;
|
||||
}
|
||||
setConfirmLoading(true);
|
||||
try {
|
||||
let res;
|
||||
if (payWay === 'stripe') {
|
||||
// Stripe 支付请求
|
||||
res = await API.post('/api/user/stripe/pay', {
|
||||
amount: parseInt(topUpCount),
|
||||
payment_method: 'stripe',
|
||||
});
|
||||
} else {
|
||||
// 普通支付请求
|
||||
res = await API.post('/api/user/pay', {
|
||||
amount: parseInt(topUpCount),
|
||||
payment_method: payWay,
|
||||
});
|
||||
}
|
||||
|
||||
if (res !== undefined) {
|
||||
const { message, data } = res.data;
|
||||
if (message === 'success') {
|
||||
if (payWay === 'stripe') {
|
||||
// Stripe 支付回调处理
|
||||
window.open(data.pay_link, '_blank');
|
||||
} else {
|
||||
// 普通支付表单提交
|
||||
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 {
|
||||
setOpen(false);
|
||||
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 if (method.type === 'stripe') {
|
||||
method.color = 'rgba(var(--semi-purple-5), 1)';
|
||||
} else {
|
||||
method.color = 'rgba(var(--semi-primary-5), 1)';
|
||||
}
|
||||
}
|
||||
return method;
|
||||
});
|
||||
} else {
|
||||
payMethods = [];
|
||||
}
|
||||
|
||||
// 如果启用了 Stripe 支付，添加到支付方法列表
|
||||
if (statusState?.status?.enable_stripe_topup) {
|
||||
const hasStripe = payMethods.some(method => method.type === 'stripe');
|
||||
if (!hasStripe) {
|
||||
payMethods.push({
|
||||
name: 'Stripe',
|
||||
type: 'stripe',
|
||||
color: 'rgba(var(--semi-purple-5), 1)'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setPayMethods(payMethods);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
showError(t('支付方式配置错误, 请联系管理员'));
|
||||
}
|
||||
}, [statusState?.status?.enable_stripe_topup]);
|
||||
|
||||
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);
|
||||
setEnableStripeTopUp(statusState.status.enable_stripe_topup || false);
|
||||
setStatusLoading(false);
|
||||
}
|
||||
}, [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),
|
||||
});
|
||||
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 getStripeAmount = async (value) => {
|
||||
if (value === undefined) {
|
||||
value = topUpCount;
|
||||
}
|
||||
setAmountLoading(true);
|
||||
try {
|
||||
const res = await API.post('/api/user/stripe/amount', {
|
||||
amount: parseFloat(value),
|
||||
});
|
||||
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);
|
||||
} finally {
|
||||
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 mt-[60px] px-2'>
|
||||
{/* 划转模态框 */}
|
||||
<TransferModal
|
||||
t={t}
|
||||
openTransfer={openTransfer}
|
||||
transfer={transfer}
|
||||
handleTransferCancel={handleTransferCancel}
|
||||
userState={userState}
|
||||
renderQuota={renderQuota}
|
||||
getQuotaPerUnit={getQuotaPerUnit}
|
||||
transferAmount={transferAmount}
|
||||
setTransferAmount={setTransferAmount}
|
||||
/>
|
||||
|
||||
{/* 充值确认模态框 */}
|
||||
<PaymentConfirmModal
|
||||
t={t}
|
||||
open={open}
|
||||
onlineTopUp={onlineTopUp}
|
||||
handleCancel={handleCancel}
|
||||
confirmLoading={confirmLoading}
|
||||
topUpCount={topUpCount}
|
||||
renderQuotaWithAmount={renderQuotaWithAmount}
|
||||
amountLoading={amountLoading}
|
||||
renderAmount={renderAmount}
|
||||
payWay={payWay}
|
||||
payMethods={payMethods}
|
||||
/>
|
||||
|
||||
{/* 用户信息头部 */}
|
||||
<div className='space-y-6'>
|
||||
<div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
|
||||
{/* 左侧充值区域 */}
|
||||
<div className='lg:col-span-7 space-y-6 w-full'>
|
||||
<RechargeCard
|
||||
t={t}
|
||||
enableOnlineTopUp={enableOnlineTopUp}
|
||||
enableStripeTopUp={enableStripeTopUp}
|
||||
presetAmounts={presetAmounts}
|
||||
selectedPreset={selectedPreset}
|
||||
selectPresetAmount={selectPresetAmount}
|
||||
formatLargeNumber={formatLargeNumber}
|
||||
priceRatio={priceRatio}
|
||||
topUpCount={topUpCount}
|
||||
minTopUp={minTopUp}
|
||||
renderQuotaWithAmount={renderQuotaWithAmount}
|
||||
getAmount={getAmount}
|
||||
setTopUpCount={setTopUpCount}
|
||||
setSelectedPreset={setSelectedPreset}
|
||||
renderAmount={renderAmount}
|
||||
amountLoading={amountLoading}
|
||||
payMethods={payMethods}
|
||||
preTopUp={preTopUp}
|
||||
paymentLoading={paymentLoading}
|
||||
payWay={payWay}
|
||||
redemptionCode={redemptionCode}
|
||||
setRedemptionCode={setRedemptionCode}
|
||||
topUp={topUp}
|
||||
isSubmitting={isSubmitting}
|
||||
topUpLink={topUpLink}
|
||||
openTopUpLink={openTopUpLink}
|
||||
userState={userState}
|
||||
renderQuota={renderQuota}
|
||||
statusLoading={statusLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 右侧信息区域 */}
|
||||
<div className='lg:col-span-5'>
|
||||
<InvitationCard
|
||||
t={t}
|
||||
userState={userState}
|
||||
renderQuota={renderQuota}
|
||||
setOpenTransfer={setOpenTransfer}
|
||||
affLink={affLink}
|
||||
handleAffLinkClick={handleAffLinkClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopUp;
|
||||
Reference in New Issue
Block a user