论坛，聊天室前后端对接
Change-Id: I90740329ab40dc050e8a791a382ab187900d673a
diff --git a/src/views/forum/ForumSectionView.vue b/src/views/forum/ForumSectionView.vue
index d0b42ec..ccb88f5 100644
--- a/src/views/forum/ForumSectionView.vue
+++ b/src/views/forum/ForumSectionView.vue
@@ -1,5 +1,6 @@
<template>
<div class="section-page">
+ <Navbar />
<div class="page-container">
<!-- 面包屑导航 -->
<div class="breadcrumb">
@@ -25,14 +26,6 @@
<el-icon><ChatDotRound /></el-icon>
<span>{{ sectionInfo.topics }} 主题</span>
</div>
- <div class="stat-item">
- <el-icon><Comment /></el-icon>
- <span>{{ sectionInfo.replies }} 回复</span>
- </div>
- <div class="stat-item">
- <el-icon><User /></el-icon>
- <span>{{ sectionInfo.members }} 成员</span>
- </div>
</div>
</div>
</div>
@@ -101,8 +94,8 @@
<div class="topic-meta">
<div class="author-info">
- <el-avatar :size="24">{{ topic.author.charAt(0) }}</el-avatar>
- <span class="author-name">{{ topic.author }}</span>
+ <el-avatar :size="24">{{ topic.user?.username ? topic.user.username.charAt(0) : 'A' }}</el-avatar>
+ <span class="author-name">{{ topic.user?.username || '匿名' }}</span>
<span class="create-time">{{ formatTime(topic.createTime) }}</span>
</div>
@@ -166,8 +159,8 @@
<div class="topic-meta">
<div class="author-info">
- <el-avatar :size="24">{{ topic.author.charAt(0) }}</el-avatar>
- <span class="author-name">{{ topic.author }}</span>
+ <el-avatar :size="24">{{ topic.user?.username ? topic.user.username.charAt(0) : 'A' }}</el-avatar>
+ <span class="author-name">{{ topic.user?.username || '匿名' }}</span>
<span class="create-time">{{ formatTime(topic.createTime) }}</span>
</div>
@@ -201,8 +194,8 @@
<!-- 分页 -->
<div class="pagination-wrapper">
<el-pagination
- v-model:current-page="currentPage"
- v-model:page-size="pageSize"
+ v-model="currentPage"
+ :page-size="pageSize"
:page-sizes="[20, 50, 100]"
:total="totalTopics"
layout="total, sizes, prev, pager, next, jumper"
@@ -313,9 +306,12 @@
Bell,
QuestionFilled
} from '@element-plus/icons-vue'
+import { getTopicsByForum, createTopic } from '@/api/topic'
+import Navbar from "@/components/Navbar.vue";
export default {
name: 'ForumSectionView',
+ components: {Navbar},
setup() {
const route = useRoute()
const router = useRouter()
@@ -381,60 +377,12 @@
}
])
- const topics = ref([
- {
- id: 2,
- title: '2024年度最佳科幻电影推荐榜单',
- author: 'SciFiFan',
- createTime: '2025-06-03T10:30:00',
- views: 1234,
- replies: 45,
- hot: true,
- featured: false,
- closed: false,
- hasNewReplies: true,
- lastReply: {
- author: 'MovieLover',
- time: '2025-06-03T14:25:00'
- }
- },
- {
- id: 3,
- title: '阿凡达2：水之道 观影感受分享',
- author: 'Avatar2Fan',
- createTime: '2025-06-02T16:45:00',
- views: 892,
- replies: 67,
- hot: false,
- featured: true,
- closed: false,
- hasNewReplies: false,
- lastReply: {
- author: 'CinemaExpert',
- time: '2025-06-03T12:10:00'
- }
- },
- {
- id: 4,
- title: '求推荐几部好看的悬疑电影',
- author: 'SuspenseLover',
- createTime: '2025-06-01T09:20:00',
- views: 456,
- replies: 23,
- hot: false,
- featured: false,
- closed: false,
- hasNewReplies: true,
- lastReply: {
- author: 'ThrillerFan',
- time: '2025-06-03T11:45:00'
- }
- }
- ])
+ const topics = ref([])
onMounted(() => {
const sectionId = route.params.id
fetchSectionData(sectionId)
+ fetchTopics()
})
const fetchSectionData = async (id) => {
@@ -457,9 +405,7 @@
sectionInfo.value = {
id: parseInt(id),
...sectionData,
- topics: 3256,
- replies: 18934,
- members: 1234
+ topics: 0 // 初始化为0，会在fetchTopics中更新为真实数量
}
totalTopics.value = 156
@@ -507,9 +453,12 @@
const fetchTopics = async () => {
loading.value = true
try {
- // 模拟API调用
- await new Promise(resolve => setTimeout(resolve, 500))
- console.log('获取主题列表:', { searchQuery: searchQuery.value, sortBy: sortBy.value, filterType: filterType.value })
+ // 调用后端API获取主题列表
+ const res = await getTopicsByForum(sectionInfo.value.id)
+ topics.value = res.data || res // 兼容不同返回结构
+ totalTopics.value = topics.value.length
+ // 同时更新顶部显示的主题数量
+ sectionInfo.value.topics = topics.value.length
} catch (error) {
ElMessage.error('获取主题列表失败')
} finally {
@@ -579,8 +528,20 @@
submitting.value = true
- // 模拟提交过程
- await new Promise(resolve => setTimeout(resolve, 1500))
+ // 构建主题数据
+ const topicData = {
+ title: newTopic.title,
+ content: newTopic.content,
+ forumId: sectionInfo.value.id, // 使用当前版块ID
+ tags: newTopic.tags,
+ isPinned: newTopic.options.includes('hot'),
+ isLocked: false
+ }
+
+ console.log('提交主题数据:', topicData)
+
+ // 调用API创建主题
+ const response = await createTopic(topicData)
ElMessage.success('主题发布成功！')
resetForm()
@@ -590,7 +551,8 @@
fetchTopics()
} catch (error) {
- console.error('表单验证失败:', error)
+ console.error('发布主题失败:', error)
+ ElMessage.error('发布主题失败，请重试')
} finally {
submitting.value = false
}