265 lines
9.8 KiB
TypeScript
265 lines
9.8 KiB
TypeScript
'use client'
|
||
import {useState} from 'react'
|
||
import Image from 'next/image'
|
||
import {useRouter} from 'next/navigation'
|
||
import {useForm} from 'react-hook-form'
|
||
import {zodResolver} from '@hookform/resolvers/zod'
|
||
import {z} from 'zod'
|
||
import {toast} from 'sonner'
|
||
import HomePage from '@/components/home/page'
|
||
import Wrap from '@/components/wrap'
|
||
import {Form, FormField} from '@/components/ui/form'
|
||
import {Input} from '@/components/ui/input'
|
||
import {Button} from '@/components/ui/button'
|
||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select'
|
||
import {merge} from '@/lib/utils'
|
||
import {submitInquiry} from '@/actions/inquiry'
|
||
import group from './_assets/Group.webp'
|
||
import SelfDesc from '@/components/features/self-desc'
|
||
|
||
const formSchema = z.object({
|
||
company: z.string().min(2, '企业名称至少2个字符'),
|
||
name: z.string().min(2, '联系人姓名至少2个字符'),
|
||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入正确的11位手机号码'),
|
||
usage: z.string().min(1, '请选择您需要的用量'),
|
||
purpose: z.string().min(2, '请输入用途说明').max(200, '用途说明不超过200字符'),
|
||
})
|
||
|
||
type FormValues = z.infer<typeof formSchema>
|
||
|
||
export default function CustomPage() {
|
||
const router = useRouter()
|
||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||
|
||
const form = useForm<FormValues>({
|
||
resolver: zodResolver(formSchema),
|
||
defaultValues: {
|
||
company: '',
|
||
name: '',
|
||
phone: '',
|
||
usage: '',
|
||
purpose: '',
|
||
},
|
||
})
|
||
|
||
const onSubmit = async (data: FormValues) => {
|
||
setIsSubmitting(true)
|
||
try {
|
||
const result = await submitInquiry(data)
|
||
if (result.success) {
|
||
toast.success('提交成功！我们的专属顾问会在24小时内联系您')
|
||
form.reset()
|
||
}
|
||
else {
|
||
toast.error(result.message || '提交失败，请稍后重试')
|
||
}
|
||
}
|
||
catch (error) {
|
||
toast.error('网络错误，请稍后重试')
|
||
}
|
||
finally {
|
||
setIsSubmitting(false)
|
||
}
|
||
}
|
||
|
||
const scrollToForm = () => {
|
||
const formElement = document.getElementById('inquiry-form')
|
||
if (formElement) {
|
||
formElement.scrollIntoView({behavior: 'smooth', block: 'start'})
|
||
}
|
||
}
|
||
|
||
return (
|
||
<HomePage
|
||
path={[
|
||
{label: '业务定制', href: '/custom'},
|
||
]}
|
||
>
|
||
<Wrap className="flex flex-col gap-16">
|
||
{/* 1. 顶部介绍区 */}
|
||
<SelfDesc onInquiry={() => {
|
||
document.getElementById('inquiry-form')?.scrollIntoView({behavior: 'smooth', block: 'start'})
|
||
}}/>
|
||
|
||
{/* 2. 表单区 */}
|
||
<section id="inquiry-form" className="bg-white rounded-lg p-6 lg:p-12">
|
||
<div className="text-center mb-8 lg:mb-12">
|
||
<h2 className="text-2xl lg:text-3xl font-semibold">业务定制</h2>
|
||
<p className="text-gray-500 mt-2 text-sm lg:text-base">
|
||
请填写您的企业信息，我们的专属顾问将在24小时内与您联系
|
||
</p>
|
||
</div>
|
||
<Form form={form} handler={form.handleSubmit(onSubmit)}>
|
||
<div className="mx-auto max-w-2xl space-y-6">
|
||
{/* 企业名称 */}
|
||
<FormField name="companyName">
|
||
{({id, field}) => (
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
|
||
<label
|
||
htmlFor={id}
|
||
className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
|
||
>
|
||
<span className="text-red-500">*</span>
|
||
<span>企业名称</span>
|
||
</label>
|
||
<div className="flex-1 lg:max-w-md">
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
placeholder="请输入企业名称"
|
||
disabled={isSubmitting}
|
||
aria-required="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 联系人姓名 */}
|
||
<FormField name="contactName">
|
||
{({id, field}) => (
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
|
||
<label
|
||
htmlFor={id}
|
||
className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
|
||
>
|
||
<span className="text-red-500">*</span>
|
||
<span>联系人姓名</span>
|
||
</label>
|
||
<div className="flex-1 lg:max-w-md">
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
placeholder="请输入联系人姓名"
|
||
disabled={isSubmitting}
|
||
aria-required="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 联系人手机号码 */}
|
||
<FormField name="phone">
|
||
{({id, field}) => (
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
|
||
<label
|
||
htmlFor={id}
|
||
className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
|
||
>
|
||
<span className="text-red-500">*</span>
|
||
<span>联系人手机号</span>
|
||
</label>
|
||
<div className="flex-1 lg:max-w-md">
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
type="tel"
|
||
placeholder="请输入11位手机号码"
|
||
disabled={isSubmitting}
|
||
aria-required="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 每月需求用量 */}
|
||
<FormField name="monthlyUsage">
|
||
{({id, field}) => (
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
|
||
<label
|
||
htmlFor={id}
|
||
className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
|
||
>
|
||
<span className="text-red-500">*</span>
|
||
<span>每月需求用量</span>
|
||
</label>
|
||
<div className="flex-1 lg:max-w-md">
|
||
<Select
|
||
onValueChange={field.onChange}
|
||
value={field.value}
|
||
disabled={isSubmitting}
|
||
>
|
||
<SelectTrigger id={id} aria-required="true">
|
||
<SelectValue placeholder="请选择您需要的用量"/>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="less20">小于20万</SelectItem>
|
||
<SelectItem value="20-100">20万~100万</SelectItem>
|
||
<SelectItem value="100-500">100万~500万</SelectItem>
|
||
<SelectItem value="more500">大于500万</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
|
||
{/* 用途 */}
|
||
<FormField name="purpose">
|
||
{({id, field}) => (
|
||
<div className="flex flex-col lg:flex-row lg:items-start lg:gap-4">
|
||
<label
|
||
htmlFor={id}
|
||
className="flex items-center gap-1 lg:w-32 lg:text-right lg:pt-2 text-sm"
|
||
>
|
||
<span className="text-red-500">*</span>
|
||
<span>用途</span>
|
||
</label>
|
||
<div className="flex-1 lg:max-w-md">
|
||
<Input
|
||
{...field}
|
||
id={id}
|
||
placeholder="请输入用途，例如：数据采集、市场调研等"
|
||
disabled={isSubmitting}
|
||
aria-required="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</FormField>
|
||
|
||
<div className="pt-4 flex justify-center">
|
||
<Button
|
||
type="submit"
|
||
className="bg-blue-600 hover:bg-blue-700 px-12 py-2.5"
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? '提交中...' : '提交'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Form>
|
||
</section>
|
||
|
||
{/* 3. 底部引导区 */}
|
||
<section className="relative rounded-lg overflow-hidden h-48 lg:h-56">
|
||
<Image
|
||
src={group}
|
||
alt="立即试用背景"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<div className="w-full max-w-4xl px-6 flex flex-col lg:flex-row items-center gap-4 lg:gap-10 justify-center lg:justify-between">
|
||
<div className="text-blue-600 font-bold text-xl lg:text-2xl text-center lg:text-left">
|
||
现在注册，免费领取5000IP
|
||
</div>
|
||
<Button
|
||
className={merge(
|
||
'bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md whitespace-nowrap',
|
||
)}
|
||
onClick={() => router.push('/product')}
|
||
>
|
||
立即试用
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</Wrap>
|
||
</HomePage>
|
||
)
|
||
}
|