更新

src/components/live-message/index.module.less

@@ -38,6 +38,15 @@
     width: 20px;
     height: 20px;
   }
+  .point {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--live-time-status-background-color);
+    position: absolute;
+    right: -10px;
+    top: 5px;
+  }
   :global {
     .el-tabs__header {
       margin-bottom: 0;

src/components/live-message/index.tsx

@@ -9,6 +9,7 @@ import ItemList from './item-list'
 import JoinModel from './model/join-model';
 import LookModel from './model/look-model';
 import MessageModel from './model/message-model';
+import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'
 
 
 type tabStatus = 'message' | 'join' | 'look'
@@ -20,6 +21,17 @@ export default defineComponent({
       modelIndex: 'message' as tabStatus,
     }
   },
+  computed: {
+    joinStatus() {
+      console.log(this.modelIndex)
+      let status = runtimeModel.joinTips
+      if(runtimeModel.joinTips && this.modelIndex === 'join') {
+        status = false
+        runtimeModel.joinTips = false
+      }
+      return status
+    }
+  },
   mounted() {
     runtime.likeCount = state.user?.likeNum || 0
   },
@@ -51,7 +63,7 @@ export default defineComponent({
           <ElTabPane
             // @ts-ignore
             vSlots={{
-              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-evenEtc" color={this.modelIndex === 'join' ? '#00FFF0' : '#fff'} class={styles.tabIcon} />连麦</span>
+              label: () => <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}><SvgIcon name="message-evenEtc" color={this.modelIndex === 'join' ? '#00FFF0' : '#fff'} class={styles.tabIcon} />连麦 {this.joinStatus ? <i class={styles.point} ></i> : null}</span>
             }} name="join"></ElTabPane>
           <ElTabPane
             // @ts-ignore

src/components/live-message/model/join-model.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
       RuntimeModelUtils.removeLook(value.userId)
     },
     onSeatApply(evt: any) {
-      console.log(evt, 'onSeatApply joinModel')
+      // console.log(evt, 'onSeatApply joinModel')
       if (Array.isArray(evt)) {
         for (const id of evt) {
           console.log('onSeatApply', id)

src/components/live-message/model/look-model.tsx

@@ -32,8 +32,8 @@ export default defineComponent({
       return count
     },
   },
-  mounted() {
-    // this._init()
+  async mounted() {
+    await this._init()
     this.loadingLook = true
     event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
     setTimeout(() => {
@@ -49,39 +49,25 @@ export default defineComponent({
             roomUid: roomUid,
           }
         })
-        console.log('_init', res)
-      } catch {
-        //
-      }
-    },
-    onSeatResponse(value: any) {
-      console.log(value, 'onSeatResponse')
-      if(value.type == 3) {
-        runtimeModel.lookList.forEach((item: any) => {
-          if(item.id == value.audienceId) {
-            item.type = 1
+        const resList = res.data
+        resList.forEach((item: any) => {
+          // 判断是已经，存在学生
+          if(!runtimeModel.lookList[item.userId]) {
+            runtimeModel.lookList[item.userId] = {
+              id: item.userId,
+              name: item.userName,
+              type: 3,
+              userRoomType: 1,
+              time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+            }
           }
         })
-        // 判断是否是同一个人
-        let isExist = runtimeModel.joinList[value.audienceId]
-        console.log(runtimeModel.joinList)
-        if (!isExist) {
-          RuntimeModelUtils.addJoin(value.audienceId, {
-            id: value.audienceId,
-            name: value.audienceName,
-            audienceId: value.audienceId,
-            audienceName: value.audienceName,
-            teacherId: state.user?.id,
-            teacherName: state.user?.speakerName,
-            type: 1
-          })
-        } else {
-          runtimeModel.joinList[value.audienceId].type = 1
-        }
+      } catch {
+        //
       }
     },
     onWelcome(value: any) {
-      console.log(value)
+      // console.log(value)
       if (value && value.user) {
         const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
         let tempObj = {

src/components/live-message/model/runtime.ts

@@ -3,6 +3,7 @@ import { reactive, ref } from 'vue'
 const runtime = reactive({
   messageList: [] as Array<any>,
   joinList: {} as { [key: string]: any },
+  joinTips: false as boolean, // 是否显示加入提示
   lookList: {} as { [key: string]: any },
 })
 
@@ -33,6 +34,7 @@ export const addMessage = (message: Message) => {
  * 添加上麦消息
  */
 export const addJoin = (key: string, message: Message) => {
+  runtime.joinTips = true
   runtime.joinList[key] = message
 }
 /**

src/helpers/request.ts

@@ -76,6 +76,7 @@ request.interceptors.response.use(async (res, options) => {
       if(!hideMessage) {
         ElMessage.error(`登录过期，请重新登录！`)
       }
+      removeToken()
       router.push(`/login`)
     }
     if(data.code === 404) {

yarn.lock

@@ -3038,6 +3038,11 @@ loader-utils@^1.1.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loaders.css@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmmirror.com/loaders.css/-/loaders.css-0.1.2.tgz#3a9fb43726c73334a38142af9d0629019b658743"
+  integrity sha512-Rhowlq24ey1VOeor+3wYOt9+MjaxBOJm1u4KlQgNC3+0xJ0LS4wq4iG57D/BPzvuD/7HHDGQOWJ+81oR2EI9bQ==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"