97 lines
2.9 KiB
TypeScript
97 lines
2.9 KiB
TypeScript
'use client'
|
|
import {FormField} from '@/components/ui/form'
|
|
import {RadioGroup} from '@/components/ui/radio-group'
|
|
import FormOption from '@/components/composites/purchase/option'
|
|
import {Schema} from '@/components/composites/purchase/long/form'
|
|
import {useWatch} from 'react-hook-form'
|
|
import {Card} from '@/components/ui/card'
|
|
import {BillingMethodField} from '../shared/billing-method-field'
|
|
import {FeatureList} from '../shared/feature-list'
|
|
import {NumberStepperField} from '../shared/number-stepper-field'
|
|
import {getPurchaseSkuPrice} from '../shared/sku'
|
|
|
|
export default function Center({priceMap, expireList, liveList}: {
|
|
priceMap: Map<string, string>
|
|
liveList: string[]
|
|
expireList: string[]
|
|
}) {
|
|
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
|
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
|
|
|
|
return (
|
|
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
|
|
<BillingMethodField expireList={expireList} timeDailyLimit={100}/>
|
|
|
|
{/* IP 时效 */}
|
|
<FormField<Schema, 'live'>
|
|
className="space-y-4"
|
|
name="live"
|
|
label="IP 时效">
|
|
{({id, field}) => (
|
|
<RadioGroup
|
|
id={id}
|
|
value={field.value}
|
|
onValueChange={field.onChange}
|
|
className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
|
|
{liveList.map((live) => {
|
|
const price = getPurchaseSkuPrice(priceMap, {
|
|
mode: type,
|
|
live,
|
|
expire: String(expire),
|
|
})
|
|
return (
|
|
<FormOption
|
|
key={live}
|
|
id={`${id}-${live}`}
|
|
value={live}
|
|
label={`${Number(live) / 60} 小时`}
|
|
description={price && `￥${price}/IP`}
|
|
compare={field.value}
|
|
/>
|
|
)
|
|
})}
|
|
</RadioGroup>
|
|
)}
|
|
</FormField>
|
|
|
|
{/* 套餐时效 */}
|
|
{type === '1' && (
|
|
<FormField className="space-y-4" name="expire" label="套餐时效">
|
|
{({id, field}) => (
|
|
<RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="flex gap-4 flex-wrap">
|
|
{expireList.map(day => (
|
|
<FormOption
|
|
key={day}
|
|
id={`${id}-${day}`}
|
|
value={day}
|
|
label={`${day} 天`}
|
|
compare={field.value}
|
|
/>
|
|
))}
|
|
</RadioGroup>
|
|
)}
|
|
</FormField>
|
|
)}
|
|
|
|
{/* 每日提取上限/购买数量 */}
|
|
{type === '1' ? (
|
|
<NumberStepperField
|
|
name="daily_limit"
|
|
label="每日提取上限"
|
|
min={100}
|
|
step={100}
|
|
/>
|
|
) : (
|
|
<NumberStepperField
|
|
name="quota"
|
|
label="IP 购买数量"
|
|
min={500}
|
|
step={100}
|
|
/>
|
|
)}
|
|
|
|
<FeatureList/>
|
|
</Card>
|
|
)
|
|
}
|