添加IM

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.ebh4md1jt78"
+    "revision": "0.t8a3g7sakg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/layout/imGroup.tsx

@@ -0,0 +1,35 @@
+import { defineComponent, ref } from 'vue';
+import { useUserStore } from '/src/store/modules/users';
+import styles from './index.module.less';
+import { NSpin } from 'naive-ui';
+
+export default defineComponent({
+  name: 'imGroup',
+  setup() {
+    const userStore = useUserStore();
+    const isLoading = ref(false);
+    const iframeRef = ref();
+    const isLoaded = ref(false);
+    // const renderError = ref(false);
+    // const renderSuccess = ref(false);
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://test.lexiaoya.cn'
+      : location.origin;
+    const src = `${origin}/classroom-im/?userID=${userStore.getUserInfo.imUserId}&Authorization=${userStore.getToken}`;
+
+    return () => (
+      <div class={styles.imGroupContainer}>
+        <NSpin show={!isLoaded.value}>
+          <iframe
+            ref={iframeRef}
+            onLoad={() => {
+              isLoaded.value = true;
+            }}
+            class={[styles.container]}
+            frameborder="0"
+            src={src}></iframe>
+        </NSpin>
+      </div>
+    );
+  }
+});

src/components/layout/index.module.less

@@ -421,4 +421,16 @@
 .modeWrap {
   overflow: hidden;
   border-radius: 16px;
-}
+}
+
+.imGroupContainer,
+.container {
+  background-color: #fff;
+  width: 968Px;
+  height: 640Px;
+  border-radius: 15Px;
+}
+
+.hideModal {
+  visibility: hidden;
+}

src/components/layout/layoutTop.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, onMounted, onBeforeMount } from 'vue';
 import styles from './index.module.less';
 import { NImage, NBadge, NPopover, NIcon, NModal, NTooltip } from 'naive-ui';
 import schoolIcon from './images/schoolIcon.png';
@@ -14,6 +14,7 @@ import { storeToRefs } from 'pinia';
 
 import 'animate.css';
 import ForgotPassword from '/src/views/setting/modal/forgotPassword';
+import ImGroup from './imGroup';
 
 export default defineComponent({
   name: 'layoutTop',
@@ -21,6 +22,8 @@ export default defineComponent({
     const router = useRouter();
     const noReadCount = ref(0); // 未读数
     const showHeadFlag = ref(false);
+    const showImGroup = ref(false);
+    const showImGroupLoading = ref(true);
 
     const users = useUserStore();
     const showWord = ref(false);
@@ -38,6 +41,29 @@ export default defineComponent({
       console.log('resetPwd');
     };
 
+    onMounted(() => {
+      window.addEventListener('message', onImMessage);
+      showImGroup.value = true;
+      // showImGroupLoading.value = true;
+      setTimeout(() => {
+        showImGroup.value = false;
+      }, 50);
+      setTimeout(() => {
+        showImGroupLoading.value = false;
+      }, 1000);
+    });
+
+    const onImMessage = (evt: MessageEvent) => {
+      if (evt.data.api === 'onImClose') {
+        showImGroup.value = false;
+      } else if (evt.data.api === 'getNoReadMessageCount') {
+        noReadCount.value = evt.data.count || 0;
+      }
+    };
+
+    onBeforeMount(() => {
+      window.removeEventListener('message', onImMessage);
+    });
     return () => (
       <>
         <div class={styles.layoutTop}>
@@ -52,20 +78,22 @@ export default defineComponent({
             </p>
           </div>
           <div class={styles.layoutRight}>
-            <NBadge
-              value={noReadCount.value}
-              max={99}
-              class={styles.messageBadge}
-              {...{ id: 'home-2' }}
-              color={'#FF1036'}>
-              <NImage
-                class={[
-                  styles.messageIcon,
-                  noReadCount.value > 0 ? styles.animation : ''
-                ]}
-                preview-disabled
-                src={messageIcon}></NImage>
-            </NBadge>
+            <div onClick={() => (showImGroup.value = true)}>
+              <NBadge
+                value={noReadCount.value}
+                max={99}
+                class={styles.messageBadge}
+                {...{ id: 'home-2' }}
+                color={'#FF1036'}>
+                <NImage
+                  class={[
+                    styles.messageIcon,
+                    noReadCount.value > 0 ? styles.animation : ''
+                  ]}
+                  preview-disabled
+                  src={messageIcon}></NImage>
+              </NBadge>
+            </div>
 
             <div class={styles.line}></div>
             <NPopover
@@ -181,6 +209,14 @@ export default defineComponent({
               }}
             />
           </NModal>
+
+          <NModal
+            v-model:show={showImGroup.value}
+            showIcon={false}
+            class={showImGroupLoading.value ? styles.hideModal : ''}
+            displayDirective="show">
+            <ImGroup />
+          </NModal>
         </div>
       </>
     );

src/main.ts

@@ -32,5 +32,3 @@ async function setupApp() {
 }
 
 setupApp();
-
-// export { SDKAppID, secretKey };