61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import FormOption from '../option'
|
|
import {RadioGroup} from '@/components/ui/radio-group'
|
|
import {FormField} from '@/components/ui/form'
|
|
import Image from 'next/image'
|
|
import alipay from '../_assets/alipay.svg'
|
|
import wechat from '../_assets/wechat.svg'
|
|
import balance from '../_assets/balance.svg'
|
|
import RechargeModal from '@/components/composites/recharge'
|
|
|
|
export function FieldPayment(props: {
|
|
balance: number
|
|
}) {
|
|
return (
|
|
<FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
|
|
{({id, field}) => (
|
|
<RadioGroup
|
|
id={id}
|
|
value={field.value}
|
|
onValueChange={field.onChange}
|
|
className="flex flex-col gap-3">
|
|
|
|
<div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
|
|
<p className="flex items-center gap-3">
|
|
<Image src={balance} alt="余额icon"/>
|
|
<span className="text-sm text-gray-500">账户余额</span>
|
|
</p>
|
|
<p className="flex justify-between items-center">
|
|
<span className="text-xl">{props.balance}</span>
|
|
<RechargeModal/>
|
|
</p>
|
|
</div>
|
|
<FormOption
|
|
id={`${id}-balance`}
|
|
value="balance"
|
|
compare={field.value}
|
|
className="p-3 w-full flex-row gap-2 justify-center">
|
|
<Image src={balance} alt="余额 icon"/>
|
|
<span>余额</span>
|
|
</FormOption>
|
|
<FormOption
|
|
id={`${id}-wechat`}
|
|
value="wechat"
|
|
compare={field.value}
|
|
className="p-3 w-full flex-row gap-2 justify-center">
|
|
<Image src={wechat} alt="微信 logo"/>
|
|
<span>微信</span>
|
|
</FormOption>
|
|
<FormOption
|
|
id={`${id}-alipay`}
|
|
value="alipay"
|
|
compare={field.value}
|
|
className="p-3 w-full flex-row gap-2 justify-center">
|
|
<Image src={alipay} alt="支付宝 logo"/>
|
|
<span>支付宝</span>
|
|
</FormOption>
|
|
</RadioGroup>
|
|
)}
|
|
</FormField>
|
|
)
|
|
}
|