商品以及商品详情

2026-07-10 20:14:43 +08:00
parent c25cf0e8b3
commit 3022990ea1
93 changed files with 4576 additions and 1008 deletions
@@ -0,0 +1,132 @@
+import { useState, useMemo } from 'react'
+import Taro from '@tarojs/taro'
+import { View, Text, ScrollView } from '@tarojs/components'
+import { Search, Grid, GridItem } from '@antmjs/vantui'
+import ForumPostCard from '@/components/ForumPostCard'
+import { getForumPostsBySubCategory } from '@/mock/forum'
+import type { Article, ForumSubCategory } from '@/types/article'
+import './index.less'
+
+/** 获取状态栏 + 导航栏高度 */
+function getNavBarHeight() {
+  const systemInfo = Taro.getSystemInfoSync()
+  const statusBarHeight = systemInfo.statusBarHeight || 20
+  const navBarHeight = 44
+  return { statusBarHeight, navBarHeight, totalHeight: statusBarHeight + navBarHeight }
+}
+
+/** 论坛 5 个子分类 */
+const FORUM_CATEGORIES: { id: ForumSubCategory; label: string; icon: string }[] = [
+  { id: 'life', label: '校园生活', icon: '🌸' },
+  { id: 'study', label: '学习交流', icon: '📚' },
+  { id: 'lost-found', label: '失物招领', icon: '🔍' },
+  { id: 'secondhand', label: '二手交易', icon: '🛍' },
+  { id: 'tree-hole', label: '树洞', icon: '🌳' },
+]
+
+export default function Forum() {
+  const [activeCategory, setActiveCategory] = useState<ForumSubCategory>('life')
+  const navBarHeight = useMemo(() => getNavBarHeight(), [])
+
+  /** 按当前子分类过滤帖子 */
+  const filteredPosts = useMemo(
+    () => getForumPostsBySubCategory(activeCategory),
+    [activeCategory],
+  )
+
+  /** 搜索 */
+  const handleSearch = () => {
+    Taro.navigateTo({ url: '/pages/search/index' })
+  }
+
+  /** 帖子点击 */
+  const handlePostClick = (post: Article) => {
+    Taro.navigateTo({ url: `/pages/article/index?id=${post.id}` })
+  }
+
+  /** 发布帖子 */
+  const handlePublish = () => {
+    Taro.showToast({ title: '发布功能即将上线', icon: 'none' })
+  }
+
+  return (
+    <View className='forum-page'>
+      {/* ========== 自定义导航栏（标题 + 发布） ========== */}
+      <View
+        className='custom-navbar'
+        style={{ paddingTop: `${navBarHeight.statusBarHeight}px` }}
+      >
+        <View
+          className='navbar-content'
+          style={{ height: `${navBarHeight.navBarHeight}px` }}
+        >
+          <View className='navbar-title-wrap'>
+            <Text className='navbar-title'>校园论坛</Text>
+          </View>
+          <View className='navbar-publish' onClick={handlePublish}>
+            <Text className='publish-icon'>✏️</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 占位 */}
+      <View style={{ height: `${navBarHeight.totalHeight}px` }} />
+
+      {/* ========== 主体内容（搜索 + 分类 + 列表）全部可滚动 ========== */}
+      <ScrollView
+        className='page-scroll'
+        scrollY
+        enhanced
+        showScrollbar={false}
+      >
+        {/* 搜索栏（主体内容区顶部） */}
+        <View className='inline-search-section'>
+          <Search
+            placeholder='搜索帖子、用户'
+            onClickInput={handleSearch}
+            shape='round'
+            background='#f2f3f5'
+            readonly
+          />
+        </View>
+
+        {/* 5 个子分类导航 */}
+        <View className='category-section'>
+          <Grid columnNum={5} border={false} gutter={4}>
+            {FORUM_CATEGORIES.map((cat) => (
+              <GridItem
+                key={cat.id}
+                icon={cat.icon}
+                text={cat.label}
+                onClick={() => setActiveCategory(cat.id)}
+              />
+            ))}
+          </Grid>
+        </View>
+
+        {/* 列表头 */}
+        <View className='post-list-header'>
+          <Text className='post-list-title'>
+            {FORUM_CATEGORIES.find((c) => c.id === activeCategory)?.label || ''} ·{' '}
+            <Text className='post-list-count'>{filteredPosts.length} 条</Text>
+          </Text>
+        </View>
+
+        {/* 帖子列表 */}
+        <View className='post-list'>
+          {filteredPosts.map((post) => (
+            <ForumPostCard
+              key={post.id}
+              post={post}
+              onClick={handlePostClick}
+            />
+          ))}
+          {filteredPosts.length === 0 && (
+            <View className='empty-tip'>该板块下暂无帖子</View>
+          )}
+        </View>
+        <View className='bottom-safe' />
+      </ScrollView>
+    </View>
+  )
+}