Skip to content

phsl / new-api

Go to a project
Commit 4d5e79c9 by Calcium-Ion Committed by GitHub
Options

Merge pull request #1257 from QuantumNous/pay_custom 

feat: 自定义充值方式
parents 1ea674f3 ef6c390a
Showing with 362 additions and 164 deletions
controller/misc.go
...@@ -76,6 +76,7 @@ func GetStatus(c *gin.Context) { ...@@ -76,6 +76,7 @@ func GetStatus(c *gin.Context) {
"demo_site_enabled": operation_setting.DemoSiteEnabled, "demo_site_enabled": operation_setting.DemoSiteEnabled,
"self_use_mode_enabled": operation_setting.SelfUseModeEnabled, "self_use_mode_enabled": operation_setting.SelfUseModeEnabled,
"default_use_auto_group": setting.DefaultUseAutoGroup, "default_use_auto_group": setting.DefaultUseAutoGroup,
"pay_methods": setting.PayMethods,
// 面板启用开关 // 面板启用开关
"api_info_enabled": cs.ApiInfoEnabled, "api_info_enabled": cs.ApiInfoEnabled,
......
model/option.go
...@@ -79,6 +79,7 @@ func InitOptionMap() { ...@@ -79,6 +79,7 @@ func InitOptionMap() {
common.OptionMap["Chats"] = setting.Chats2JsonString() common.OptionMap["Chats"] = setting.Chats2JsonString()
common.OptionMap["AutoGroups"] = setting.AutoGroups2JsonString() common.OptionMap["AutoGroups"] = setting.AutoGroups2JsonString()
common.OptionMap["DefaultUseAutoGroup"] = strconv.FormatBool(setting.DefaultUseAutoGroup) common.OptionMap["DefaultUseAutoGroup"] = strconv.FormatBool(setting.DefaultUseAutoGroup)
common.OptionMap["PayMethods"] = setting.PayMethods2JsonString()
common.OptionMap["GitHubClientId"] = "" common.OptionMap["GitHubClientId"] = ""
common.OptionMap["GitHubClientSecret"] = "" common.OptionMap["GitHubClientSecret"] = ""
common.OptionMap["TelegramBotToken"] = "" common.OptionMap["TelegramBotToken"] = ""
...@@ -388,6 +389,8 @@ func updateOptionMap(key string, value string) (err error) { ...@@ -388,6 +389,8 @@ func updateOptionMap(key string, value string) (err error) {
operation_setting.AutomaticDisableKeywordsFromString(value) operation_setting.AutomaticDisableKeywordsFromString(value)
case "StreamCacheQueueLength": case "StreamCacheQueueLength":
setting.StreamCacheQueueLength, _ = strconv.Atoi(value) setting.StreamCacheQueueLength, _ = strconv.Atoi(value)
case "PayMethods":
err = setting.UpdatePayMethodsByJsonString(value)
} }
return err return err
} }
......
setting/payment.go
package setting package setting
import "encoding/json"
var PayAddress = "" var PayAddress = ""
var CustomCallbackAddress = "" var CustomCallbackAddress = ""
var EpayId = "" var EpayId = ""
var EpayKey = "" var EpayKey = ""
var Price = 7.3 var Price = 7.3
var MinTopUp = 1 var MinTopUp = 1
var PayMethods = []map[string]string{
{
"name": "支付宝",
"color": "rgba(var(--semi-blue-5), 1)",
"type": "zfb",
},
{
"name": "微信",
"color": "rgba(var(--semi-green-5), 1)",
"type": "wx",
},
}
func UpdatePayMethodsByJsonString(jsonString string) error {
PayMethods = make([]map[string]string, 0)
return json.Unmarshal([]byte(jsonString), &PayMethods)
}
func PayMethods2JsonString() string {
jsonBytes, err := json.Marshal(PayMethods)
if err != nil {
return "[]"
}
return string(jsonBytes)
}
func ContainsPayMethod(method string) bool {
for _, payMethod := range PayMethods {
if payMethod["type"] == method {
return true
}
}
return false
}
web/src/components/settings/SystemSetting.js
...@@ -17,7 +17,7 @@ import { ...@@ -17,7 +17,7 @@ import {
removeTrailingSlash, removeTrailingSlash,
showError, showError,
showSuccess, showSuccess,
verifyJSON verifyJSON,
} from '../../helpers'; } from '../../helpers';
import axios from 'axios'; import axios from 'axios';
...@@ -73,6 +73,7 @@ const SystemSetting = () => { ...@@ -73,6 +73,7 @@ const SystemSetting = () => {
LinuxDOOAuthEnabled: '', LinuxDOOAuthEnabled: '',
LinuxDOClientId: '', LinuxDOClientId: '',
LinuxDOClientSecret: '', LinuxDOClientSecret: '',
PayMethods: '',
}); });
const [originInputs, setOriginInputs] = useState({}); const [originInputs, setOriginInputs] = useState({});
...@@ -230,6 +231,12 @@ const SystemSetting = () => { ...@@ -230,6 +231,12 @@ const SystemSetting = () => {
return; return;
} }
} }
if (originInputs['PayMethods'] !== inputs.PayMethods) {
if (!verifyJSON(inputs.PayMethods)) {
showError('充值方式设置不是合法的 JSON 字符串');
return;
}
}
const options = [ const options = [
{ key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) }, { key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) },
...@@ -256,6 +263,9 @@ const SystemSetting = () => { ...@@ -256,6 +263,9 @@ const SystemSetting = () => {
if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) { if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio }); options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
} }
if (originInputs['PayMethods'] !== inputs.PayMethods) {
options.push({ key: 'PayMethods', value: inputs.PayMethods });
}
await updateOptions(options); await updateOptions(options);
}; };
...@@ -658,6 +668,12 @@ const SystemSetting = () => { ...@@ -658,6 +668,12 @@ const SystemSetting = () => {
placeholder='为一个 JSON 文本，键为组名称，值为倍率' placeholder='为一个 JSON 文本，键为组名称，值为倍率'
autosize autosize
/> />
<Form.TextArea
field='PayMethods'
label='充值方式设置'
placeholder='为一个 JSON 文本'
autosize
/>
<Button onClick={submitPayAddress}>更新支付设置</Button> <Button onClick={submitPayAddress}>更新支付设置</Button>
</Form.Section> </Form.Section>
</Card> </Card>
......
web/src/helpers/data.js
...@@ -9,6 +9,7 @@ export function setStatusData(data) { ...@@ -9,6 +9,7 @@ export function setStatusData(data) {
localStorage.setItem('enable_task', data.enable_task); localStorage.setItem('enable_task', data.enable_task);
localStorage.setItem('enable_data_export', data.enable_data_export); localStorage.setItem('enable_data_export', data.enable_data_export);
localStorage.setItem('chats', JSON.stringify(data.chats)); localStorage.setItem('chats', JSON.stringify(data.chats));
localStorage.setItem('pay_methods', JSON.stringify(data.pay_methods));
localStorage.setItem( localStorage.setItem(
'data_export_default_time', 'data_export_default_time',
data.data_export_default_time, data.data_export_default_time,
......
web/src/pages/TopUp/index.js
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
renderQuota, renderQuota,
renderQuotaWithAmount, renderQuotaWithAmount,
copy, copy,
getQuotaPerUnit getQuotaPerUnit,
} from '../../helpers'; } from '../../helpers';
import { import {
Avatar, Avatar,
...@@ -34,7 +34,7 @@ import { ...@@ -34,7 +34,7 @@ import {
Copy, Copy,
Users, Users,
User, User,
Coins Coins,
} from 'lucide-react'; } from 'lucide-react';
const { Text, Title } = Typography; const { Text, Title } = Typography;
...@@ -49,9 +49,15 @@ const TopUp = () => { ...@@ -49,9 +49,15 @@ const TopUp = () => {
const [topUpCode, setTopUpCode] = useState(''); const [topUpCode, setTopUpCode] = useState('');
const [amount, setAmount] = useState(0.0); const [amount, setAmount] = useState(0.0);
const [minTopUp, setMinTopUp] = useState(statusState?.status?.min_topup || 1); const [minTopUp, setMinTopUp] = useState(statusState?.status?.min_topup || 1);
const [topUpCount, setTopUpCount] = useState(statusState?.status?.min_topup || 1); const [topUpCount, setTopUpCount] = useState(
const [topUpLink, setTopUpLink] = useState(statusState?.status?.top_up_link || ''); statusState?.status?.min_topup || 1,
const [enableOnlineTopUp, setEnableOnlineTopUp] = useState(statusState?.status?.enable_online_topup || false); );
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 [priceRatio, setPriceRatio] = useState(statusState?.status?.price || 1);
const [userQuota, setUserQuota] = useState(0); const [userQuota, setUserQuota] = useState(0);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
...@@ -61,6 +67,7 @@ const TopUp = () => { ...@@ -61,6 +67,7 @@ const TopUp = () => {
const [amountLoading, setAmountLoading] = useState(false); const [amountLoading, setAmountLoading] = useState(false);
const [paymentLoading, setPaymentLoading] = useState(false); const [paymentLoading, setPaymentLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [payMethods, setPayMethods] = useState([]);
// 邀请相关状态 // 邀请相关状态
const [affLink, setAffLink] = useState(''); const [affLink, setAffLink] = useState('');
...@@ -76,7 +83,7 @@ const TopUp = () => { ...@@ -76,7 +83,7 @@ const TopUp = () => {
{ value: 100 }, { value: 100 },
{ value: 300 }, { value: 300 },
{ value: 500 }, { value: 500 },
{ value: 1000 } { value: 1000 },
]); ]);
const [selectedPreset, setSelectedPreset] = useState(null); const [selectedPreset, setSelectedPreset] = useState(null);
...@@ -126,7 +133,7 @@ const TopUp = () => { ...@@ -126,7 +133,7 @@ const TopUp = () => {
if (userState.user) { if (userState.user) {
const updatedUser = { const updatedUser = {
...userState.user, ...userState.user,
quota: userState.user.quota + data quota: userState.user.quota + data,
}; };
userDispatch({ type: 'login', payload: updatedUser }); userDispatch({ type: 'login', payload: updatedUser });
} }
...@@ -283,6 +290,34 @@ const TopUp = () => { ...@@ -283,6 +290,34 @@ const TopUp = () => {
} }
getAffLink().then(); getAffLink().then();
setTransferAmount(getQuotaPerUnit()); 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(() => { useEffect(() => {
...@@ -347,12 +382,12 @@ const TopUp = () => { ...@@ -347,12 +382,12 @@ const TopUp = () => {
}; };
return ( return (
<div className="mx-auto relative min-h-screen lg:min-h-0"> <div className='mx-auto relative min-h-screen lg:min-h-0'>
{/* 划转模态框 */} {/* 划转模态框 */}
<Modal <Modal
title={ title={
<div className="flex items-center"> <div className='flex items-center'>
<CreditCard className="mr-2" size={18} /> <CreditCard className='mr-2' size={18} />
{t('划转邀请额度')} {t('划转邀请额度')}
</div> </div>
} }
...@@ -360,22 +395,22 @@ const TopUp = () => { ...@@ -360,22 +395,22 @@ const TopUp = () => {
onOk={transfer} onOk={transfer}
onCancel={handleTransferCancel} onCancel={handleTransferCancel}
maskClosable={false} maskClosable={false}
size="small" size='small'
centered centered
> >
<div className="space-y-4"> <div className='space-y-4'>
<div> <div>
<Typography.Text strong className="block mb-2"> <Typography.Text strong className='block mb-2'>
{t('可用邀请额度')} {t('可用邀请额度')}
</Typography.Text> </Typography.Text>
<Input <Input
value={renderQuota(userState?.user?.aff_quota)} value={renderQuota(userState?.user?.aff_quota)}
disabled disabled
size="large" size='large'
/> />
</div> </div>
<div> <div>
<Typography.Text strong className="block mb-2"> <Typography.Text strong className='block mb-2'>
{t('划转额度')} ({t('最低') + renderQuota(getQuotaPerUnit())}) {t('划转额度')} ({t('最低') + renderQuota(getQuotaPerUnit())})
</Typography.Text> </Typography.Text>
<InputNumber <InputNumber
...@@ -383,8 +418,8 @@ const TopUp = () => { ...@@ -383,8 +418,8 @@ const TopUp = () => {
max={userState?.user?.aff_quota || 0} max={userState?.user?.aff_quota || 0}
value={transferAmount} value={transferAmount}
onChange={(value) => setTransferAmount(value)} onChange={(value) => setTransferAmount(value)}
size="large" size='large'
className="w-full" className='w-full'
/> />
</div> </div>
</div> </div>
...@@ -393,8 +428,8 @@ const TopUp = () => { ...@@ -393,8 +428,8 @@ const TopUp = () => {
{/* 充值确认模态框 */} {/* 充值确认模态框 */}
<Modal <Modal
title={ title={
<div className="flex items-center"> <div className='flex items-center'>
<CreditCard className="mr-2" size={18} /> <CreditCard className='mr-2' size={18} />
{t('充值确认')} {t('充值确认')}
</div> </div>
} }
...@@ -402,57 +437,80 @@ const TopUp = () => { ...@@ -402,57 +437,80 @@ const TopUp = () => {
onOk={onlineTopUp} onOk={onlineTopUp}
onCancel={handleCancel} onCancel={handleCancel}
maskClosable={false} maskClosable={false}
size="small" size='small'
centered centered
confirmLoading={confirmLoading} confirmLoading={confirmLoading}
> >
<div className="space-y-4"> <div className='space-y-4'>
<div className="flex justify-between items-center py-2"> <div className='flex justify-between items-center py-2'>
<Text strong>{t('充值数量')}：</Text> <Text strong>{t('充值数量')}：</Text>
<Text>{renderQuotaWithAmount(topUpCount)}</Text> <Text>{renderQuotaWithAmount(topUpCount)}</Text>
</div> </div>
<div className="flex justify-between items-center py-2"> <div className='flex justify-between items-center py-2'>
<Text strong>{t('实付金额')}：</Text> <Text strong>{t('实付金额')}：</Text>
{amountLoading ? ( {amountLoading ? (
<Skeleton.Title style={{ width: '60px', height: '16px' }} /> <Skeleton.Title style={{ width: '60px', height: '16px' }} />
) : ( ) : (
<Text type="danger" strong>{renderAmount()}</Text> <Text type='danger' strong>
{renderAmount()}
</Text>
)} )}
</div> </div>
<div className="flex justify-between items-center py-2"> <div className='flex justify-between items-center py-2'>
<Text strong>{t('支付方式')}：</Text> <Text strong>{t('支付方式')}：</Text>
<Text> <Text>
{payWay === 'zfb' ? ( {(() => {
<div className="flex items-center"> const payMethod = payMethods.find(
<SiAlipay className="mr-1" size={16} /> (method) => method.type === payWay,
{t('支付宝')} );
</div> if (payMethod) {
) : ( return (
<div className="flex items-center"> <div className='flex items-center'>
<SiWechat className="mr-1" size={16} /> {payMethod.type === 'zfb' ? (
{t('微信')} <SiAlipay className='mr-1' size={16} />
</div> ) : 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> </Text>
</div> </div>
</div> </div>
</Modal> </Modal>
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6"> <div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
{/* 左侧充值区域 */} {/* 左侧充值区域 */}
<div className="lg:col-span-7 space-y-6 w-full"> <div className='lg:col-span-7 space-y-6 w-full'>
{/* 在线充值卡片 */} {/* 在线充值卡片 */}
<Card <Card
className="!rounded-2xl" className='!rounded-2xl'
shadows='always' shadows='always'
bordered={false} bordered={false}
header={ header={
<div className="px-5 py-4 pb-0"> <div className='px-5 py-4 pb-0'>
<div className="flex items-center justify-between"> <div className='flex items-center justify-between'>
<div className="flex items-center"> <div className='flex items-center'>
<Avatar <Avatar
className="mr-3 shadow-md flex-shrink-0" className='mr-3 shadow-md flex-shrink-0'
color="blue" color='blue'
> >
<CreditCard size={24} /> <CreditCard size={24} />
</Avatar> </Avatar>
...@@ -460,21 +518,23 @@ const TopUp = () => { ...@@ -460,21 +518,23 @@ const TopUp = () => {
<Title heading={5} style={{ margin: 0 }}> <Title heading={5} style={{ margin: 0 }}>
{t('在线充值')} {t('在线充值')}
</Title> </Title>
<Text type="tertiary" className="text-sm"> <Text type='tertiary' className='text-sm'>
{t('快速方便的充值方式')} {t('快速方便的充值方式')}
</Text> </Text>
</div> </div>
</div> </div>
<div className="flex items-center"> <div className='flex items-center'>
{userDataLoading ? ( {userDataLoading ? (
<Skeleton.Paragraph style={{ width: '120px' }} rows={1} /> <Skeleton.Paragraph style={{ width: '120px' }} rows={1} />
) : ( ) : (
<Text type="tertiary" className="hidden sm:block"> <Text type='tertiary' className='hidden sm:block'>
<div className="flex items-center"> <div className='flex items-center'>
<User size={14} className="mr-1" /> <User size={14} className='mr-1' />
<span className="hidden md:inline">{getUsername()} ({getUserRole()})</span> <span className='hidden md:inline'>
<span className="md:hidden">{getUsername()}</span> {getUsername()} ({getUserRole()})
</span>
<span className='md:hidden'>{getUsername()}</span>
</div> </div>
</Text> </Text>
)} )}
...@@ -483,29 +543,33 @@ const TopUp = () => { ...@@ -483,29 +543,33 @@ const TopUp = () => {
</div> </div>
} }
> >
<div className="space-y-4"> <div className='space-y-4'>
{/* 账户余额信息 */} {/* 账户余额信息 */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-2"> <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-2'>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<Text type="tertiary" className="mb-1"> <Text type='tertiary' className='mb-1'>
{t('当前余额')} {t('当前余额')}
</Text> </Text>
{userDataLoading ? ( {userDataLoading ? (
<Skeleton.Title style={{ width: '100px', height: '30px' }} /> <Skeleton.Title
style={{ width: '100px', height: '30px' }}
/>
) : ( ) : (
<div className="text-xl font-semibold mt-2"> <div className='text-xl font-semibold mt-2'>
{renderQuota(userState?.user?.quota || userQuota)} {renderQuota(userState?.user?.quota || userQuota)}
</div> </div>
)} )}
</Card> </Card>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<Text type="tertiary" className="mb-1"> <Text type='tertiary' className='mb-1'>
{t('历史消耗')} {t('历史消耗')}
</Text> </Text>
{userDataLoading ? ( {userDataLoading ? (
<Skeleton.Title style={{ width: '100px', height: '30px' }} /> <Skeleton.Title
style={{ width: '100px', height: '30px' }}
/>
) : ( ) : (
<div className="text-xl font-semibold mt-2"> <div className='text-xl font-semibold mt-2'>
{renderQuota(userState?.user?.used_quota || 0)} {renderQuota(userState?.user?.used_quota || 0)}
</div> </div>
)} )}
...@@ -516,47 +580,59 @@ const TopUp = () => { ...@@ -516,47 +580,59 @@ const TopUp = () => {
<> <>
{/* 预设充值额度卡片网格 */} {/* 预设充值额度卡片网格 */}
<div> <div>
<Text strong className="block mb-3">{t('选择充值额度')}</Text> <Text strong className='block mb-3'>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3"> {t('选择充值额度')}
</Text>
<div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3'>
{presetAmounts.map((preset, index) => ( {presetAmounts.map((preset, index) => (
<Card <Card
key={index} key={index}
onClick={() => selectPresetAmount(preset)} onClick={() => selectPresetAmount(preset)}
className={`cursor-pointer !rounded-2xl transition-all hover:shadow-md ${selectedPreset === preset.value className={`cursor-pointer !rounded-2xl transition-all hover:shadow-md ${
? 'border-blue-500' selectedPreset === preset.value
: 'border-gray-200 hover:border-gray-300' ? 'border-blue-500'
}`} : 'border-gray-200 hover:border-gray-300'
}`}
bodyStyle={{ textAlign: 'center' }} bodyStyle={{ textAlign: 'center' }}
> >
<div className="font-medium text-lg flex items-center justify-center mb-1"> <div className='font-medium text-lg flex items-center justify-center mb-1'>
<Coins size={16} className="mr-0.5" /> <Coins size={16} className='mr-0.5' />
{formatLargeNumber(preset.value)} {formatLargeNumber(preset.value)}
</div> </div>
<div className="text-xs text-gray-500"> <div className='text-xs text-gray-500'>
{t('实付')} ￥{(preset.value * priceRatio).toFixed(2)} {t('实付')} ￥
{(preset.value * priceRatio).toFixed(2)}
</div> </div>
</Card> </Card>
))} ))}
</div> </div>
</div> </div>
{/* 桌面端显示的自定义金额和支付按钮 */} {/* 桌面端显示的自定义金额和支付按钮 */}
<div className="hidden md:block space-y-4"> <div className='hidden md:block space-y-4'>
<Divider style={{ margin: '24px 0' }}> <Divider style={{ margin: '24px 0' }}>
<Text className="text-sm font-medium">{t('或输入自定义金额')}</Text> <Text className='text-sm font-medium'>
{t('或输入自定义金额')}
</Text>
</Divider> </Divider>
<div> <div>
<div className="flex justify-between mb-2"> <div className='flex justify-between mb-2'>
<Text strong>{t('充值数量')}</Text> <Text strong>{t('充值数量')}</Text>
{amountLoading ? ( {amountLoading ? (
<Skeleton.Title style={{ width: '80px', height: '16px' }} /> <Skeleton.Title
style={{ width: '80px', height: '16px' }}
/>
) : ( ) : (
<Text type="tertiary">{t('实付金额：') + renderAmount()}</Text> <Text type='tertiary'>
{t('实付金额：') + renderAmount()}
</Text>
)} )}
</div> </div>
<InputNumber <InputNumber
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)} placeholder={
t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
}
value={topUpCount} value={topUpCount}
min={minTopUp} min={minTopUp}
max={999999999} max={999999999}
...@@ -576,36 +652,63 @@ const TopUp = () => { ...@@ -576,36 +652,63 @@ const TopUp = () => {
getAmount(1); getAmount(1);
} }
}} }}
size="large" size='large'
className="w-full" className='w-full'
formatter={(value) => value ? `${value}` : ''} formatter={(value) => (value ? `${value}` : '')}
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0} parser={(value) =>
value ? parseInt(value.replace(/[^\d]/g, '')) : 0
}
/> />
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<Button {/* <Button
type="primary" type='primary'
onClick={() => preTopUp('zfb')} onClick={() => preTopUp('zfb')}
size="large" size='large'
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'zfb'} loading={paymentLoading && payWay === 'zfb'}
icon={<SiAlipay size={18} />} icon={<SiAlipay size={18} />}
style={{ height: '44px' }} style={{ height: '44px' }}
> >
<span className="ml-2">{t('支付宝')}</span> <span className='ml-2'>{t('支付宝')}</span>
</Button> </Button>
<Button <Button
type="primary" type='primary'
onClick={() => preTopUp('wx')} onClick={() => preTopUp('wx')}
size="large" size='large'
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'wx'} loading={paymentLoading && payWay === 'wx'}
icon={<SiWechat size={18} />} icon={<SiWechat size={18} />}
style={{ height: '44px' }} style={{ height: '44px' }}
> >
<span className="ml-2">{t('微信')}</span> <span className='ml-2'>{t('微信')}</span>
</Button> </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>
</div> </div>
</> </>
...@@ -613,39 +716,41 @@ const TopUp = () => { ...@@ -613,39 +716,41 @@ const TopUp = () => {
{!enableOnlineTopUp && ( {!enableOnlineTopUp && (
<Banner <Banner
type="warning" type='warning'
description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')} description={t(
'管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。',
)}
closeIcon={null} closeIcon={null}
className="!rounded-2xl" className='!rounded-2xl'
/> />
)} )}
<Divider style={{ margin: '24px 0' }}> <Divider style={{ margin: '24px 0' }}>
<Text className="text-sm font-medium">{t('兑换码充值')}</Text> <Text className='text-sm font-medium'>{t('兑换码充值')}</Text>
</Divider> </Divider>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<div className="flex items-start mb-4"> <div className='flex items-start mb-4'>
<Gift size={16} className="mr-2 mt-0.5" /> <Gift size={16} className='mr-2 mt-0.5' />
<Text strong>{t('使用兑换码快速充值')}</Text> <Text strong>{t('使用兑换码快速充值')}</Text>
</div> </div>
<div className="mb-4"> <div className='mb-4'>
<Input <Input
placeholder={t('请输入兑换码')} placeholder={t('请输入兑换码')}
value={redemptionCode} value={redemptionCode}
onChange={(value) => setRedemptionCode(value)} onChange={(value) => setRedemptionCode(value)}
size="large" size='large'
/> />
</div> </div>
<div className="flex flex-col sm:flex-row gap-3"> <div className='flex flex-col sm:flex-row gap-3'>
{topUpLink && ( {topUpLink && (
<Button <Button
type="secondary" type='secondary'
onClick={openTopUpLink} onClick={openTopUpLink}
size="large" size='large'
className="flex-1" className='flex-1'
icon={<LinkIcon size={16} />} icon={<LinkIcon size={16} />}
style={{ height: '40px' }} style={{ height: '40px' }}
> >
...@@ -653,12 +758,12 @@ const TopUp = () => { ...@@ -653,12 +758,12 @@ const TopUp = () => {
</Button> </Button>
)} )}
<Button <Button
type="primary" type='primary'
onClick={topUp} onClick={topUp}
disabled={isSubmitting || !redemptionCode} disabled={isSubmitting || !redemptionCode}
loading={isSubmitting} loading={isSubmitting}
size="large" size='large'
className="flex-1" className='flex-1'
style={{ height: '40px' }} style={{ height: '40px' }}
> >
{isSubmitting ? t('兑换中...') : t('兑换')} {isSubmitting ? t('兑换中...') : t('兑换')}
...@@ -670,18 +775,18 @@ const TopUp = () => { ...@@ -670,18 +775,18 @@ const TopUp = () => {
</div> </div>
{/* 右侧邀请信息卡片 */} {/* 右侧邀请信息卡片 */}
<div className="lg:col-span-5"> <div className='lg:col-span-5'>
<Card <Card
className="!rounded-2xl" className='!rounded-2xl'
shadows='always' shadows='always'
bordered={false} bordered={false}
header={ header={
<div className="px-5 py-4 pb-0"> <div className='px-5 py-4 pb-0'>
<div className="flex items-center justify-between"> <div className='flex items-center justify-between'>
<div className="flex items-center"> <div className='flex items-center'>
<Avatar <Avatar
className="mr-3 shadow-md flex-shrink-0" className='mr-3 shadow-md flex-shrink-0'
color="green" color='green'
> >
<Users size={24} /> <Users size={24} />
</Avatar> </Avatar>
...@@ -689,7 +794,7 @@ const TopUp = () => { ...@@ -689,7 +794,7 @@ const TopUp = () => {
<Title heading={5} style={{ margin: 0 }}> <Title heading={5} style={{ margin: 0 }}>
{t('邀请奖励')} {t('邀请奖励')}
</Title> </Title>
<Text type="tertiary" className="text-sm"> <Text type='tertiary' className='text-sm'>
{t('邀请好友获得额外奖励')} {t('邀请好友获得额外奖励')}
</Text> </Text>
</div> </div>
...@@ -698,53 +803,56 @@ const TopUp = () => { ...@@ -698,53 +803,56 @@ const TopUp = () => {
</div> </div>
} }
> >
<div className="space-y-6"> <div className='space-y-6'>
<div className="grid grid-cols-1 gap-4"> <div className='grid grid-cols-1 gap-4'>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<div className="flex justify-between items-center"> <div className='flex justify-between items-center'>
<Text type="tertiary">{t('待使用收益')}</Text> <Text type='tertiary'>{t('待使用收益')}</Text>
<Button <Button
type="primary" type='primary'
theme="solid" theme='solid'
size="small" size='small'
disabled={!userState?.user?.aff_quota || userState?.user?.aff_quota <= 0} disabled={
!userState?.user?.aff_quota ||
userState?.user?.aff_quota <= 0
}
onClick={() => setOpenTransfer(true)} onClick={() => setOpenTransfer(true)}
> >
{t('划转到余额')} {t('划转到余额')}
</Button> </Button>
</div> </div>
<div className="text-2xl font-semibold mt-2"> <div className='text-2xl font-semibold mt-2'>
{renderQuota(userState?.user?.aff_quota || 0)} {renderQuota(userState?.user?.aff_quota || 0)}
</div> </div>
</Card> </Card>
<div className="grid grid-cols-2 gap-4"> <div className='grid grid-cols-2 gap-4'>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<Text type="tertiary">{t('总收益')}</Text> <Text type='tertiary'>{t('总收益')}</Text>
<div className="text-xl font-semibold mt-2"> <div className='text-xl font-semibold mt-2'>
{renderQuota(userState?.user?.aff_history_quota || 0)} {renderQuota(userState?.user?.aff_history_quota || 0)}
</div> </div>
</Card> </Card>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<Text type="tertiary">{t('邀请人数')}</Text> <Text type='tertiary'>{t('邀请人数')}</Text>
<div className="text-xl font-semibold mt-2 flex items-center"> <div className='text-xl font-semibold mt-2 flex items-center'>
<Users size={16} className="mr-1" /> <Users size={16} className='mr-1' />
{userState?.user?.aff_count || 0} {userState?.user?.aff_count || 0}
</div> </div>
</Card> </Card>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className='space-y-4'>
<Title heading={6}>{t('邀请链接')}</Title> <Title heading={6}>{t('邀请链接')}</Title>
<Input <Input
value={affLink} value={affLink}
readOnly readOnly
size="large" size='large'
suffix={ suffix={
<Button <Button
type="primary" type='primary'
theme="light" theme='light'
onClick={handleAffLinkClick} onClick={handleAffLinkClick}
icon={<Copy size={14} />} icon={<Copy size={14} />}
> >
...@@ -753,24 +861,24 @@ const TopUp = () => { ...@@ -753,24 +861,24 @@ const TopUp = () => {
} }
/> />
<div className="mt-4"> <div className='mt-4'>
<Card className="!rounded-2xl"> <Card className='!rounded-2xl'>
<div className="space-y-4"> <div className='space-y-4'>
<div className="flex items-start"> <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> <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"> <Text type='tertiary' className='text-sm leading-6'>
{t('邀请好友注册，好友充值后您可获得相应奖励')} {t('邀请好友注册，好友充值后您可获得相应奖励')}
</Text> </Text>
</div> </div>
<div className="flex items-start"> <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> <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"> <Text type='tertiary' className='text-sm leading-6'>
{t('通过划转功能将奖励额度转入到您的账户余额中')} {t('通过划转功能将奖励额度转入到您的账户余额中')}
</Text> </Text>
</div> </div>
<div className="flex items-start"> <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> <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"> <Text type='tertiary' className='text-sm leading-6'>
{t('邀请的好友越多，获得的奖励越多')} {t('邀请的好友越多，获得的奖励越多')}
</Text> </Text>
</div> </div>
...@@ -785,20 +893,27 @@ const TopUp = () => { ...@@ -785,20 +893,27 @@ const TopUp = () => {
{/* 移动端底部固定的自定义金额和支付区域 */} {/* 移动端底部固定的自定义金额和支付区域 */}
{enableOnlineTopUp && ( {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
<div className="space-y-4"> 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>
<div className="flex justify-between mb-2"> <div className='flex justify-between mb-2'>
<Text strong>{t('充值数量')}</Text> <Text strong>{t('充值数量')}</Text>
{amountLoading ? ( {amountLoading ? (
<Skeleton.Title style={{ width: '80px', height: '16px' }} /> <Skeleton.Title style={{ width: '80px', height: '16px' }} />
) : ( ) : (
<Text type="tertiary">{t('实付金额：') + renderAmount()}</Text> <Text type='tertiary'>
{t('实付金额：') + renderAmount()}
</Text>
)} )}
</div> </div>
<InputNumber <InputNumber
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
placeholder={t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)} placeholder={
t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
}
value={topUpCount} value={topUpCount}
min={minTopUp} min={minTopUp}
max={999999999} max={999999999}
...@@ -818,31 +933,56 @@ const TopUp = () => { ...@@ -818,31 +933,56 @@ const TopUp = () => {
getAmount(1); getAmount(1);
} }
}} }}
className="w-full" className='w-full'
formatter={(value) => value ? `${value}` : ''} formatter={(value) => (value ? `${value}` : '')}
parser={(value) => value ? parseInt(value.replace(/[^\d]/g, '')) : 0} parser={(value) =>
value ? parseInt(value.replace(/[^\d]/g, '')) : 0
}
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className='grid grid-cols-2 gap-4'>
<Button {/* <Button
type="primary" type='primary'
onClick={() => preTopUp('zfb')} onClick={() => preTopUp('zfb')}
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'zfb'} loading={paymentLoading && payWay === 'zfb'}
icon={<SiAlipay size={18} />} icon={<SiAlipay size={18} />}
> >
<span className="ml-2">{t('支付宝')}</span> <span className='ml-2'>{t('支付宝')}</span>
</Button> </Button>
<Button <Button
type="primary" type='primary'
onClick={() => preTopUp('wx')} onClick={() => preTopUp('wx')}
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'wx'} loading={paymentLoading && payWay === 'wx'}
icon={<SiWechat size={18} />} icon={<SiWechat size={18} />}
> >
<span className="ml-2">{t('微信')}</span> <span className='ml-2'>{t('微信')}</span>
</Button> </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>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment