61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import {useFormContext} from 'react-hook-form'
|
||
|
|
import {FormField} from '@/components/ui/form'
|
||
|
|
import {RadioGroup} from '@/components/ui/radio-group'
|
||
|
|
import FormOption from '../option'
|
||
|
|
import {PurchaseFormValues} from './form-values'
|
||
|
|
|
||
|
|
export function BillingMethodField(props: {
|
||
|
|
expireList: string[]
|
||
|
|
timeDailyLimit: number
|
||
|
|
}) {
|
||
|
|
const {setValue} = useFormContext<PurchaseFormValues>()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormField<PurchaseFormValues, 'type'>
|
||
|
|
className="flex flex-col gap-4"
|
||
|
|
name="type"
|
||
|
|
label="计费方式"
|
||
|
|
>
|
||
|
|
{({id, field}) => (
|
||
|
|
<RadioGroup
|
||
|
|
id={id}
|
||
|
|
value={field.value}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
field.onChange(value)
|
||
|
|
|
||
|
|
if (value === '2') {
|
||
|
|
setValue('expire', '0')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (props.expireList.length > 0) {
|
||
|
|
setValue('expire', props.expireList[0])
|
||
|
|
}
|
||
|
|
|
||
|
|
setValue('daily_limit', props.timeDailyLimit)
|
||
|
|
}}
|
||
|
|
className="flex gap-4 max-md:flex-col"
|
||
|
|
>
|
||
|
|
<FormOption
|
||
|
|
id={`${id}-2`}
|
||
|
|
value="2"
|
||
|
|
label="包量套餐"
|
||
|
|
description="适用于短期或不定期高提取业务场景"
|
||
|
|
compare={field.value}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FormOption
|
||
|
|
id={`${id}-1`}
|
||
|
|
value="1"
|
||
|
|
label="包时套餐"
|
||
|
|
description="适用于每日提取量稳定的业务场景"
|
||
|
|
compare={field.value}
|
||
|
|
/>
|
||
|
|
</RadioGroup>
|
||
|
|
)}
|
||
|
|
</FormField>
|
||
|
|
)
|
||
|
|
}
|