forum
This commit is contained in:
jeremygan2021
207
miniprogram/src/pages/forum/index.tsx
Normal file
207
miniprogram/src/pages/forum/index.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
|
||||
import { View, Text, Image, Button } from '@tarojs/components'
|
||||
import { AtSearchBar, AtTabs, AtIcon, AtActivityIndicator, AtFab } from 'taro-ui'
|
||||
import { getTopics } from '../../api'
|
||||
import { useLogin } from '../../utils/hooks' // Assuming a hook or just use Taro.getStorageSync
|
||||
import './index.scss'
|
||||
|
||||
const ForumList = () => {
|
||||
const [topics, setTopics] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [page, setPage] = useState(1)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const [currentTab, setCurrentTab] = useState(0)
|
||||
|
||||
const categories = [
|
||||
{ title: '全部', key: 'all' },
|
||||
{ title: '讨论', key: 'discussion' },
|
||||
{ title: '求助', key: 'help' },
|
||||
{ title: '分享', key: 'share' },
|
||||
{ title: '公告', key: 'notice' },
|
||||
]
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading) return
|
||||
if (!reset && !hasMore) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const currentPage = reset ? 1 : page
|
||||
const params: any = {
|
||||
page: currentPage,
|
||||
search: searchText,
|
||||
category: categories[currentTab].key !== 'all' ? categories[currentTab].key : undefined
|
||||
}
|
||||
|
||||
const res = await getTopics(params)
|
||||
const newTopics = res.results || res.data || [] // Adjust based on API response structure
|
||||
|
||||
if (reset) {
|
||||
setTopics(newTopics)
|
||||
} else {
|
||||
setTopics(prev => [...prev, ...newTopics])
|
||||
}
|
||||
|
||||
// Check if more data exists (assuming standard pagination)
|
||||
if (res.next || newTopics.length === 10) { // 10 is default page size usually
|
||||
setHasMore(true)
|
||||
setPage(currentPage + 1)
|
||||
} else {
|
||||
setHasMore(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchList(true)
|
||||
}, [currentTab])
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
fetchList(true)
|
||||
})
|
||||
|
||||
useReachBottom(() => {
|
||||
fetchList(false)
|
||||
})
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setSearchText(value)
|
||||
}
|
||||
|
||||
const onSearchConfirm = () => {
|
||||
fetchList(true)
|
||||
}
|
||||
|
||||
const handleTabClick = (value) => {
|
||||
setCurrentTab(value)
|
||||
// useEffect will trigger fetch
|
||||
}
|
||||
|
||||
const navigateToDetail = (id) => {
|
||||
Taro.navigateTo({
|
||||
url: `/subpackages/forum/detail/index?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
const navigateToCreate = () => {
|
||||
const token = Taro.getStorageSync('token')
|
||||
if (!token) {
|
||||
Taro.showToast({ title: '请先登录', icon: 'none' })
|
||||
// Optional: Trigger login flow
|
||||
return
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: '/subpackages/forum/create/index'
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryLabel = (cat) => {
|
||||
const map = {
|
||||
'help': '求助',
|
||||
'share': '分享',
|
||||
'notice': '公告',
|
||||
'discussion': '讨论'
|
||||
}
|
||||
return map[cat] || '讨论'
|
||||
}
|
||||
|
||||
// Helper to extract first image from markdown
|
||||
const getCoverImage = (content) => {
|
||||
const match = content.match(/!\[.*?\]\((.*?)\)/)
|
||||
return match ? match[1] : null
|
||||
}
|
||||
|
||||
const stripMarkdown = (content) => {
|
||||
return content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='forum-page'>
|
||||
<View className='hero-section'>
|
||||
<View className='title'>
|
||||
<Text className='highlight'>Quant Speed</Text> Community
|
||||
</View>
|
||||
<View className='subtitle'>技术交流 · 硬件开发 · 官方支持</View>
|
||||
|
||||
<View className='search-box'>
|
||||
<AtSearchBar
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
onActionClick={onSearchConfirm}
|
||||
onConfirm={onSearchConfirm}
|
||||
placeholder='搜索话题...'
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='tabs-wrapper'>
|
||||
<AtTabs
|
||||
current={currentTab}
|
||||
tabList={categories}
|
||||
onClick={handleTabClick}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='topic-list'>
|
||||
{topics.map(item => (
|
||||
<View
|
||||
key={item.id}
|
||||
className={`topic-card ${item.is_pinned ? 'pinned' : ''}`}
|
||||
onClick={() => navigateToDetail(item.id)}
|
||||
>
|
||||
<View className='card-header'>
|
||||
{item.is_pinned && <Text className='tag pinned-tag'>置顶</Text>}
|
||||
<Text className='tag'>{getCategoryLabel(item.category)}</Text>
|
||||
{item.is_verified_owner && <Text className='tag verified-tag'>认证</Text>}
|
||||
<Text className='card-title'>{item.title}</Text>
|
||||
</View>
|
||||
|
||||
<View className='card-content'>
|
||||
{stripMarkdown(item.content)}
|
||||
</View>
|
||||
|
||||
{getCoverImage(item.content) && (
|
||||
<View className='card-image'>
|
||||
<Image src={getCoverImage(item.content)} mode='aspectFill' />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='card-footer'>
|
||||
<View className='author-info'>
|
||||
<Image className='avatar' src={item.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
|
||||
<Text className={`nickname ${item.author_info?.is_star ? 'star' : ''}`}>
|
||||
{item.author_info?.nickname || '匿名'}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='stats'>
|
||||
<View className='stat-item'>
|
||||
<Text>👁 {item.view_count || 0}</Text>
|
||||
</View>
|
||||
<View className='stat-item'>
|
||||
<Text>💬 {item.replies?.length || 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{loading && <View style={{textAlign: 'center', padding: 10}}><AtActivityIndicator color='#00b96b' /></View>}
|
||||
{!loading && topics.length === 0 && <View className='empty-state'>暂无内容</View>}
|
||||
</View>
|
||||
|
||||
<View className='fab' onClick={navigateToCreate}>
|
||||
<AtIcon value='add' size='24' color='#fff' />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForumList
|
||||
Reference in New Issue
Block a user