91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client'
|
|
import {ReactNode, use, 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 {usePathname, useRouter, useSearchParams} from 'next/navigation'
|
|
import SelfDesc from '@/components/features/self-desc'
|
|
import {listProduct, listProductHome, ProductItem} from '@/actions/product'
|
|
import {useProfileStore} from '@/components/stores/profile'
|
|
export type TabType = 'short' | 'long' | 'fixed' | 'custom'
|
|
|
|
export default function Purchase() {
|
|
const router = useRouter()
|
|
const path = usePathname()
|
|
const params = useSearchParams()
|
|
|
|
const [productList, setProductList] = useState<ProductItem[]>([])
|
|
const tab = (params.get('type') as TabType) || productList[0]?.code || 'short'
|
|
|
|
const updateTab = (tab: string) => {
|
|
const newParams = new URLSearchParams(params)
|
|
newParams.set('type', tab)
|
|
router.push(`${path}?${newParams.toString()}`)
|
|
}
|
|
const profile = use(useProfileStore(store => store.profile))
|
|
|
|
useEffect(() => {
|
|
const fetchProducts = async () => {
|
|
const res = profile
|
|
? await listProduct({})
|
|
: await listProductHome({})
|
|
|
|
if (res.success) {
|
|
setProductList(res.data)
|
|
}
|
|
}
|
|
fetchProducts()
|
|
}, [profile])
|
|
|
|
const componentMap: Record<string, React.FC<{skuList: ProductItem['skus']}>> = {
|
|
short: ShortForm,
|
|
long: LongForm,
|
|
}
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
<Tabs value={tab} onValueChange={updateTab} className="gap-4">
|
|
<TabsList className="w-full p-2 bg-white rounded-lg justify-start md:justify-center overflow-auto">
|
|
{productList.map(item => (
|
|
<Tab key={item.code} value={item.code}>
|
|
{item.name}
|
|
</Tab>
|
|
))}
|
|
{/* 固定的定制套餐tab */}
|
|
<Tab value="custom">定制套餐</Tab>
|
|
</TabsList>
|
|
{productList.map((item) => {
|
|
const Component = componentMap[item.code]
|
|
const skuList = item.skus || []
|
|
return (
|
|
<TabsContent key={item.code} value={item.code}>
|
|
{Component ? <Component skuList={skuList}/> : <div>页面待开发中</div>}
|
|
</TabsContent>
|
|
)
|
|
})}
|
|
|
|
<TabsContent value="custom">
|
|
<SelfDesc onInquiry={() => router.push('/custom')}/>
|
|
</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>
|
|
)
|
|
}
|