133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
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>
|
|
)
|
|
}
|