Skip to content

phsl / new-api

Go to a project
Commit 2aae0482 by CaIon
Options

Merge remote-tracking branch 'origin/alpha' into alpha

parents f9a72212 cfeb0c28
Showing with 150 additions and 43 deletions
web/src/pages/TopUp/index.js
...@@ -588,8 +588,7 @@ const TopUp = () => { ...@@ -588,8 +588,7 @@ const TopUp = () => {
<Card <Card
key={index} key={index}
onClick={() => selectPresetAmount(preset)} onClick={() => selectPresetAmount(preset)}
className={`cursor-pointer !rounded-2xl transition-all hover:shadow-md ${ className={`cursor-pointer !rounded-2xl transition-all hover:shadow-md ${selectedPreset === preset.value
selectedPreset === preset.value
? 'border-blue-500' ? 'border-blue-500'
: 'border-gray-200 hover:border-gray-300' : 'border-gray-200 hover:border-gray-300'
}`} }`}
...@@ -661,29 +660,111 @@ const TopUp = () => { ...@@ -661,29 +660,111 @@ const TopUp = () => {
/> />
</div> </div>
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'> <div>
{/* <Button <Text strong className='block mb-3'>
{t('选择支付方式')}
</Text>
{payMethods.length === 2 ? (
<div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
{payMethods.map((payMethod) => (
<Button
key={payMethod.type}
type='primary' type='primary'
onClick={() => preTopUp('zfb')} onClick={() => preTopUp(payMethod.type)}
size='large' size='large'
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'zfb'} loading={paymentLoading && payWay === payMethod.type}
icon={<SiAlipay size={18} />} icon={
style={{ height: '44px' }} payMethod.type === 'zfb' ? (
<SiAlipay size={16} />
) : payMethod.type === 'wx' ? (
<SiWechat size={16} />
) : (
<CreditCard size={16} />
)
}
style={{
height: '40px',
color: payMethod.color,
}}
className='transition-all hover:shadow-md w-full'
> >
<span className='ml-2'>{t('支付宝')}</span> <span className='ml-1'>{payMethod.name}</span>
</Button> </Button>
))}
</div>
) : payMethods.length === 3 ? (
<div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
{payMethods.map((payMethod) => (
<Button <Button
key={payMethod.type}
type='primary' type='primary'
onClick={() => preTopUp('wx')} onClick={() => preTopUp(payMethod.type)}
size='large' size='large'
disabled={!enableOnlineTopUp} disabled={!enableOnlineTopUp}
loading={paymentLoading && payWay === 'wx'} loading={paymentLoading && payWay === payMethod.type}
icon={<SiWechat size={18} />} icon={
style={{ height: '44px' }} payMethod.type === 'zfb' ? (
<SiAlipay size={16} />
) : payMethod.type === 'wx' ? (
<SiWechat size={16} />
) : (
<CreditCard size={16} />
)
}
style={{
height: '40px',
color: payMethod.color,
}}
className='transition-all hover:shadow-md w-full'
> >
<span className='ml-2'>{t('微信')}</span> <span className='ml-1'>{payMethod.name}</span>
</Button> */} </Button>
))}
</div>
) : payMethods.length > 3 ? (
<div className='grid grid-cols-2 sm:grid-cols-4 gap-3'>
{payMethods.map((payMethod) => (
<Card
key={payMethod.type}
onClick={() => preTopUp(payMethod.type)}
disabled={!enableOnlineTopUp}
className={`cursor-pointer !rounded-xl p-0 transition-all hover:shadow-md ${paymentLoading && payWay === payMethod.type
? 'border-blue-400'
: 'border-gray-200 hover:border-gray-300'
}`}
bodyStyle={{
padding: '10px',
textAlign: 'center',
opacity: !enableOnlineTopUp ? 0.5 : 1
}}
>
{paymentLoading && payWay === payMethod.type ? (
<div className='flex flex-col items-center justify-center h-full'>
<div className='mb-1'>
<div className='animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500'></div>
</div>
<div className='text-xs text-gray-500'>{t('处理中')}</div>
</div>
) : (
<>
<div className='flex items-center justify-center mb-1'>
{payMethod.type === 'zfb' ? (
<SiAlipay size={20} color={payMethod.color} />
) : payMethod.type === 'wx' ? (
<SiWechat size={20} color={payMethod.color} />
) : (
<CreditCard size={20} color={payMethod.color} />
)}
</div>
<div className='text-sm font-medium'>{payMethod.name}</div>
</>
)}
</Card>
))}
</div>
) : (
<div className='grid grid-cols-1 gap-3'>
{payMethods.map((payMethod) => ( {payMethods.map((payMethod) => (
<Button <Button
key={payMethod.type} key={payMethod.type}
...@@ -694,22 +775,25 @@ const TopUp = () => { ...@@ -694,22 +775,25 @@ const TopUp = () => {
loading={paymentLoading && payWay === payMethod.type} loading={paymentLoading && payWay === payMethod.type}
icon={ icon={
payMethod.type === 'zfb' ? ( payMethod.type === 'zfb' ? (
<SiAlipay size={18} /> <SiAlipay size={16} />
) : payMethod.type === 'wx' ? ( ) : payMethod.type === 'wx' ? (
<SiWechat size={18} /> <SiWechat size={16} />
) : ( ) : (
<CreditCard size={18} /> <CreditCard size={16} />
) )
} }
style={{ style={{
height: '44px', height: '40px',
color: payMethod.color, color: payMethod.color,
}} }}
className='transition-all hover:shadow-md w-full'
> >
<span className='ml-2'>{payMethod.name}</span> <span className='ml-1'>{payMethod.name}</span>
</Button> </Button>
))} ))}
</div> </div>
)}
</div>
</div> </div>
</> </>
)} )}
...@@ -941,25 +1025,9 @@ const TopUp = () => { ...@@ -941,25 +1025,9 @@ const TopUp = () => {
/> />
</div> </div>
<div className='grid grid-cols-2 gap-4'> <div>
{/* <Button {payMethods.length === 2 ? (
type='primary' <div className='grid grid-cols-2 gap-3'>
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) => ( {payMethods.map((payMethod) => (
<Button <Button
key={payMethod.type} key={payMethod.type}
...@@ -969,21 +1037,60 @@ const TopUp = () => { ...@@ -969,21 +1037,60 @@ const TopUp = () => {
loading={paymentLoading && payWay === payMethod.type} loading={paymentLoading && payWay === payMethod.type}
icon={ icon={
payMethod.type === 'zfb' ? ( payMethod.type === 'zfb' ? (
<SiAlipay size={18} /> <SiAlipay size={16} />
) : payMethod.type === 'wx' ? ( ) : payMethod.type === 'wx' ? (
<SiWechat size={18} /> <SiWechat size={16} />
) : ( ) : (
<CreditCard size={18} /> <CreditCard size={16} />
) )
} }
style={{ style={{
color: payMethod.color, color: payMethod.color,
}} }}
className='h-10'
> >
<span className='ml-2'>{payMethod.name}</span> <span className='ml-1'>{payMethod.name}</span>
</Button> </Button>
))} ))}
</div> </div>
) : (
<div className='grid grid-cols-4 gap-2'>
{payMethods.map((payMethod) => (
<Card
key={payMethod.type}
onClick={() => preTopUp(payMethod.type)}
disabled={!enableOnlineTopUp}
className={`cursor-pointer !rounded-xl p-0 transition-all ${paymentLoading && payWay === payMethod.type
? 'border-blue-400'
: 'border-gray-200'
}`}
bodyStyle={{
padding: '8px',
textAlign: 'center',
opacity: !enableOnlineTopUp ? 0.5 : 1
}}
>
{paymentLoading && payWay === payMethod.type ? (
<div className='animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mx-auto'></div>
) : (
<>
<div className='flex justify-center'>
{payMethod.type === 'zfb' ? (
<SiAlipay size={18} color={payMethod.color} />
) : payMethod.type === 'wx' ? (
<SiWechat size={18} color={payMethod.color} />
) : (
<CreditCard size={18} color={payMethod.color} />
)}
</div>
<div className='text-xs mt-1'>{payMethod.name}</div>
</>
)}
</Card>
))}
</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