修改免费试用的跳转逻辑和设置密码的校验
This commit is contained in:
Eamon-meng
@@ -11,9 +11,10 @@ import {zodResolver} from '@hookform/resolvers/zod'
|
||||
import Image from 'next/image'
|
||||
import check from './_assets/check.svg'
|
||||
import banner from './_assets/Mask-group.webp'
|
||||
import group from './_assets/Group.svg'
|
||||
import group from './_assets/Group.webp'
|
||||
import {merge} from '@/lib/utils'
|
||||
import {useRouter} from 'next/navigation'
|
||||
import {useProfileStore} from '@/components/stores-provider'
|
||||
|
||||
const formSchema = z.object({
|
||||
companyName: z.string().min(2, '企业名称至少2个字符'),
|
||||
@@ -37,7 +38,8 @@ export default function CollectPage() {
|
||||
purpose: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 从store中获取用户信息
|
||||
const profile = useProfileStore(store => store.profile)
|
||||
return (
|
||||
<main className="mt-20 flex flex-col gap-4">
|
||||
<Wrap className="flex flex-col py-8 gap-8">
|
||||
@@ -60,7 +62,7 @@ export default function CollectPage() {
|
||||
<Image
|
||||
src={banner}
|
||||
alt="宣传图"
|
||||
fill
|
||||
layout="responsive"
|
||||
className="object-cover rounded-lg"
|
||||
priority
|
||||
/>
|
||||
@@ -108,66 +110,85 @@ export default function CollectPage() {
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-semibold mb-6">企业基本信息</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<Form form={form}>
|
||||
<div className="max-w-md mx-auto space-y-6">
|
||||
<div className="mx-auto max-w-xl space-y-6">
|
||||
{/* 企业名称 */}
|
||||
<FormField name="companyName">
|
||||
{({id, field}) => (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor={id} className="text-sm flex items-center gap-1">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>企业名称</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入企业名称"
|
||||
className="flex-1 max-w-xs"
|
||||
/>
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人姓名 */}
|
||||
<FormField name="contactName">
|
||||
{({id, field}) => (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor={id} className="text-sm flex items-center gap-1">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人姓名</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入联系人姓名"
|
||||
className="flex-1 max-w-xs"
|
||||
/>
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 联系人手机号码 */}
|
||||
<FormField name="phone">
|
||||
{({id, field}) => (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor={id} className="text-sm flex items-center gap-1">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>联系人手机号码</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入手机号码"
|
||||
className="flex-1 max-w-xs"
|
||||
/>
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 每月需求用量 */}
|
||||
<FormField name="monthlyUsage">
|
||||
{({id, field}) => (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor={id} className="text-sm flex items-center gap-1">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>每月需求用量</span>
|
||||
</label>
|
||||
|
||||
<Select onValueChange={field.onChange} value={field.value}>
|
||||
<SelectTrigger id={id} className="flex-1 max-w-xs">
|
||||
<SelectTrigger
|
||||
id={id}
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs">
|
||||
<SelectValue placeholder="请选择您需要的用量"/>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -180,22 +201,27 @@ export default function CollectPage() {
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
{/* 用途 */}
|
||||
<FormField name="purpose">
|
||||
{({id, field}) => (
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<label htmlFor={id} className="text-sm flex items-center gap-1">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-start md:justify-between">
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="text-sm flex items-center gap-1 mb-2 md:mb-0 md:w-1/3 md:text-right">
|
||||
<span className="text-red-500">*</span>
|
||||
<span>用途</span>
|
||||
</label>
|
||||
|
||||
<Input
|
||||
{...field}
|
||||
id={id}
|
||||
placeholder="请输入用途，例如：爬虫"
|
||||
className="flex-1 max-w-xs"
|
||||
/>
|
||||
className="flex-1 w-full md:w-2/3 md:ml-4 md:max-w-xs"/>
|
||||
</div>
|
||||
)}
|
||||
</FormField>
|
||||
|
||||
<div className="pt-4 flex justify-center">
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 px-8">
|
||||
提交
|
||||
@@ -204,27 +230,34 @@ export default function CollectPage() {
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
<div className="relative mt-8 rounded-lg overflow-hidden h-32 bg-gray-100">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={group}
|
||||
alt="免费领取背景"
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
|
||||
{/* <div className="relative mt-8 rounded-lg overflow-hidden h-32 md:h-40 bg-gray-100">
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
backgroundImage: `url(${group.src})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'right center',
|
||||
}}>
|
||||
</div>
|
||||
<div className={merge('relative h-full flex items-center justify-center pl-150')}>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
className={merge('bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md whitespace-nowrap')}
|
||||
onClick={() => router.push('/login')}
|
||||
onClick={() => {
|
||||
if (profile) {
|
||||
router.push('/admin/purchase')
|
||||
}
|
||||
else {
|
||||
router.push('/login?redirect=/admin/purchase')
|
||||
}
|
||||
}}
|
||||
>
|
||||
免费试用
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</Wrap>
|
||||
</main>
|
||||
|
||||
@@ -4,9 +4,13 @@ import Wrap from '@/components/wrap'
|
||||
import Image from 'next/image'
|
||||
import React, {useState} from 'react'
|
||||
import {useRouter} from 'next/navigation'
|
||||
import {useProfileStore} from '@/components/stores-provider'
|
||||
|
||||
export default function Home() {
|
||||
const router = useRouter()
|
||||
// 从store中获取用户信息
|
||||
const profile = useProfileStore(store => store.profile)
|
||||
|
||||
return (
|
||||
<main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
|
||||
|
||||
@@ -36,7 +40,14 @@ export default function Home() {
|
||||
`mt-32 max-md:mt-20 w-96 max-md:w-full h-16 md:h-24 rounded-lg shadow-lg`,
|
||||
`bg-gradient-to-r from-blue-500 to-cyan-400 text-white text-xl lg:text-4xl`,
|
||||
].join(' ')}
|
||||
onClick={() => router.push('/login')}
|
||||
onClick={() => {
|
||||
if (profile) {
|
||||
router.push('/admin/purchase') // 已登录用户跳转购买页
|
||||
}
|
||||
else {
|
||||
router.push('/login?redirect=/admin/purchase') // 未登录跳转登录页并携带重定向路径
|
||||
}
|
||||
}}
|
||||
>
|
||||
免费试用
|
||||
</button>
|
||||
|
||||
@@ -49,9 +49,9 @@ export function ChangePasswordDialog({
|
||||
const form = useForm<Schema>({
|
||||
resolver: zodResolver(
|
||||
schema.refine(
|
||||
data => /^(?=.*[a-z])(?=.*[A-Z]).{6,}$/.test(data.password),
|
||||
data => /^(?=.*[a-zA-Z])(?=.*\d).{6,}$/.test(data.password),
|
||||
{
|
||||
message: '密码需包含大小写字母，且不少于6位',
|
||||
message: '密码需包含字母和数字，且不少于6位',
|
||||
path: ['password'],
|
||||
},
|
||||
),
|
||||
|
||||
@@ -4,7 +4,8 @@ import {merge} from '@/lib/utils'
|
||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
|
||||
import LongForm from '@/components/composites/purchase/long/form'
|
||||
import ShortForm from '@/components/composites/purchase/short/form'
|
||||
|
||||
import {useProfileStore} from '@/components/stores-provider'
|
||||
import {useRouter} from 'next/navigation'
|
||||
export type TabType = 'short' | 'long' | 'fixed' | 'custom'
|
||||
|
||||
type PurchaseProps = {
|
||||
@@ -13,10 +14,14 @@ type PurchaseProps = {
|
||||
|
||||
export default function Purchase(props: PurchaseProps) {
|
||||
const [currentTab, setCurrentTab] = useState<string>(props.defaultType)
|
||||
|
||||
const profile = useProfileStore(store => store.profile)
|
||||
const router = useRouter()
|
||||
useEffect(() => {
|
||||
setCurrentTab(props.defaultType)
|
||||
}, [props.defaultType])
|
||||
if (!profile) {
|
||||
router.push('/login?redirect=/admin/purchase') // 未登录用户重定向到登录页
|
||||
}
|
||||
}, [props.defaultType, profile, router])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
Reference in New Issue
Block a user