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-24 10:57:59 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
d1c6c4b3e953fc8d40f6dcefc5b0cdf01a7a43b8
d1c6c4b3
1 parent
1517150e
feat(消息): 添加未读消息红点显示功能
在TabBar和消息页面添加未读消息红点显示 更新用户状态管理以支持消息计数 调整搜索栏提示文本和红点样式大小
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
22 additions
and
11 deletions
src/components/TabBar.vue
src/pages/auth/index.vue
src/pages/messages/index.vue
src/stores/user.js
src/components/TabBar.vue
View file @
d1c6c4b
...
...
@@ -34,8 +34,15 @@
<view
@click="navigateTo('/pages/messages/index')"
:class="getTabClass('messages')"
class="relative"
>
<Message size="20" :color="getIconColor('messages')" />
<!-- 未读消息红点 -->
<div
v-if="unreadCount > 0"
class="absolute top-0 right-0 bg-red-500 rounded-full w-2 h-2"
>
</div>
<span class="text-xs mt-1">消息</span>
</view>
...
...
@@ -53,7 +60,7 @@
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted
, computed
} from 'vue'
import Taro from '@tarojs/taro'
import { Home, Category, Message, My } from '@nutui/icons-vue-taro'
import { useUserStore } from '@/stores/user'
...
...
@@ -63,6 +70,8 @@ import { checkPermission, PERMISSION_TYPES } from '@/utils/permission'
const activeTab = ref('')
// 用户状态管理
const userStore = useUserStore()
// 未读消息数量
const unreadCount = computed(() => userStore.userInfo.message_count)
/**
* 获取当前页面路径并设置激活状态
...
...
src/pages/auth/index.vue
View file @
d1c6c4b
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-23 1
4:51:2
0
* @LastEditTime: 2025-07-23 1
6:00:3
0
* @FilePath: /jgdl/src/pages/auth/index.vue
* @Description: 文件描述
-->
...
...
@@ -91,8 +91,8 @@ export default {
// 测试环境下传递openid,正式环境不传递
if (process.env.NODE_ENV === 'development') {
// requestData.openid = 'h-008';
requestData.openid = 'h-009';
//
requestData.openid = 'oWbdFvkD5VtloC50wSNR9IWiU2q8';
//
requestData.openid = 'h-009';
requestData.openid = 'oWbdFvkD5VtloC50wSNR9IWiU2q8';
}
request.post('/srv/?a=openid', requestData)
...
...
src/pages/messages/index.vue
View file @
d1c6c4b
...
...
@@ -8,7 +8,7 @@
</nut-col> -->
<nut-col span="24">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="
搜索消息
" @blur="onBlurSearch" @clear="onBlurSearch" shape="round"
<nut-searchbar v-model="searchValue" placeholder="
按联系人名字/系统通知内容搜索
" @blur="onBlurSearch" @clear="onBlurSearch" shape="round"
background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
...
...
@@ -58,7 +58,7 @@
<text class="font-medium truncate flex-1 mr-2">{{ conversation.name }}</text>
<view class="flex items-center flex-shrink-0">
<text class="text-xs text-gray-500">{{ conversation.time }}</text>
<view v-if="conversation.unread" class="ml-1
w-2 h-2 bg-red-500 rounded-full
">
<view v-if="conversation.unread" class="ml-1
bg-red-500 rounded-full w-2 h-2
">
</view>
</view>
</view>
...
...
@@ -584,11 +584,11 @@ onUnmounted(() => {
}
.w-2 {
width:
8
rpx;
width:
16
rpx;
}
.h-2 {
height:
8
rpx;
height:
16
rpx;
}
// .rounded-full {
...
...
src/stores/user.js
View file @
d1c6c4b
/*
* @Date: 2025-01-08 18:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-
09 11:22:03
* @LastEditTime: 2025-07-
24 10:52:42
* @FilePath: /jgdl/src/stores/user.js
* @Description: 用户状态管理
*/
...
...
@@ -22,7 +22,8 @@ export const useUserStore = defineStore('user', {
avatar_url
:
''
,
follower_count
:
0
,
order_count
:
0
,
favorite_count
:
0
favorite_count
:
0
,
message_count
:
0
,
},
isAuthenticated
:
false
,
isLoading
:
false
...
...
@@ -99,7 +100,8 @@ export const useUserStore = defineStore('user', {
avatar_url
:
''
,
follower_count
:
0
,
order_count
:
0
,
favorite_count
:
0
favorite_count
:
0
,
message_count
:
0
,
}
this
.
isAuthenticated
=
false
},
...
...
Please
register
or
login
to post a comment