hookehuyr

feat(消息): 添加未读消息红点显示功能

在TabBar和消息页面添加未读消息红点显示
更新用户状态管理以支持消息计数
调整搜索栏提示文本和红点样式大小
......@@ -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)
/**
* 获取当前页面路径并设置激活状态
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-23 14:51:20
* @LastEditTime: 2025-07-23 16:00:30
* @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)
......
......@@ -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: 8rpx;
width: 16rpx;
}
.h-2 {
height: 8rpx;
height: 16rpx;
}
// .rounded-full {
......
/*
* @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
},
......