更新初始化

src/layout/components/AppMain.vue

@@ -64,22 +64,33 @@
       操作手册
     </div>
 
-    <svg
-      t="1659606821949"
-      class="icon optionMessage"
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      p-id="3078"
-      width="48"
-      height="48"
-      @click="chatVisible = true"
-    >
-      <path
-        d="M512 796a456.672 456.672 0 0 1-74.768-6.4L262 896V718.976C170.64 654.832 112 556.48 112 446 112 252.704 291.088 96 512 96s400 156.704 400 350S732.912 796 512 796z m0-650c-193.296 0-350 134.32-350 300 0 101.664 59.2 191.344 149.376 245.6l-1.6 115.968 117.68-70.736a404.8 404.8 0 0 0 84.544 9.168c193.296 0 350-134.304 350-300S705.296 146 512 146zM336 400a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z"
-        p-id="3079"
-      ></path>
-    </svg>
+    <div class="chart-join">
+      <el-badge
+        :value="noReadNum"
+        class="item"
+        :max="99"
+        :hidden="noReadNum <= 0"
+      >
+        <!-- <el-button size="small">评论</el-button> -->
+        <svg
+          t="1659606821949"
+          class="icon optionMessage"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="3078"
+          width="48"
+          height="48"
+          @click="chatVisible = true"
+        >
+          <path
+            d="M512 796a456.672 456.672 0 0 1-74.768-6.4L262 896V718.976C170.64 654.832 112 556.48 112 446 112 252.704 291.088 96 512 96s400 156.704 400 350S732.912 796 512 796z m0-650c-193.296 0-350 134.32-350 300 0 101.664 59.2 191.344 149.376 245.6l-1.6 115.968 117.68-70.736a404.8 404.8 0 0 0 84.544 9.168c193.296 0 350-134.304 350-300S705.296 146 512 146zM336 400a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z m176 0a48 48 0 1 1-48 48 48 48 0 0 1 48-48z"
+            p-id="3079"
+          ></path>
+        </svg>
+      </el-badge>
+    </div>
+
     <el-drawer
       title="操作手册"
       :visible.sync="outOptionvisible"
@@ -151,10 +162,11 @@
       :append-to-body="true"
       :visible.sync="chatVisible"
       size="910px"
+      :class="chatVisible ? '' : 'drawer-container'"
       custom-class="innerDrawer"
       :withHeader="false"
     >
-      <chat-model @close="chatVisible = false" />
+      <chat-model ref="chatModel" @close="chatVisible = false" />
     </el-drawer>
   </section>
 </template>
@@ -172,6 +184,19 @@ import {
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
+
+import { core, CoreEvent } from "./imkit";
+import * as RongIMLib from "@rongcloud/imlib-next";
+import { custom_service } from "./modal/chat.js";
+// 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
+let libOption = { appkey: "c9kqb3rdc451j" };
+// 初始化 SDK
+core.init({
+  service: custom_service,
+  libOption: libOption,
+  conversationPullCount: 20
+});
+
 export default {
   name: "AppMain",
   data() {
@@ -187,7 +212,8 @@ export default {
       allIdList: [],
       isShow: false,
       activeImg: null,
-      chatVisible: false
+      chatVisible: true,
+      noReadNum: 0 // 消息未读数
     };
   },
   components: { serviceRemind, chatModel },
@@ -209,6 +235,9 @@ export default {
     }
   },
   async mounted() {
+    console.log(this.$store.state.user, "userInfo");
+    this.chatVisible = false;
+    // console.log(this.$ref.chatModel);
     this.$bus.$on("showguide", obj => {
       this.guideList = [];
       obj.forEach(element => {
@@ -222,11 +251,44 @@ export default {
       const res = await getSysManualMenuIds();
       this.allIdList = res.data.split(",");
     } catch (e) {}
+
+    this.init();
   },
   beforeDestroy() {
     this.$bus.$off("showguide", () => {});
+    // core.off(CoreEvent.MESSAGES, this.handleMessages);
+    const Events = RongIMLib.Events;
+    RongIMLib.removeEventListener(Events.MESSAGES, this.handleMessages);
   },
   methods: {
+    init() {
+      core.connect(this.$store.state.user.imToken).then(res => {
+        if (res.code === RongIMLib.ErrorCode.SUCCESS) {
+          console.log("链接成功, 链接用户 id 为: ", res.data.userId);
+          // this.isConnect = true;
+          this.getNoReadMessage();
+        } else {
+          console.warn("链接失败, code:", res.code);
+        }
+      });
+
+      const Events = RongIMLib.Events;
+      RongIMLib.addEventListener(Events.MESSAGES, this.handleMessages);
+    },
+    handleMessages(newMessage) {
+      console.log(newMessage, "newMessage");
+      this.getNoReadMessage();
+    },
+    getNoReadMessage() {
+      RongIMLib.getTotalUnreadCount().then(res => {
+        if (res.code === 0) {
+          console.log(res.code, res);
+          this.noReadNum = res.data || 0;
+        } else {
+          console.log(res.code, res.msg, res);
+        }
+      });
+    },
     showInstructions() {
       this.isShow = !this.isShow;
     },
@@ -291,6 +353,10 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.drawer-container {
+  display: none;
+}
+
 .previewImg {
 }
 ::v-deep .el-drawer__header {
@@ -343,11 +409,19 @@ export default {
   z-index: 3999;
 }
 
-.optionMessage {
-  cursor: pointer;
+.chart-join {
   position: fixed;
   right: 36px;
   bottom: 36px;
+
+  ::v-deep .el-badge__content {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.optionMessage {
+  cursor: pointer;
   padding: 6px;
   width: 46px;
   height: 46px;
@@ -475,4 +549,4 @@ export default {
 .el-image-viewer__close {
   display: none !important;
 }
-</style>
+</style>

src/layout/components/modal/chat-model.vue

@@ -107,17 +107,17 @@ import ContactsList from "../components/contacts-list.vue";
 import ClassList from "../components/class-list.vue";
 import { core, CoreEvent } from "../imkit";
 import * as RongIMLib from "@rongcloud/imlib-next";
-import { custom_service } from "./chat.js";
-import ItemVue from "../Sidebar/Item.vue";
-// 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
-let libOption = { appkey: "c9kqb3rdc451j" };
+// import { custom_service } from "./chat.js";
+// import ItemVue from "../Sidebar/Item.vue";
+// // 接入时需要将 '请更换您应用的 appkey' 替换为您的应用的 appkey
+// let libOption = { appkey: "c9kqb3rdc451j" };
 
-// 初始化 SDK
-core.init({
-  service: custom_service,
-  libOption: libOption,
-  conversationPullCount: 20
-});
+// // 初始化 SDK
+// core.init({
+//   service: custom_service,
+//   libOption: libOption,
+//   conversationPullCount: 20
+// });
 
 export default {
   components: {
@@ -141,14 +141,6 @@ export default {
     };
   },
   mounted() {
-    core.connect(this.$store.state.user.imToken).then(res => {
-      if (res.code === RongIMLib.ErrorCode.SUCCESS) {
-        console.log("链接成功, 链接用户 id 为: ", res.data.userId);
-        this.isConnect = true;
-      } else {
-        console.warn("链接失败, code:", res.code);
-      }
-    });
     core.on(CoreEvent.SWITCH_CONVERSATION, this.switchConversation);
 
     // 注册消息监听器
@@ -157,6 +149,16 @@ export default {
     // });
   },
   methods: {
+    init() {
+      core.connect(this.$store.state.user.imToken).then(res => {
+        if (res.code === RongIMLib.ErrorCode.SUCCESS) {
+          console.log("链接成功, 链接用户 id 为: ", res.data.userId);
+          this.isConnect = true;
+        } else {
+          console.warn("链接失败, code:", res.code);
+        }
+      });
+    },
     onSelect(item) {
       console.log(item, "item");
       core.selectConversation({