重构项目结构，将数据层集中在 lib 包中；resource 类型更新，支持多个子套餐类型分别表示；新增长效套餐的购买流程，以及已购查询功能
This commit is contained in:
210
src/components/composites/purchase/long/center.tsx
Normal file
210
src/components/composites/purchase/long/center.tsx
Normal file
@@ -0,0 +1,210 @@
|
||||
'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 '@/components/composites/purchase/_assets/check.svg'
|
||||
import {Schema} from '@/components/composites/purchase/long/form'
|
||||
import {useFormContext} from 'react-hook-form'
|
||||
|
||||
export default function Center() {
|
||||
const form = useFormContext<Schema>()
|
||||
const type = form.watch('type')
|
||||
|
||||
return (
|
||||
<div className={`flex-auto p-8 flex flex-col gap-8 relative`}>
|
||||
|
||||
{/* 计费方式 */}
|
||||
<FormField
|
||||
className={`flex flex-col gap-4`}
|
||||
name={`type`}
|
||||
label={`计费方式`}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
id={id}
|
||||
defaultValue={field.value}
|
||||
onValueChange={field.onChange}
|
||||
className={`flex gap-4`}>
|
||||
|
||||
<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
|
||||
className={`space-y-4`}
|
||||
name={`live`}
|
||||
label={`IP 时效`}>
|
||||
{({id, field}) => (
|
||||
<RadioGroup
|
||||
id={id}
|
||||
defaultValue={field.value}
|
||||
onValueChange={field.onChange}
|
||||
className={`flex gap-4 flex-wrap`}>
|
||||
|
||||
<FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
|
||||
<FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
|
||||
<FormOption id={`${id}-8`} value="8" label="8 小时" description="￥1.2/IP" compare={field.value}/>
|
||||
<FormOption id={`${id}-12`} value="12" label="12 小时" description="￥1.8/IP" compare={field.value}/>
|
||||
<FormOption id={`${id}-24`} value="24" label="24 小时" description="￥3.5/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(10_000, Number(field.value) - 5_000))}
|
||||
disabled={Number(field.value) === 10_000}>
|
||||
<Minus/>
|
||||
</Button>
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
type="number"
|
||||
className={`w-40 h-10 border border-gray-200 rounded-sm text-center`}
|
||||
min={10_000}
|
||||
step={5_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('quota', Number(field.value) + 5_000)}>
|
||||
<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}
|
||||
/>
|
||||
<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-3 auto-rows-fr 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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user