Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
jgdl
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-07-23 10:40:56 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
9dbc94cb66b4a2b276bf2d8260fe96a1818dcd18
9dbc94cb
1 parent
55c4ea46
feat(消息列表): 添加消息轮询功能以实时更新消息列表
添加轮询机制,每隔30秒自动获取最新消息 在搜索和切换标签时自动重启轮询 页面卸载时清理定时器防止内存泄漏
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
89 additions
and
1 deletions
src/pages/messages/index.vue
src/pages/messages/index.vue
View file @
9dbc94c
...
...
@@ -96,7 +96,7 @@
</template>
<script setup>
import { ref, computed, onMounted, markRaw } from 'vue'
import { ref, computed, onMounted,
onUnmounted,
markRaw } from 'vue'
import { Search2, Notice } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import MessageDetail from '@/components/MessageDetail.vue'
...
...
@@ -125,6 +125,8 @@ const onBlurSearch = async () => {
hasMore.value = true
// 重新获取数据
await initData()
// 重新启动轮询以适应新的搜索条件
startPolling()
}
// 当前激活的Tab
const activeTab = ref('all')
...
...
@@ -137,6 +139,10 @@ const pageSize = 10
// 是否还有更多数据
const hasMore = ref(true)
// 轮询相关
const pollingTimer = ref(null)
const POLLING_INTERVAL = 30000 // 30秒
// 对话数据
const conversations = ref([])
...
...
@@ -147,6 +153,79 @@ const selectedConversation = ref(null)
// 模拟消息历史记录
const mockMessages = ref([])
/**
* 轮询获取消息列表
*/
const pollMessages = async () => {
try {
// 静默获取数据,不显示loading状态
const params = {
page: 0,
limit: pageSize
}
// 根据activeTab设置过滤参数
if (activeTab.value === 'unread') {
params.status = 3 // 未读
} else if (activeTab.value === 'system') {
params.type = 'system' // 系统消息
}
// 如果有搜索关键词
if (searchValue.value) {
params.keyword = searchValue.value
}
const response = await getMessagesListAPI(params)
if (response.code && response.data && response.data.list) {
// 转换API数据格式为组件需要的格式
const transformedData = response.data.list.map(item => ({
id: item.id,
name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
icon: item.type === 'system' ? markRaw(Notice) : null,
lastMessage: item.note || '',
time: item.created_time_desc || '',
unread: item.status === 3, // 3=未读,5=已读
type: item.type,
create_time: item.create_time
}))
// 更新消息列表,保持当前页面状态
conversations.value = transformedData
}
} catch (error) {
console.error('轮询获取消息列表失败:', error)
// 轮询失败时不显示错误提示,避免干扰用户
}
}
/**
* 启动轮询
*/
const startPolling = () => {
// 清除现有定时器
if (pollingTimer.value) {
clearInterval(pollingTimer.value)
}
// 启动新的定时器
pollingTimer.value = setInterval(() => {
pollMessages()
}, POLLING_INTERVAL)
}
/**
* 停止轮询
*/
const stopPolling = () => {
if (pollingTimer.value) {
clearInterval(pollingTimer.value)
pollingTimer.value = null
}
}
// 初始化数据
const initData = async () => {
try {
...
...
@@ -256,6 +335,8 @@ const setActiveTab = async (tabKey) => {
}, 50);
// 重新获取数据
await initData();
// 重新启动轮询以适应新的筛选条件
startPolling();
// 添加淡入效果
setTimeout(() => {
...
...
@@ -426,6 +507,13 @@ onMounted(async () => {
}
}, 500);
await initData()
// 启动轮询
startPolling()
})
// 页面卸载时清理轮询
onUnmounted(() => {
stopPolling()
})
</script>
...
...
Please
register
or
login
to post a comment