优化页面

components/tabBar/tabBar.vue

@@ -15,6 +15,7 @@
             class="item-img"
             :src="tabIndex == index ? item.selectedIconPath : item.iconPath"
           />
+          <view class="Unreadcss" v-if="index === 3 && Unread > 0">{{ Unread > 99 ? '99+':Unread }}</view>
         </view>
         <view
           class="item-text font-20"
@@ -33,23 +34,47 @@ import NewAddedPk from "../../pages/NewAddedPk/NewAddedPk.vue";
 import VerifyLogin from "../VerifyLogin.js";
 import { getCurrentInstance, defineProps, onMounted,onUnmounted,reactive, ref } from "vue";
 import { TUIStore,StoreName } from '@tencentcloud/chat-uikit-engine';
+require.async('../../TUIKit/components/TUIConversation/entry.js');
 let showMiddleButton = ref(false);
 const conversationList = ref([]);
+let Unread = ref(0);
+// 监听会话列表变化
 onMounted(() => {
 TUIStore.watch(StoreName.CONV, {
     conversationList: onConversationListUpdated,
   });
 });
 //conversationList[0].unreadCount
+// 组件销毁时取消监听
 onUnmounted(() => {
   TUIStore.unwatch(StoreName.CONV, {
     conversationList: onConversationListUpdated,
   });
 });
+// 监听会话列表变化
 function onConversationListUpdated(list) {
   conversationList.value = list;
-  console.log("conversationList", list);
+  Unread.value = calculateUnreadCount(list);
+  
 }
+// 计算未读消息总数
+function calculateUnreadCount(arr) {
+    let total = 0;
+    for (const item of arr) {
+        // 检查对象是否包含 unreadCount 属性
+        if (!item.hasOwnProperty('unreadCount')) {
+            return null;
+        }
+        const count = item.unreadCount;
+        // 检查值是否为有效数值类型
+        if (typeof count !== 'number' || !Number.isFinite(count)) {
+            return null;
+        }
+        total += count;
+    }
+    return total;
+}
+
 const props = defineProps({
   tabIndex: Number,
 });
@@ -95,10 +120,7 @@ onMounted(() => {
 
 uni.getSystemInfo({
   success: function (res) {
-    // iPhone机型有横杆的导航栏高度大于40
-    console.log("机型", res.deviceType);
     if (res.safeArea.top > 40) {
-      console.log("苹果的底部栏大小", res.safeArea.top);
     }
   },
 });
@@ -267,4 +289,18 @@ function handlePush(item, index) {
     background-color: #ffffff;
   }
 }
+.Unreadcss{
+  background-color: #ff0000;
+  margin-top: -65rpx;
+  width: 30rpx;
+  height: 30rpx;
+  border-radius: 50%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 18rpx;
+  color: #ffffff;
+  line-height: 30rpx;
+  margin-left: 30rpx;
+  z-index: 1001;
+}
 </style>