feat(payment): add payment settings configuration and update payment methods handling
This commit is contained in:
CaIon
@@ -21,6 +21,7 @@ import React, { useRef } from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Typography,
|
||||
Tag,
|
||||
Card,
|
||||
Button,
|
||||
Banner,
|
||||
@@ -29,7 +30,7 @@ import {
|
||||
Space,
|
||||
Row,
|
||||
Col,
|
||||
Spin,
|
||||
Spin, Tooltip
|
||||
} from '@douyinfe/semi-ui';
|
||||
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
|
||||
import { CreditCard, Coins, Wallet, BarChart2, TrendingUp } from 'lucide-react';
|
||||
@@ -68,6 +69,7 @@ const RechargeCard = ({
|
||||
userState,
|
||||
renderQuota,
|
||||
statusLoading,
|
||||
topupInfo,
|
||||
}) => {
|
||||
const onlineFormApiRef = useRef(null);
|
||||
const redeemFormApiRef = useRef(null);
|
||||
@@ -261,44 +263,58 @@ const RechargeCard = ({
|
||||
</Col>
|
||||
<Col xs={24} sm={24} md={24} lg={14} xl={14}>
|
||||
<Form.Slot label={t('选择支付方式')}>
|
||||
<Space wrap>
|
||||
{payMethods.map((payMethod) => (
|
||||
<Button
|
||||
key={payMethod.type}
|
||||
theme='outline'
|
||||
type='tertiary'
|
||||
onClick={() => preTopUp(payMethod.type)}
|
||||
disabled={
|
||||
(!enableOnlineTopUp &&
|
||||
payMethod.type !== 'stripe') ||
|
||||
(!enableStripeTopUp &&
|
||||
payMethod.type === 'stripe')
|
||||
}
|
||||
loading={
|
||||
paymentLoading && payWay === payMethod.type
|
||||
}
|
||||
icon={
|
||||
payMethod.type === 'alipay' ? (
|
||||
<SiAlipay size={18} color='#1677FF' />
|
||||
) : payMethod.type === 'wxpay' ? (
|
||||
<SiWechat size={18} color='#07C160' />
|
||||
) : payMethod.type === 'stripe' ? (
|
||||
<SiStripe size={18} color='#635BFF' />
|
||||
) : (
|
||||
<CreditCard
|
||||
size={18}
|
||||
color={
|
||||
payMethod.color ||
|
||||
'var(--semi-color-text-2)'
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
{payMethod.name}
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
{payMethods && payMethods.length > 0 ? (
|
||||
<Space wrap>
|
||||
{payMethods.map((payMethod) => {
|
||||
const minTopupVal = Number(payMethod.min_topup) || 0;
|
||||
const isStripe = payMethod.type === 'stripe';
|
||||
const disabled =
|
||||
(!enableOnlineTopUp && !isStripe) ||
|
||||
(!enableStripeTopUp && isStripe) ||
|
||||
minTopupVal > Number(topUpCount || 0);
|
||||
|
||||
const buttonEl = (
|
||||
<Button
|
||||
key={payMethod.type}
|
||||
theme='outline'
|
||||
type='tertiary'
|
||||
onClick={() => preTopUp(payMethod.type)}
|
||||
disabled={disabled}
|
||||
loading={paymentLoading && payWay === payMethod.type}
|
||||
icon={
|
||||
payMethod.type === 'alipay' ? (
|
||||
<SiAlipay size={18} color='#1677FF' />
|
||||
) : payMethod.type === 'wxpay' ? (
|
||||
<SiWechat size={18} color='#07C160' />
|
||||
) : payMethod.type === 'stripe' ? (
|
||||
<SiStripe size={18} color='#635BFF' />
|
||||
) : (
|
||||
<CreditCard
|
||||
size={18}
|
||||
color={payMethod.color || 'var(--semi-color-text-2)'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
className='!rounded-lg !px-4 !py-2'
|
||||
>
|
||||
{payMethod.name}
|
||||
</Button>
|
||||
);
|
||||
|
||||
return disabled && minTopupVal > Number(topUpCount || 0) ? (
|
||||
<Tooltip content={t('此支付方式最低充值金额为') + ' ' + minTopupVal} key={payMethod.type}>
|
||||
{buttonEl}
|
||||
</Tooltip>
|
||||
) : (
|
||||
<React.Fragment key={payMethod.type}>{buttonEl}</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
) : (
|
||||
<div className='text-gray-500 text-sm p-3 bg-gray-50 rounded-lg border border-dashed border-gray-300'>
|
||||
{t('暂无可用的支付方式，请联系管理员配置')}
|
||||
</div>
|
||||
)}
|
||||
</Form.Slot>
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -306,41 +322,59 @@ const RechargeCard = ({
|
||||
|
||||
{(enableOnlineTopUp || enableStripeTopUp) && (
|
||||
<Form.Slot label={t('选择充值额度')}>
|
||||
<Space wrap>
|
||||
{presetAmounts.map((preset, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
theme={
|
||||
selectedPreset === preset.value
|
||||
? 'solid'
|
||||
: 'outline'
|
||||
}
|
||||
type={
|
||||
selectedPreset === preset.value
|
||||
? 'primary'
|
||||
: 'tertiary'
|
||||
}
|
||||
onClick={() => {
|
||||
selectPresetAmount(preset);
|
||||
onlineFormApiRef.current?.setValue(
|
||||
'topUpCount',
|
||||
preset.value,
|
||||
);
|
||||
}}
|
||||
className='!rounded-lg !py-2 !px-3'
|
||||
>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Coins size={14} className='opacity-80' />
|
||||
<span className='font-medium'>
|
||||
{formatLargeNumber(preset.value)}
|
||||
</span>
|
||||
<span className='text-xs text-gray-500'>
|
||||
￥{(preset.value * priceRatio).toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</Space>
|
||||
<div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2'>
|
||||
{presetAmounts.map((preset, index) => {
|
||||
const discount = preset.discount || topupInfo?.discount?.[preset.value] || 1.0;
|
||||
const originalPrice = preset.value * priceRatio;
|
||||
const discountedPrice = originalPrice * discount;
|
||||
const hasDiscount = discount < 1.0;
|
||||
const actualPay = discountedPrice;
|
||||
const save = originalPrice - discountedPrice;
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={index}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
border: selectedPreset === preset.value
|
||||
? '2px solid var(--semi-color-primary)'
|
||||
: '1px solid var(--semi-color-border)',
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}}
|
||||
bodyStyle={{ padding: '12px' }}
|
||||
onClick={() => {
|
||||
selectPresetAmount(preset);
|
||||
onlineFormApiRef.current?.setValue(
|
||||
'topUpCount',
|
||||
preset.value,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Typography.Title heading={6} style={{ margin: '0 0 8px 0' }}>
|
||||
{formatLargeNumber(preset.value)} {t('美元额度')}
|
||||
{hasDiscount && (
|
||||
<Tag style={{ marginLeft: 4 }} color="green">
|
||||
{t('折').includes('off') ?
|
||||
((1 - discount) * 100).toFixed(1) :
|
||||
(discount * 10).toFixed(1)}{t('折')}
|
||||
</Tag>
|
||||
)}
|
||||
</Typography.Title>
|
||||
<div style={{
|
||||
color: 'var(--semi-color-text-2)',
|
||||
fontSize: '12px',
|
||||
margin: '4px 0'
|
||||
}}>
|
||||
{t('实付')} {actualPay.toFixed(2)}，
|
||||
{hasDiscount ? `${t('节省')} ${save.toFixed(2)}` : `${t('节省')} 0.00`}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Form.Slot>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -80,6 +80,12 @@ const TopUp = () => {
|
||||
// 预设充值额度选项
|
||||
const [presetAmounts, setPresetAmounts] = useState([]);
|
||||
const [selectedPreset, setSelectedPreset] = useState(null);
|
||||
|
||||
// 充值配置信息
|
||||
const [topupInfo, setTopupInfo] = useState({
|
||||
amount_options: [],
|
||||
discount: {}
|
||||
});
|
||||
|
||||
const topUp = async () => {
|
||||
if (redemptionCode === '') {
|
||||
@@ -248,6 +254,99 @@ const TopUp = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 获取充值配置信息
|
||||
const getTopupInfo = async () => {
|
||||
try {
|
||||
const res = await API.get('/api/user/topup/info');
|
||||
const { message, data, success } = res.data;
|
||||
if (success) {
|
||||
setTopupInfo({
|
||||
amount_options: data.amount_options || [],
|
||||
discount: data.discount || {}
|
||||
});
|
||||
|
||||
// 处理支付方式
|
||||
let payMethods = data.pay_methods || [];
|
||||
try {
|
||||
if (typeof payMethods === 'string') {
|
||||
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) => {
|
||||
// 规范化最小充值数
|
||||
const normalizedMinTopup = Number(method.min_topup);
|
||||
method.min_topup = Number.isFinite(normalizedMinTopup) ? normalizedMinTopup : 0;
|
||||
|
||||
// Stripe 的最小充值从后端字段回填
|
||||
if (method.type === 'stripe' && (!method.min_topup || method.min_topup <= 0)) {
|
||||
const stripeMin = Number(data.stripe_min_topup);
|
||||
if (Number.isFinite(stripeMin)) {
|
||||
method.min_topup = stripeMin;
|
||||
}
|
||||
}
|
||||
|
||||
if (!method.color) {
|
||||
if (method.type === 'alipay') {
|
||||
method.color = 'rgba(var(--semi-blue-5), 1)';
|
||||
} else if (method.type === 'wxpay') {
|
||||
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 支付，添加到支付方法列表
|
||||
// 这个逻辑现在由后端处理，如果 Stripe 启用，后端会在 pay_methods 中包含它
|
||||
|
||||
setPayMethods(payMethods);
|
||||
const enableStripeTopUp = data.enable_stripe_topup || false;
|
||||
const enableOnlineTopUp = data.enable_online_topup || false;
|
||||
const minTopUpValue = enableOnlineTopUp? data.min_topup : enableStripeTopUp? data.stripe_min_topup : 1;
|
||||
setEnableOnlineTopUp(enableOnlineTopUp);
|
||||
setEnableStripeTopUp(enableStripeTopUp);
|
||||
setMinTopUp(minTopUpValue);
|
||||
setTopUpCount(minTopUpValue);
|
||||
|
||||
// 如果没有自定义充值数量选项，根据最小充值金额生成预设充值额度选项
|
||||
if (topupInfo.amount_options.length === 0) {
|
||||
setPresetAmounts(generatePresetAmounts(minTopUpValue));
|
||||
}
|
||||
|
||||
// 初始化显示实付金额
|
||||
getAmount(minTopUpValue);
|
||||
} catch (e) {
|
||||
console.log('解析支付方式失败:', e);
|
||||
setPayMethods([]);
|
||||
}
|
||||
|
||||
// 如果有自定义充值数量选项，使用它们替换默认的预设选项
|
||||
if (data.amount_options && data.amount_options.length > 0) {
|
||||
const customPresets = data.amount_options.map(amount => ({
|
||||
value: amount,
|
||||
discount: data.discount[amount] || 1.0
|
||||
}));
|
||||
setPresetAmounts(customPresets);
|
||||
}
|
||||
} else {
|
||||
console.error('获取充值配置失败:', data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取充值配置异常:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取邀请链接
|
||||
const getAffLink = async () => {
|
||||
const res = await API.get('/api/user/aff');
|
||||
@@ -290,52 +389,7 @@ const TopUp = () => {
|
||||
getUserQuota().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 === 'alipay') {
|
||||
method.color = 'rgba(var(--semi-blue-5), 1)';
|
||||
} else if (method.type === 'wxpay') {
|
||||
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 (affFetchedRef.current) return;
|
||||
@@ -343,20 +397,18 @@ const TopUp = () => {
|
||||
getAffLink().then();
|
||||
}, []);
|
||||
|
||||
// 在 statusState 可用时获取充值信息
|
||||
useEffect(() => {
|
||||
getTopupInfo().then();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (statusState?.status) {
|
||||
const minTopUpValue = statusState.status.min_topup || 1;
|
||||
setMinTopUp(minTopUpValue);
|
||||
setTopUpCount(minTopUpValue);
|
||||
// const minTopUpValue = statusState.status.min_topup || 1;
|
||||
// setMinTopUp(minTopUpValue);
|
||||
// setTopUpCount(minTopUpValue);
|
||||
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);
|
||||
|
||||
// 根据最小充值金额生成预设充值额度选项
|
||||
setPresetAmounts(generatePresetAmounts(minTopUpValue));
|
||||
// 初始化显示实付金额
|
||||
getAmount(minTopUpValue);
|
||||
|
||||
setStatusLoading(false);
|
||||
}
|
||||
@@ -431,7 +483,11 @@ const TopUp = () => {
|
||||
const selectPresetAmount = (preset) => {
|
||||
setTopUpCount(preset.value);
|
||||
setSelectedPreset(preset.value);
|
||||
setAmount(preset.value * priceRatio);
|
||||
|
||||
// 计算实际支付金额，考虑折扣
|
||||
const discount = preset.discount || topupInfo.discount[preset.value] || 1.0;
|
||||
const discountedAmount = preset.value * priceRatio * discount;
|
||||
setAmount(discountedAmount);
|
||||
};
|
||||
|
||||
// 格式化大数字显示
|
||||
@@ -475,6 +531,8 @@ const TopUp = () => {
|
||||
renderAmount={renderAmount}
|
||||
payWay={payWay}
|
||||
payMethods={payMethods}
|
||||
amountNumber={amount}
|
||||
discountRate={topupInfo?.discount?.[topUpCount] || 1.0}
|
||||
/>
|
||||
|
||||
{/* 用户信息头部 */}
|
||||
@@ -512,6 +570,7 @@ const TopUp = () => {
|
||||
userState={userState}
|
||||
renderQuota={renderQuota}
|
||||
statusLoading={statusLoading}
|
||||
topupInfo={topupInfo}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -36,7 +36,13 @@ const PaymentConfirmModal = ({
|
||||
renderAmount,
|
||||
payWay,
|
||||
payMethods,
|
||||
// 新增：用于显示折扣明细
|
||||
amountNumber,
|
||||
discountRate,
|
||||
}) => {
|
||||
const hasDiscount = discountRate && discountRate > 0 && discountRate < 1 && amountNumber > 0;
|
||||
const originalAmount = hasDiscount ? (amountNumber / discountRate) : 0;
|
||||
const discountAmount = hasDiscount ? (originalAmount - amountNumber) : 0;
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
@@ -71,11 +77,38 @@ const PaymentConfirmModal = ({
|
||||
{amountLoading ? (
|
||||
<Skeleton.Title style={{ width: '60px', height: '16px' }} />
|
||||
) : (
|
||||
<Text strong className='font-bold' style={{ color: 'red' }}>
|
||||
{renderAmount()}
|
||||
</Text>
|
||||
<div className='flex items-baseline space-x-2'>
|
||||
<Text strong className='font-bold' style={{ color: 'red' }}>
|
||||
{renderAmount()}
|
||||
</Text>
|
||||
{hasDiscount && (
|
||||
<Text size='small' className='text-rose-500'>
|
||||
{Math.round(discountRate * 100)}%
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{hasDiscount && !amountLoading && (
|
||||
<>
|
||||
<div className='flex justify-between items-center'>
|
||||
<Text className='text-slate-500 dark:text-slate-400'>
|
||||
{t('原价')}：
|
||||
</Text>
|
||||
<Text delete className='text-slate-500 dark:text-slate-400'>
|
||||
{`${originalAmount.toFixed(2)} ${t('元')}`}
|
||||
</Text>
|
||||
</div>
|
||||
<div className='flex justify-between items-center'>
|
||||
<Text className='text-slate-500 dark:text-slate-400'>
|
||||
{t('优惠')}：
|
||||
</Text>
|
||||
<Text className='text-emerald-600 dark:text-emerald-400'>
|
||||
{`- ${discountAmount.toFixed(2)} ${t('元')}`}
|
||||
</Text>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className='flex justify-between items-center'>
|
||||
<Text strong className='text-slate-700 dark:text-slate-200'>
|
||||
{t('支付方式')}：
|
||||
|
||||
Reference in New Issue
Block a user