动态生成购买套餐 & 取消初次进后台修改密码的弹窗 & 添加总折扣字段 & 发布v1.5.0版本

src/components/composites/purchase/index.tsx

@@ -1,11 +1,12 @@
 'use client'
-import {ReactNode} from 'react'
+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 {usePathname, useRouter, useSearchParams} from 'next/navigation'
 import SelfDesc from '@/components/features/self-desc'
+import {listProduct, ProductItem} from '@/actions/product'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'
 
 export default function Purchase() {
@@ -13,7 +14,8 @@ export default function Purchase() {
   const path = usePathname()
   const params = useSearchParams()
 
-  const tab = params.get('type') as TabType || 'short'
+  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)
@@ -21,27 +23,47 @@ export default function Purchase() {
     router.push(`${path}?${newParams.toString()}`)
   }
 
+  useEffect(() => {
+    const fetchProducts = async () => {
+      const res = await listProduct({})
+      if (res.success) {
+        setProductList(res.data)
+      }
+    }
+    fetchProducts()
+  }, [])
+
+  const currentProduct = productList.find(item => item.code === tab)
+  const currentSkuList = currentProduct?.skus || []
+  const componentMap: Record<string, React.FC<{skuList: ProductItem['skus']}>> = {
+    short: ShortForm,
+    long: LongForm,
+  // static: StaticForm
+  }
   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">
-          <Tab value="short">短效动态</Tab>
-          <Tab value="long">长效静态</Tab>
-          <Tab value="fixed">固定套餐</Tab>
+          {productList.map(item => (
+            <Tab key={item.code} value={item.code}>
+              {item.name}
+            </Tab>
+          ))}
+          {/* 固定的定制套餐tab */}
           <Tab value="custom">定制套餐</Tab>
         </TabsList>
-        <TabsContent value="short">
-          <ShortForm/>
-        </TabsContent>
-        <TabsContent value="long">
-          <LongForm/>
-        </TabsContent>
-        <TabsContent value="fixed">
-        </TabsContent>
+        {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')
-          }}/>
+          <SelfDesc onInquiry={() => router.push('/custom')}/>
         </TabsContent>
       </Tabs>
     </div>