💄 style(TopUp): Optimize payment method buttons layout based on quantity
Enhance the UI of payment method selection area with responsive layouts: - Use 2-column grid when exactly 2 payment methods are present - Use 3-column grid for 3 payment methods - Use compact card layout for more than 3 payment methods - Full-width button for single payment method This improves the visual balance across different device sizes and payment provider configurations, ensuring buttons fill their grid cells appropriately with the w-full class.
This commit is contained in:
Apple\Apple
@@ -588,11 +588,10 @@ 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'
|
}`}
|
||||||
}`}
|
|
||||||
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'>
|
||||||
@@ -661,54 +660,139 @@ const TopUp = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
|
<div>
|
||||||
{/* <Button
|
<Text strong className='block mb-3'>
|
||||||
type='primary'
|
{t('选择支付方式')}
|
||||||
onClick={() => preTopUp('zfb')}
|
</Text>
|
||||||
size='large'
|
{payMethods.length === 2 ? (
|
||||||
disabled={!enableOnlineTopUp}
|
<div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
|
||||||
loading={paymentLoading && payWay === 'zfb'}
|
{payMethods.map((payMethod) => (
|
||||||
icon={<SiAlipay size={18} />}
|
<Button
|
||||||
style={{ height: '44px' }}
|
key={payMethod.type}
|
||||||
>
|
type='primary'
|
||||||
<span className='ml-2'>{t('支付宝')}</span>
|
onClick={() => preTopUp(payMethod.type)}
|
||||||
</Button>
|
size='large'
|
||||||
<Button
|
disabled={!enableOnlineTopUp}
|
||||||
type='primary'
|
loading={paymentLoading && payWay === payMethod.type}
|
||||||
onClick={() => preTopUp('wx')}
|
icon={
|
||||||
size='large'
|
payMethod.type === 'zfb' ? (
|
||||||
disabled={!enableOnlineTopUp}
|
<SiAlipay size={16} />
|
||||||
loading={paymentLoading && payWay === 'wx'}
|
) : payMethod.type === 'wx' ? (
|
||||||
icon={<SiWechat size={18} />}
|
<SiWechat size={16} />
|
||||||
style={{ height: '44px' }}
|
) : (
|
||||||
>
|
<CreditCard size={16} />
|
||||||
<span className='ml-2'>{t('微信')}</span>
|
)
|
||||||
</Button> */}
|
}
|
||||||
{payMethods.map((payMethod) => (
|
style={{
|
||||||
<Button
|
height: '40px',
|
||||||
key={payMethod.type}
|
color: payMethod.color,
|
||||||
type='primary'
|
}}
|
||||||
onClick={() => preTopUp(payMethod.type)}
|
className='transition-all hover:shadow-md w-full'
|
||||||
size='large'
|
>
|
||||||
disabled={!enableOnlineTopUp}
|
<span className='ml-1'>{payMethod.name}</span>
|
||||||
loading={paymentLoading && payWay === payMethod.type}
|
</Button>
|
||||||
icon={
|
))}
|
||||||
payMethod.type === 'zfb' ? (
|
</div>
|
||||||
<SiAlipay size={18} />
|
) : payMethods.length === 3 ? (
|
||||||
) : payMethod.type === 'wx' ? (
|
<div className='grid grid-cols-1 sm:grid-cols-3 gap-3'>
|
||||||
<SiWechat size={18} />
|
{payMethods.map((payMethod) => (
|
||||||
) : (
|
<Button
|
||||||
<CreditCard size={18} />
|
key={payMethod.type}
|
||||||
)
|
type='primary'
|
||||||
}
|
onClick={() => preTopUp(payMethod.type)}
|
||||||
style={{
|
size='large'
|
||||||
height: '44px',
|
disabled={!enableOnlineTopUp}
|
||||||
color: payMethod.color,
|
loading={paymentLoading && payWay === payMethod.type}
|
||||||
}}
|
icon={
|
||||||
>
|
payMethod.type === 'zfb' ? (
|
||||||
<span className='ml-2'>{payMethod.name}</span>
|
<SiAlipay size={16} />
|
||||||
</Button>
|
) : 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-1'>{payMethod.name}</span>
|
||||||
|
</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) => (
|
||||||
|
<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={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-1'>{payMethod.name}</span>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@@ -941,48 +1025,71 @@ 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')}
|
{payMethods.map((payMethod) => (
|
||||||
disabled={!enableOnlineTopUp}
|
<Button
|
||||||
loading={paymentLoading && payWay === 'zfb'}
|
key={payMethod.type}
|
||||||
icon={<SiAlipay size={18} />}
|
type='primary'
|
||||||
>
|
onClick={() => preTopUp(payMethod.type)}
|
||||||
<span className='ml-2'>{t('支付宝')}</span>
|
disabled={!enableOnlineTopUp}
|
||||||
</Button>
|
loading={paymentLoading && payWay === payMethod.type}
|
||||||
<Button
|
icon={
|
||||||
type='primary'
|
payMethod.type === 'zfb' ? (
|
||||||
onClick={() => preTopUp('wx')}
|
<SiAlipay size={16} />
|
||||||
disabled={!enableOnlineTopUp}
|
) : payMethod.type === 'wx' ? (
|
||||||
loading={paymentLoading && payWay === 'wx'}
|
<SiWechat size={16} />
|
||||||
icon={<SiWechat size={18} />}
|
) : (
|
||||||
>
|
<CreditCard size={16} />
|
||||||
<span className='ml-2'>{t('微信')}</span>
|
)
|
||||||
</Button> */}
|
}
|
||||||
{payMethods.map((payMethod) => (
|
style={{
|
||||||
<Button
|
color: payMethod.color,
|
||||||
key={payMethod.type}
|
}}
|
||||||
type='primary'
|
className='h-10'
|
||||||
onClick={() => preTopUp(payMethod.type)}
|
>
|
||||||
disabled={!enableOnlineTopUp}
|
<span className='ml-1'>{payMethod.name}</span>
|
||||||
loading={paymentLoading && payWay === payMethod.type}
|
</Button>
|
||||||
icon={
|
))}
|
||||||
payMethod.type === 'zfb' ? (
|
</div>
|
||||||
<SiAlipay size={18} />
|
) : (
|
||||||
) : payMethod.type === 'wx' ? (
|
<div className='grid grid-cols-4 gap-2'>
|
||||||
<SiWechat size={18} />
|
{payMethods.map((payMethod) => (
|
||||||
) : (
|
<Card
|
||||||
<CreditCard size={18} />
|
key={payMethod.type}
|
||||||
)
|
onClick={() => preTopUp(payMethod.type)}
|
||||||
}
|
disabled={!enableOnlineTopUp}
|
||||||
style={{
|
className={`cursor-pointer !rounded-xl p-0 transition-all ${paymentLoading && payWay === payMethod.type
|
||||||
color: payMethod.color,
|
? 'border-blue-400'
|
||||||
}}
|
: 'border-gray-200'
|
||||||
>
|
}`}
|
||||||
<span className='ml-2'>{payMethod.name}</span>
|
bodyStyle={{
|
||||||
</Button>
|
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>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user