完善支付页面与路由的交互实现

src/components/composites/purchase/index.tsx

@@ -1,25 +1,23 @@
 'use client'
-import {ReactNode, useState} from 'react'
+import {ReactNode} 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 {useSearchParams} from 'next/navigation'
+import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
-type PurchaseProps = {
-  defaultTab: TabType
-}
-
-export default function Purchase(props: PurchaseProps) {
-  const [tab, setTab] = useState(props.defaultTab)
-
+export default function Purchase() {
+  const router = useRouter()
+  const path = usePathname()
   const params = useSearchParams()
+
+  const tab = params.get('type') as TabType || 'short'
+
   const updateTab = async (tab: string) => {
-    setTab(tab as TabType)
     const newParams = new URLSearchParams(params)
     newParams.set('type', tab)
-    window.history.pushState({}, '', `?${newParams.toString()}`)
+    router.push(`${path}?${newParams.toString()}`)
   }
 
   return (