💳 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
305
web/src/components/topup/RechargeCard.jsx
Normal file
305
web/src/components/topup/RechargeCard.jsx
Normal file
@@ -0,0 +1,305 @@
|
||||
/*
|
||||
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 from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Typography,
|
||||
Card,
|
||||
Button,
|
||||
Input,
|
||||
InputNumber,
|
||||
Banner,
|
||||
Skeleton,
|
||||
Divider,
|
||||
Tabs,
|
||||
TabPane,
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
|
||||
import { CreditCard, Gift, Link as LinkIcon, Coins } from 'lucide-react';
|
||||
import { IconGift } from '@douyinfe/semi-icons';
|
||||
import RightStatsCard from './RightStatsCard';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
const RechargeCard = ({
|
||||
t,
|
||||
enableOnlineTopUp,
|
||||
enableStripeTopUp,
|
||||
presetAmounts,
|
||||
selectedPreset,
|
||||
selectPresetAmount,
|
||||
formatLargeNumber,
|
||||
priceRatio,
|
||||
topUpCount,
|
||||
minTopUp,
|
||||
renderQuotaWithAmount,
|
||||
getAmount,
|
||||
setTopUpCount,
|
||||
setSelectedPreset,
|
||||
renderAmount,
|
||||
amountLoading,
|
||||
payMethods,
|
||||
preTopUp,
|
||||
paymentLoading,
|
||||
payWay,
|
||||
redemptionCode,
|
||||
setRedemptionCode,
|
||||
topUp,
|
||||
isSubmitting,
|
||||
topUpLink,
|
||||
openTopUpLink,
|
||||
// 新增：用于右侧统计卡片
|
||||
userState,
|
||||
renderQuota,
|
||||
statusLoading,
|
||||
}) => {
|
||||
return (
|
||||
<Card className="!rounded-2xl shadow-sm border-0">
|
||||
{/* 卡片头部 */}
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4 gap-3">
|
||||
<div className="flex items-center">
|
||||
<Avatar size="small" color="blue" className="mr-3 shadow-md">
|
||||
<CreditCard size={16} />
|
||||
</Avatar>
|
||||
<div>
|
||||
<Typography.Text className="text-lg font-medium">{t('账户充值')}</Typography.Text>
|
||||
<div className="text-xs text-gray-600 dark:text-gray-400">{t('多种充值方式，安全便捷')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<RightStatsCard t={t} userState={userState} renderQuota={renderQuota} />
|
||||
</div>
|
||||
|
||||
<Tabs type="card" defaultActiveKey="online">
|
||||
{/* 在线充值 Tab */}
|
||||
<TabPane
|
||||
tab={
|
||||
<div className="flex items-center">
|
||||
<CreditCard size={16} className="mr-2" />
|
||||
{t('在线充值')}
|
||||
</div>
|
||||
}
|
||||
itemKey="online"
|
||||
>
|
||||
<div className="py-4">
|
||||
{statusLoading ? (
|
||||
<div className='py-8 flex justify-center'>
|
||||
<div className='animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500'></div>
|
||||
</div>
|
||||
) : (enableOnlineTopUp || enableStripeTopUp) ? (
|
||||
<div className='space-y-6'>
|
||||
{/* 预设充值额度选择 */}
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<div>
|
||||
<Text strong className='block mb-3'>
|
||||
{t('选择充值额度')}
|
||||
</Text>
|
||||
<div className='grid grid-cols-2 sm:grid-cols-4 gap-3'>
|
||||
{presetAmounts.map((preset, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
onClick={() => selectPresetAmount(preset)}
|
||||
className={`cursor-pointer !rounded-xl transition-all hover:shadow-md ${selectedPreset === preset.value
|
||||
? 'border-blue-500 shadow-md'
|
||||
: 'border-slate-200 hover:border-slate-300 dark:border-slate-600 dark:hover:border-slate-500'
|
||||
}`}
|
||||
bodyStyle={{ textAlign: 'center', padding: '12px' }}
|
||||
>
|
||||
<div className='font-medium text-lg flex items-center justify-center mb-1'>
|
||||
<Coins size={16} className='mr-1' />
|
||||
{formatLargeNumber(preset.value)}
|
||||
</div>
|
||||
<div className='text-xs text-gray-500 dark:text-gray-400'>
|
||||
{t('实付')} ￥{(preset.value * priceRatio).toFixed(2)}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 自定义充值金额 */}
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<div className='space-y-4'>
|
||||
<Divider style={{ margin: '24px 0' }}>
|
||||
<Text className='text-sm font-medium text-slate-600 dark:text-slate-400'>
|
||||
{t('或输入自定义金额')}
|
||||
</Text>
|
||||
</Divider>
|
||||
|
||||
<div>
|
||||
<div className='flex justify-between mb-2'>
|
||||
<Text strong className='text-slate-700 dark:text-slate-200'>{t('充值数量')}</Text>
|
||||
{amountLoading ? (
|
||||
<Skeleton.Title style={{ width: '80px', height: '16px' }} />
|
||||
) : (
|
||||
<Text className='text-red-600 font-semibold'>
|
||||
{t('实付金额：')}<span className='font-bold' style={{ color: 'red' }}>{renderAmount()}</span>
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
<InputNumber
|
||||
disabled={!enableOnlineTopUp && !enableStripeTopUp}
|
||||
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 !rounded-lg'
|
||||
formatter={(value) => (value ? `${value}` : '')}
|
||||
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 支付方式选择 */}
|
||||
<div>
|
||||
<Text strong className='block mb-3 text-slate-700 dark:text-slate-200'>
|
||||
{t('选择支付方式')}
|
||||
</Text>
|
||||
<div className={`grid gap-3 ${payMethods.length <= 2
|
||||
? 'grid-cols-1 sm:grid-cols-2'
|
||||
: payMethods.length === 3
|
||||
? 'grid-cols-1 sm:grid-cols-3'
|
||||
: 'grid-cols-2 sm:grid-cols-4'
|
||||
}`}>
|
||||
{payMethods.map((payMethod) => (
|
||||
<Card
|
||||
key={payMethod.type}
|
||||
onClick={() => preTopUp(payMethod.type)}
|
||||
className={`cursor-pointer !rounded-xl transition-all hover:shadow-md ${paymentLoading && payWay === payMethod.type
|
||||
? 'border-blue-500 shadow-md'
|
||||
: 'border-slate-200 hover:border-slate-300 dark:border-slate-600 dark:hover:border-slate-500'
|
||||
} ${(!enableOnlineTopUp && payMethod.type !== 'stripe') ||
|
||||
(!enableStripeTopUp && payMethod.type === 'stripe')
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: ''
|
||||
}`}
|
||||
bodyStyle={{ padding: '12px', textAlign: 'center' }}
|
||||
>
|
||||
{paymentLoading && payWay === payMethod.type ? (
|
||||
<div className='flex flex-col items-center justify-center'>
|
||||
<div className='mb-2'>
|
||||
<div className='animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500'></div>
|
||||
</div>
|
||||
<div className='text-xs text-slate-500 dark:text-slate-400'>{t('处理中')}</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='flex items-center justify-center mb-2'>
|
||||
{payMethod.type === 'zfb' ? (
|
||||
<SiAlipay size={24} color="#1677FF" />
|
||||
) : payMethod.type === 'wx' ? (
|
||||
<SiWechat size={24} color="#07C160" />
|
||||
) : payMethod.type === 'stripe' ? (
|
||||
<SiStripe size={24} color="#635BFF" />
|
||||
) : (
|
||||
<CreditCard size={24} className='text-slate-500' />
|
||||
)}
|
||||
</div>
|
||||
<div className='text-sm font-medium text-slate-700 dark:text-slate-200'>{payMethod.name}</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
) : (
|
||||
<div className='py-8'>
|
||||
<Banner
|
||||
type='warning'
|
||||
description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
|
||||
className='!rounded-xl'
|
||||
closeIcon={null}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TabPane>
|
||||
|
||||
{/* 兑换码充值 Tab */}
|
||||
<TabPane
|
||||
tab={
|
||||
<div className="flex items-center">
|
||||
<Gift size={16} className="mr-2" />
|
||||
{t('兑换码充值')}
|
||||
</div>
|
||||
}
|
||||
itemKey="redeem"
|
||||
>
|
||||
<div className="py-4">
|
||||
<div className='space-y-4'>
|
||||
<Input
|
||||
placeholder={t('请输入兑换码')}
|
||||
value={redemptionCode}
|
||||
onChange={(value) => setRedemptionCode(value)}
|
||||
className='!rounded-lg'
|
||||
prefix={<IconGift />}
|
||||
/>
|
||||
|
||||
<div className='flex flex-col sm:flex-row gap-2'>
|
||||
{topUpLink && (
|
||||
<Button
|
||||
type='secondary'
|
||||
theme='outline'
|
||||
onClick={openTopUpLink}
|
||||
className='flex-1 !rounded-lg !border-slate-300 !text-slate-600 hover:!border-slate-400 hover:!text-slate-700'
|
||||
icon={<LinkIcon size={16} />}
|
||||
>
|
||||
{t('获取兑换码')}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
type='primary'
|
||||
theme='solid'
|
||||
onClick={topUp}
|
||||
disabled={isSubmitting || !redemptionCode}
|
||||
loading={isSubmitting}
|
||||
className='flex-1 !rounded-lg !bg-slate-600 hover:!bg-slate-700'
|
||||
>
|
||||
{isSubmitting ? t('兑换中...') : t('兑换')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default RechargeCard;
|
||||
Reference in New Issue
Block a user