优化完善套餐购买页面

src/components/composites/purchase/shared/billing-method-field.tsx

@@ -0,0 +1,60 @@
+'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>
+  )
+}