活动专区

src/api/home.ts

@@ -10,33 +10,34 @@ export interface ApiImage {
   id: number
 }
 
-/** 轮播图项 */
+/** 首页可点击链接项（轮播图 / 宫格导航共用） */
-export interface CarouselItem {
+export interface HomeLinkItem {
   id: number
   title: string
   image: ApiImage
   link: string
   status: number // 0: 启用
   sort: number
+  link_type: number // 0: 跳转 link 链接; 1: 跳转分类页
+  category_id: number // link_type = 1 时携带的分类 ID
 }
 
-/** 宫格导航项 */
+/** 首页活动项（结构与 HomeLinkItem 相同，额外多一个描述字段） */
-export interface GridNavItem {
+export interface HomeActivityItem extends HomeLinkItem {
-  id: number
+  description: string
-  title: string
-  image: ApiImage
-  link: string
-  status: number // 0: 启用
-  sort: number
 }
 
 /** 首页数据 */
 export interface HomeData {
-  carousel: CarouselItem[]
+  carousel: HomeLinkItem[]
-  gridNav: GridNavItem[]
+  gridNav: HomeLinkItem[]
+  activity: HomeActivityItem[]
   site_title: string
 }
 
+/** 分类链接项（结构与 HomeLinkItem 相同，但不含 link_type / category_id，均为纯链接） */
+export type CategoryLinkItem = Omit<HomeLinkItem, 'link_type' | 'category_id'>
+
 // ==================== API ====================
 
 /**
@@ -48,3 +49,14 @@ export async function getHomeData(): Promise<ResponseStructure<HomeData>> {
     method: 'GET',
   })
 }
+
+/**
+ * 获取指定分类下的链接列表（无需登录）
+ * @param categoryId - 分类 ID
+ */
+export async function getCategoryLinks(categoryId: number): Promise<ResponseStructure<CategoryLinkItem[]>> {
+  return createRequest<CategoryLinkItem[]>({
+    url: `/api/category/${categoryId}`,
+    method: 'GET',
+  })
+}

src/app.config.ts

@@ -1,6 +1,7 @@
 export default defineAppConfig({
   pages: [
     'pages/index/index',
+    'pages/category/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.ts

@@ -13,6 +13,7 @@ class App extends Component {
 
   // this.props.children 是将要会渲染的页面
   render () {
+    // @ts-ignore
     return this.props.children
   }
 }

src/pages/category/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '校园美食',
+  navigationBarBackgroundColor: '#ff6b35',
+  navigationBarTextStyle: 'white',
+})

src/pages/category/index.less

@@ -0,0 +1,43 @@
+.category {
+  min-height: 100vh;
+  background: #f7f8fa;
+  padding-top: 16px;
+
+  // 加载 / 空状态
+  .category-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 120px 0;
+    color: #999;
+
+    .state-text {
+      font-size: 26px;
+      color: #999;
+    }
+  }
+
+  // 宫格链接（与首页宫格导航样式一致）
+  .grid-wrapper {
+    margin: 16px 32px 20px;
+    background: rgb(255 255 255);
+    border-radius: 20px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    padding-bottom: 24px;
+
+    .van-grid-item__content {
+      padding-top: 24px;
+      padding-bottom: 0;
+    }
+
+    .van-icon--image {
+      width: 60px !important;
+      height: 60px !important;
+    }
+
+    .van-grid-item__text {
+      font-size: 22px;
+    }
+  }
+}

src/pages/category/index.tsx

@@ -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>
+  )
+}

src/pages/index/index.less

@@ -127,6 +127,11 @@
     .activity-cards {
       display: flex;
       gap: 20px;
+
+      // 只有一条活动时占满整行
+      &.single .activity-card {
+        flex: 1 1 100%;
+      }
     }
 
     .activity-card {
@@ -184,6 +189,12 @@
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.25);
         margin-bottom: 14px;
+        overflow: hidden;
+
+        .activity-icon-img {
+          width: 100%;
+          height: 100%;
+        }
       }
 
       .activity-name {
@@ -219,58 +230,79 @@
   }
 
   // ========== 5. 底部推荐卡片 ==========
-  .bottom-section {
+  // section-card 通用样式（活动专区 + 底部推荐共用）
-    padding: 0 32px;
+  .section-card {
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 18px;
+    padding: 24px 28px;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transition: transform 0.2s ease;
 
-    .section-card {
+    &:active {
+      transform: scale(0.98);
+    }
+
+    .card-icon {
+      font-size: 48px;
+      width: 72px;
+      height: 72px;
       display: flex;
       align-items: center;
-      background: rgba(255, 255, 255, 0.9);
+      justify-content: center;
       border-radius: 18px;
-      padding: 24px 28px;
+      margin-right: 20px;
-      margin-bottom: 16px;
+      flex-shrink: 0;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+      overflow: hidden;
-      transition: transform 0.2s ease;
 
-      &:active {
+      .card-icon-img {
-        transform: scale(0.98);
+        width: 100%;
-      }
+        height: 100%;
-
-      .card-icon {
-        font-size: 48px;
-        width: 72px;
-        height: 72px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 18px;
-        margin-right: 20px;
-        flex-shrink: 0;
-      }
-
-      .card-info {
-        flex: 1;
-
-        .card-title {
-          font-size: 30px;
-          font-weight: 600;
-          color: #333;
-          margin-bottom: 6px;
-        }
-
-        .card-desc {
-          font-size: 24px;
-          color: #999;
-        }
-      }
-
-      .card-arrow {
-        font-size: 40px;
-        color: #ccc;
-        flex-shrink: 0;
       }
     }
 
+    .card-info {
+      flex: 1;
+
+      .card-title {
+        font-size: 30px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 6px;
+      }
+
+      .card-desc {
+        font-size: 24px;
+        color: #999;
+      }
+    }
+
+    .card-arrow {
+      font-size: 40px;
+      color: #ccc;
+      flex-shrink: 0;
+    }
+  }
+
+  // 活动专区 section-card 图标底色（循环使用）
+  .card-ic-0 .card-icon {
+    background: #fff0ed;
+  }
+  .card-ic-1 .card-icon {
+    background: #fff7e6;
+  }
+  .card-ic-2 .card-icon {
+    background: #e6f7ff;
+  }
+  .card-ic-3 .card-icon {
+    background: #f0edff;
+  }
+
+  .bottom-section {
+    padding: 0 32px;
+
     // 每张卡片图标不同底色
     .card-hot .card-icon {
       background: #fff0ed;

src/pages/index/index.tsx

@@ -3,7 +3,8 @@ import {Search, Swiper, SwiperItem, Grid, GridItem, Icon} from '@antmjs/vantui'
 import { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import { getHomeData } from '@/api/home'
-import type { CarouselItem, GridNavItem } from '@/api/home'
+import type { HomeLinkItem, HomeActivityItem } from '@/api/home'
+import { navigateToLink } from '@/utils/navigate'
 import './index.less'
 
 // 背景图
@@ -21,25 +22,23 @@ function prepareItems<T extends { status: number; sort: number }>(items: T[]): T
 }
 
 /** 处理导航跳转 */
-function handleNavigate(link: string): void {
+function handleNavigate(item: HomeLinkItem): void {
-  if (!link) return
+  // link_type = 1：跳转分类页，携带分类 ID
-  if(link.startsWith('http')) {
+  if (item.link_type === 1) {
-    window.location.href = link
+    Taro.navigateTo({ url: `/pages/category/index?category_id=${item.category_id ?? ''}` })
-  } else {
+    return
-    Taro.navigateTo({ url: link }).catch(() => {
-      Taro.switchTab({ url: link }).catch(() => {
-        console.warn('导航失败:', link)
-      })
-    })
   }
+  // link_type = 0：直接跳转 link 链接
+  navigateToLink(item.link)
 }
 
 // ==================== 页面组件 ====================
 
 export default function Index() {
   const [searchValue, setSearchValue] = useState('')
-  const [carousel, setCarousel] = useState<CarouselItem[]>([])
+  const [carousel, setCarousel] = useState<HomeLinkItem[]>([])
-  const [gridNav, setGridNav] = useState<GridNavItem[]>([])
+  const [gridNav, setGridNav] = useState<HomeLinkItem[]>([])
+  const [activity, setActivity] = useState<HomeActivityItem[]>([])
   const [siteTitle, setSiteTitle] = useState<string>('河南省工业大学')
   const [loading, setLoading] = useState(true)
 
@@ -57,6 +56,10 @@ export default function Index() {
           if (res.data.gridNav?.length > 0) {
             setGridNav(prepareItems(res.data.gridNav))
           }
+          // 活动专区：API 有数据则用，否则兜底静态内容
+          if (res.data.activity?.length > 0) {
+            setActivity(prepareItems(res.data.activity))
+          }
           if (res.data.site_title) {
             setSiteTitle(res.data.site_title)
           }
@@ -116,7 +119,7 @@ export default function Index() {
                     className='swiper-img'
                     src={item.image.preview_url}
                     mode='aspectFill'
-                    onClick={() => handleNavigate(item.link)}
+                    onClick={() => handleNavigate(item)}
                   />
                 </SwiperItem>
               ))}
@@ -135,7 +138,7 @@ export default function Index() {
                   key={item.id}
                   icon={item.image.preview_url}
                   text={item.title}
-                  onClick={() => handleNavigate(item.link)}
+                  onClick={() => handleNavigate(item)}
                 />
               ))}
             </Grid>
@@ -157,39 +160,83 @@ export default function Index() {
             </View>
           </View>
 
-          <View className='activity-cards'>
+          {activity.length > 0 ? (
-            {/* 满减优惠 */}
+            <>
-            <View
+              {/* 前两个：activity-card 渐变卡片 */}
-              className='activity-card card-fullcut'
+              <View className={`activity-cards ${activity.length === 1 ? 'single' : ''}`}>
-              onClick={() => {
+                {activity.slice(0, 2).map((item, index) => (
-                // TODO: 活动页面上线后配置跳转链接
+                  <View
-              }}
+                    key={item.id}
-            >
+                    className={`activity-card ${index === 0 ? 'card-fullcut' : 'card-newbie'}`}
-              <View className='deco-circle circle-1' />
+                    onClick={() => handleNavigate(item)}
-              <View className='deco-circle circle-2' />
+                  >
-              <View className='activity-card-main'>
+                    <View className='deco-circle circle-1' />
-                <View className='activity-icon'>🎫</View>
+                    <View className='deco-circle circle-2' />
-                <View className='activity-name'>满减优惠</View>
+                    <View className='activity-card-main'>
-                <View className='activity-desc'>满30减5 · 可与券叠加</View>
+                      <View className='activity-icon'>
+                        <Image className='activity-icon-img' src={item.image.preview_url} mode='aspectFill' />
+                      </View>
+                      <View className='activity-name'>{item.title}</View>
+                      <View className='activity-desc'>{item.description}</View>
+                    </View>
+                  </View>
+                ))}
               </View>
-            </View>
 
-            {/* 新品首发 */}
+              {/* 其余：section-card 样式 */}
-            <View
+              {activity.slice(2).map((item, index) => (
-              className='activity-card card-newbie'
+                <View
-              onClick={() => {
+                  key={item.id}
-                // TODO: 活动页面上线后配置跳转链接
+                  className={`section-card card-ic-${index % 4}`}
-              }}
+                  onClick={() => handleNavigate(item)}
-            >
+                >
-              <View className='deco-circle circle-1' />
+                  <View className='card-icon'>
-              <View className='deco-circle circle-2' />
+                    <Image className='card-icon-img' src={item.image.preview_url} mode='aspectFill' />
-              <View className='activity-card-main'>
+                  </View>
-                <View className='activity-icon'>✨</View>
+                  <View className='card-info'>
-                <View className='activity-name'>新品首发</View>
+                    <View className='card-title'>{item.title}</View>
-                <View className='activity-desc'>每周三上新 · 限时尝鲜价</View>
+                    <View className='card-desc'>{item.description}</View>
+                  </View>
+                  <View className='card-arrow'>›</View>
+                </View>
+              ))}
+            </>
+          ) : (
+            /* 兜底静态内容 */
+            <View className='activity-cards'>
+              {/* 满减优惠 */}
+              <View
+                className='activity-card card-fullcut'
+                onClick={() => {
+                  // TODO: 活动页面上线后配置跳转链接
+                }}
+              >
+                <View className='deco-circle circle-1' />
+                <View className='deco-circle circle-2' />
+                <View className='activity-card-main'>
+                  <View className='activity-icon'>🎫</View>
+                  <View className='activity-name'>满减优惠</View>
+                  <View className='activity-desc'>满30减5 · 可与券叠加</View>
+                </View>
+              </View>
+
+              {/* 新品首发 */}
+              <View
+                className='activity-card card-newbie'
+                onClick={() => {
+                  // TODO: 活动页面上线后配置跳转链接
+                }}
+              >
+                <View className='deco-circle circle-1' />
+                <View className='deco-circle circle-2' />
+                <View className='activity-card-main'>
+                  <View className='activity-icon'>✨</View>
+                  <View className='activity-name'>新品首发</View>
+                  <View className='activity-desc'>每周三上新 · 限时尝鲜价</View>
+                </View>
               </View>
             </View>
-          </View>
+          )}
         </View>
 
         {/* 5. 底部推荐卡片 */}

src/utils/navigate.ts

@@ -0,0 +1,18 @@
+import Taro from '@tarojs/taro'
+
+/**
+ * 跳转链接：外部 http(s) 链接直接打开，内部链接 navigateTo 打开，
+ * navigateTo 失败时降级为 switchTab（兼容 tabBar 页面）
+ */
+export function navigateToLink(link: string): void {
+  if (!link) return
+  if (link.startsWith('http')) {
+    window.location.href = link
+  } else {
+    Taro.navigateTo({ url: link }).catch(() => {
+      Taro.switchTab({ url: link }).catch(() => {
+        console.warn('导航失败:', link)
+      })
+    })
+  }
+}