活动专区

2026-08-09 11:24:20 +08:00
parent 8906cf6abb
commit 0980252b7f
9 changed files with 330 additions and 100 deletions
@@ -0,0 +1,71 @@
+import { View, Text } from '@tarojs/components'
+import { Grid, GridItem, Loading } from '@antmjs/vantui'
+import { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import { getCategoryLinks } from '@/api/home'
+import type { CategoryLinkItem } from '@/api/home'
+import { navigateToLink } from '@/utils/navigate'
+import './index.less'
+
+export default function Category() {
+  const router = Taro.useRouter()
+  const categoryId = router.params.category_id || ''
+  const [links, setLinks] = useState<CategoryLinkItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // 收到分类 ID 后请求该分类下的所有链接
+  useEffect(() => {
+    async function fetchCategoryLinks() {
+      try {
+        const res = await getCategoryLinks(Number(categoryId))
+        if (res.success && res.data) {
+          setLinks(
+            res.data
+              .filter((item) => item.status === 0)
+              .sort((a, b) => a.sort - b.sort)
+          )
+        }
+      } catch (err) {
+        console.warn('获取分类链接失败', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (categoryId) {
+      fetchCategoryLinks()
+    } else {
+      setLoading(false)
+    }
+  }, [categoryId])
+
+  return (
+    <View className='category'>
+      {/* 加载中 */}
+      {loading ? (
+        <View className='category-state'>
+          <Loading type='spinner'>加载中...</Loading>
+        </View>
+      ) : links.length > 0 ? (
+        // 宫格链接（与首页宫格导航样式一致）
+        <View className='grid-wrapper'>
+          <Grid columnNum={5} border={false} gutter={12} iconSize={48}>
+            {links.map((item) => (
+              <GridItem
+                key={item.id}
+                icon={item.image.preview_url}
+                text={item.title}
+                onClick={() => navigateToLink(item.link)}
+              />
+            ))}
+          </Grid>
+        </View>
+      ) : (
+        // 空状态
+        <View className='category-state'>
+          <Text className='state-text'>暂无链接</Text>
+        </View>
+      )}
+    </View>
+  )
+}