From d07bf4c95089b5ef37e8c2a00236f36479be188b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kaizheng=28=E9=83=91=E5=87=AF=29?= <kaizheng@upchina.com>
Date: Tue, 18 Feb 2025 20:48:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=81=E8=81=8A=E6=9C=80=E6=96=B0?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=8F=90=E9=86=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/circle.js                         |  9 ++++++
 src/views/Circle/components/ChatFrame.vue | 12 +++++++
 src/views/Circle/interact.vue             | 38 +++++++++++++++++++++--
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/api/circle.js b/src/api/circle.js
index 2f322f1..e793732 100644
--- a/src/api/circle.js
+++ b/src/api/circle.js
@@ -44,3 +44,12 @@ export function readMessage(data) {
     data,
   });
 }
+
+// APP查询未读数量
+export function msgUnreadCount(data) {
+  return request({
+    url: "/app/group/message/unreadCount",
+    method: "post",
+    data,
+  });
+}
diff --git a/src/views/Circle/components/ChatFrame.vue b/src/views/Circle/components/ChatFrame.vue
index 6864e46..f69e864 100644
--- a/src/views/Circle/components/ChatFrame.vue
+++ b/src/views/Circle/components/ChatFrame.vue
@@ -247,6 +247,18 @@ const {
 const maskUserName = (value) => {
   return value.charAt(0) + "**";
 };
+
+watch(
+  () => msgList.value,
+  () => {
+    msgList.value.length &&
+      localStorage.setItem(
+        `privateMsgUnreadCount-${route.query.id}-${store.state.userInfo.userId}`,
+        msgList.value[msgList.value.length - 1].id
+      );
+  },
+  { deep: true }
+);
 </script>
 <style scoped lang="scss">
 .interact-scroll {
diff --git a/src/views/Circle/interact.vue b/src/views/Circle/interact.vue
index edf3ee8..5c46398 100644
--- a/src/views/Circle/interact.vue
+++ b/src/views/Circle/interact.vue
@@ -12,7 +12,7 @@
     mode="closeable"
     :text="detail.notice"
   />
-  <van-tabs v-model:active="active" line-width="0.4rem">
+  <van-tabs v-model:active="active" line-width="0.4rem" @change="changeTab">
     <van-tab title="互动" :name="0">
       <ChatFrame
         :type="1"
@@ -31,7 +31,12 @@
         :stompClient="stompClient"
       />
     </van-tab>
-    <van-tab title="私聊" :name="2">
+    <van-tab
+      title="私聊"
+      :name="2"
+      :badge="privateMsgUnreadCount"
+      :show-zero-badge="false"
+    >
       <ChatFrame
         :type="5"
         :bsRefresh="active === 2"
@@ -80,7 +85,7 @@ import Nav from "@/components/NavBar.vue";
 import ChatFrame from "./components/ChatFrame.vue";
 import { useRouter, useRoute } from "vue-router";
 import { sendMessage } from "@/api/circle";
-import { getCircleDetail } from "@/api/circle";
+import { getCircleDetail, msgUnreadCount } from "@/api/circle";
 import useWebSocket from "./hooks/useWebSocket";
 import { useStore } from "vuex";
 
@@ -121,6 +126,9 @@ const privateMessage = (msg) => {
   // interactiveType	交互类型:1群聊;2私聊;3会话消息
   if ([1].includes(body.type)) {
     privateNewMsg.value = data;
+    if (active.value !== 2) {
+      privateMsgUnreadCount.value++;
+    }
   }
 };
 
@@ -158,6 +166,30 @@ const sendMsg = async () => {
     content.value = "";
   }
 };
+
+// 获取私聊未读消息
+const privateMsgUnreadCount = ref();
+const getMsgUnreadCount = async () => {
+  const lastId = localStorage.getItem(
+    `privateMsgUnreadCount-${route.query.id}-${store.state.userInfo.userId}`
+  );
+  if (!lastId) return;
+  let ret = await msgUnreadCount({
+    groupId: route.query.id,
+    type: 5,
+    lastId,
+  });
+  if (ret && ret.code === 0) {
+    privateMsgUnreadCount.value = ret.data;
+  }
+};
+getMsgUnreadCount();
+
+const changeTab = (tabName) => {
+  if (tabName === 2) {
+    privateMsgUnreadCount.value = 0;
+  }
+};
 </script>
 <style lang="scss" scoped>
 .set {