62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
'use client'
|
|
import {ReactNode, useEffect, useState} from 'react'
|
|
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 = {
|
|
defaultType: TabType
|
|
}
|
|
|
|
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)
|
|
// if (!profile) {
|
|
// router.push('/login?redirect=/admin/purchase') // 未登录用户重定向到登录页
|
|
// }
|
|
}, [props.defaultType, profile, router])
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<Tabs value={currentTab} onValueChange={setCurrentTab} className="gap-4">
|
|
<TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
|
|
<Tab value="short">短效动态</Tab>
|
|
<Tab value="long">长效静态</Tab>
|
|
<Tab value="fixed">固定套餐</Tab>
|
|
<Tab value="custom">定制套餐</Tab>
|
|
</TabsList>
|
|
<TabsContent value="short">
|
|
<ShortForm/>
|
|
</TabsContent>
|
|
<TabsContent value="long">
|
|
<LongForm/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Tab(props: {
|
|
value: string
|
|
children: ReactNode
|
|
}) {
|
|
return (
|
|
<TabsTrigger
|
|
className={merge(
|
|
`w-36 h-12 text-base font-normal flex-none`,
|
|
`data-[state=active]:text-primary data-[state=active]:bg-primary-muted`,
|
|
)}
|
|
value={props.value}
|
|
>
|
|
{props.children}
|
|
</TabsTrigger>
|
|
)
|
|
}
|