232 lines
9.1 KiB
TypeScript
232 lines
9.1 KiB
TypeScript
'use client'
|
||
import {FormField} from '@/components/ui/form'
|
||
import {RadioGroup} from '@/components/ui/radio-group'
|
||
import {Input} from '@/components/ui/input'
|
||
import {Button} from '@/components/ui/button'
|
||
import {Minus, Plus} from 'lucide-react'
|
||
import FormOption from '@/components/composites/purchase/option'
|
||
import Image from 'next/image'
|
||
import check from '../_assets/check.svg'
|
||
import {useFormContext, useWatch} from 'react-hook-form'
|
||
import {Schema} from '@/components/composites/purchase/short/form'
|
||
import {Card} from '@/components/ui/card'
|
||
import {useEffect} from 'react'
|
||
|
||
export default function Center() {
|
||
const form = useFormContext<Schema>()
|
||
const type = useWatch({name: 'type'})
|
||
useEffect(() => {
|
||
if (type === '1') {
|
||
form.setValue('daily_limit', 2000)
|
||
}
|
||
else {
|
||
form.setValue('quota', 10000)
|
||
}
|
||
}, [type, form])
|
||
return (
|
||
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
|
||
|
||
{/* 计费方式 */}
|
||
<FormField<Schema, 'type'>
|
||
className="flex flex-col gap-4"
|
||
name="type"
|
||
label="计费方式">
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
id={id}
|
||
defaultValue={field.value}
|
||
onValueChange={field.onChange}
|
||
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>
|
||
|
||
{/* IP 时效 */}
|
||
<FormField<Schema, 'live'>
|
||
className="space-y-4"
|
||
name="live"
|
||
label="IP 时效">
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
id={id}
|
||
defaultValue={field.value}
|
||
onValueChange={field.onChange}
|
||
className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
|
||
|
||
<FormOption id={`${id}-3`} value="180" label="3 分钟" description="￥0.005/IP" compare={field.value}/>
|
||
<FormOption id={`${id}-5`} value="300" label="5 分钟" description="￥0.01/IP" compare={field.value}/>
|
||
<FormOption id={`${id}-10`} value="600" label="10 分钟" description="￥0.02/IP" compare={field.value}/>
|
||
<FormOption id={`${id}-20`} value="1200" label="20 分钟" description="￥0.03/IP" compare={field.value}/>
|
||
<FormOption id={`${id}-30`} value="1800" label="30 分钟" description="￥0.06/IP" compare={field.value}/>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 根据套餐类型显示不同表单项 */}
|
||
{type === '2' ? (
|
||
/* 包量：IP 购买数量 */
|
||
<FormField
|
||
className="space-y-4"
|
||
name="quota"
|
||
label="IP 购买数量">
|
||
{({id, field}) => (
|
||
<div className="flex gap-2 items-center">
|
||
<Button
|
||
theme="outline"
|
||
type="button"
|
||
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
|
||
onClick={() => form.setValue('quota', Math.max(10000, Number(field.value) - 5000))}
|
||
disabled={Number(field.value) === 10000}>
|
||
<Minus/>
|
||
</Button>
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
type="number"
|
||
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
|
||
min={10000}
|
||
step={5000}
|
||
onBlur={(e) => {
|
||
const value = Number(e.target.value)
|
||
if (value < 10000) {
|
||
form.setValue('quota', 10000)
|
||
}
|
||
}}
|
||
/>
|
||
<Button
|
||
theme="outline"
|
||
type="button"
|
||
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
|
||
onClick={() => form.setValue('quota', Number(field.value) + 5000)}>
|
||
<Plus/>
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
) : (
|
||
<>
|
||
{/* 包时：套餐时效 */}
|
||
<FormField
|
||
className="space-y-4"
|
||
name="expire"
|
||
label="套餐时效">
|
||
{({id, field}) => (
|
||
<RadioGroup
|
||
id={id}
|
||
defaultValue={field.value}
|
||
onValueChange={field.onChange}
|
||
className="flex gap-4 flex-wrap">
|
||
|
||
<FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
|
||
<FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
|
||
<FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
|
||
<FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
|
||
<FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
|
||
<FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
|
||
</RadioGroup>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 包时：每日提取上限 */}
|
||
<FormField
|
||
className="space-y-4"
|
||
name="daily_limit"
|
||
label="每日提取上限">
|
||
{({id, field}) => (
|
||
<div className="flex gap-2 items-center">
|
||
<Button
|
||
theme="outline"
|
||
type="button"
|
||
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
|
||
onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
|
||
disabled={Number(field.value) === 2_000}>
|
||
<Minus/>
|
||
</Button>
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
type="number"
|
||
className="w-40 h-10 border border-gray-200 rounded-sm text-center"
|
||
min={2_000}
|
||
step={1_000}
|
||
onBlur={(e) => {
|
||
const value = Number(e.target.value)
|
||
if (value < 2_000) {
|
||
form.setValue('daily_limit', 2_000)
|
||
}
|
||
}}
|
||
/>
|
||
<Button
|
||
theme="outline"
|
||
type="button"
|
||
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
|
||
onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
|
||
<Plus/>
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
</>
|
||
)}
|
||
|
||
{/* 产品特性 */}
|
||
<div className="space-y-6">
|
||
<h3>产品特性</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 md:gap-y-6">
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">支持高并发提取</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">指定省份、城市或混播</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">账密＋白名单验证</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">完备的API接口</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">IP时效3-30分钟(可定制)</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">IP资源定期筛选</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">完备的API接口</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">包量/包时计费方式</span>
|
||
</p>
|
||
<p className="flex gap-2 items-center">
|
||
<Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
|
||
<span className="text-sm text-gray-500">每日去重量：500万</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
)
|
||
}
|