更新

src/components/live-message/index.tsx

@@ -4,6 +4,9 @@ import styles from './index.module.less'
 import Message from './message'
 import SendMessage from './send-message';
 import ItemList from './item-list'
+import JoinModel from './model/join-model';
+import LookModel from './model/look-model';
+import MessageModel from './model/message-model';
 
 type tabStatus = 'message' | 'join' | 'look'
 
@@ -53,9 +56,9 @@ export default defineComponent({
         <div class={styles.tabContent}>
           <Message />
           <div class={styles.tabList}>
-            {this.modelIndex === 'message' && <ItemList type="message" />}
-            {this.modelIndex === 'join' && <ItemList type="join" />}
-            {this.modelIndex === 'look' && <ItemList type="look" />}
+            <MessageModel v-show={this.modelIndex === 'message'} />
+            <JoinModel v-show={this.modelIndex === 'join'} />
+            <LookModel v-show={this.modelIndex === 'look'} />
           </div>
           <SendMessage />
         </div>

src/components/live-message/item-list.module.less

@@ -63,4 +63,12 @@
     padding: 3px 15px 1px;
     border-radius: 2px;
   }
+}
+
+.loadingStyle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }

src/components/live-message/item-list.tsx

@@ -9,17 +9,6 @@ import LookModel from './model/look-model';
 import JoinModel from './model/join-model';
 import MessageModel from './model/message-model';
 import { state } from '/src/state'
-const svg = `
-        <path class="path" d="
-          M 30 15
-          L 28 17
-          M 25.61 25.61
-          A 15 15, 0, 0, 1, 15 30
-          A 15 15, 0, 1, 1, 27.99 7.5
-          L 15 15
-        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
-      `
-
 type itemType = 'message' | 'join' | 'look'
 
 export default defineComponent({
@@ -34,13 +23,37 @@ export default defineComponent({
       messageList: [] as any[], // 回复学生列表
       joinList: [] as any[], // 连麦学生列表
       lookList: [] as any[], // 观看学生列表
+      loadingMessage: false, // 消息列表状态
+      loadingJoin: false, // 连麦列表状态
+      loadingLook: false, // 观看列表状态
     }
   },
   mounted() {
+    this.initStatus()
     event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
     event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
+    //
+    setTimeout(() => {
+      console.log('messageList', this.messageList)
+      if(this.type === 'join') {
+        this.loadingJoin = false;
+      } else if(this.type === 'look') {
+        this.loadingLook = false;
+      } else if(this.type === 'message') {
+        this.loadingMessage = false;
+      }
+    }, 2000);
   },
   methods: {
+    initStatus() {
+      if(this.type === 'join') {
+        this.loadingJoin = this.joinList.length > 0 ? false : true;
+      } else if(this.type === 'look') {
+        this.loadingLook = this.lookList.length > 0 ? false : true;
+      } else if(this.type === 'message') {
+        this.loadingMessage = this.messageList.length > 0 ? false : true;
+      }
+    },
     onMessage(value: any) {
       if (value && value.user) {
         console.log(state.user)
@@ -59,6 +72,7 @@ export default defineComponent({
           tempObj.isSelf = true
         }
         this.messageList.push(tempObj);
+        this.loadingLook = false
       }
       console.log(this.messageList)
     },
@@ -81,6 +95,8 @@ export default defineComponent({
         if (!isExist) {
           this.lookList.push(tempObj);
         }
+
+        this.loadingLook = false
       }
     }
   },
@@ -88,41 +104,25 @@ export default defineComponent({
     event.off(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onmessage);
     event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onmessage);
   },
-  computed: {
-    loading() {
-      switch (this.type) {
-        case 'message':
-          return this.messageList.length === 0
-        case 'join':
-          return this.joinList.length === 0
-        case 'look':
-          return this.lookList.length === 0
-        default:
-          return false
-      }
-    }
-  },
   render() {
     return (
-      <div style={{ minHeight: '100%' }} v-loading={this.loading} element-loading-spinner={svg}
-        element-loading-svg-view-box="-10, -10, 50, 50"
-        element-loading-background="rgba(0, 0, 0, 0.8)">
+      <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.type === 'message' ?
           this.messageList && this.messageList.length > 0 ? this.messageList.map(item => (
             <MessageModel data={this.messageList} />
-          )) : this.loading ? null : <Empty text="暂无学员互动！" icon="noData-no-message" />
+          )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员互动！" icon="noData-no-message" />
           : null}
 
         {this.type === 'join' ?
           this.joinList && this.joinList.length > 0 ? this.joinList.map(item => (
             <JoinModel data={this.joinList} />
-          )) : this.loading ? null : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />
+          )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />
           : null}
 
         {this.type === 'look' ?
           this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
             <LookModel data={this.lookList} />
-          )) : this.loading ? null : <Empty text="暂无学员观看！" icon="noData-no-user" />
+          )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员观看！" icon="noData-no-user" />
           : null}
       </div>
     )

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

@@ -66,4 +66,12 @@
     padding: 3px 15px 1px;
     border-radius: 2px;
   }
+}
+
+.loadingStyle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }

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

@@ -1,17 +1,21 @@
 import { defineComponent } from "vue";
 import styles from './index.module.less'
+import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
+import { state } from '/src/state'
+import dayjs from 'dayjs';
+import Empty from "/src/components/empty";
 
 export default defineComponent({
-  props: {
-    data: {
-      type: Array,
-      default: () => ([])
+  data() {
+    return {
+      joinList: [] as any[], // 连麦学生列表
+      loadingJoin: false, // 连麦列表状态
     }
   },
   render() {
     return (
-      <div>
-        {this.data.length > 0 ? this.data.map((item : any) => (
+      <div style={{ minHeight: '100%', position: 'relative' }}>
+        {this.joinList.length > 0 ? this.joinList.map((item : any) => (
           <div class={styles.itemContent}>
             <img src="/src/assets/home/placehorder-icon.png" alt="" />
             <div class={styles.itemInfo}>
@@ -26,7 +30,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : null}
+        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />}
       </div>
     )
   }

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

@@ -1,5 +1,9 @@
 import { defineComponent } from "vue";
 import styles from './index.module.less'
+import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
+import { state } from '/src/state'
+import dayjs from 'dayjs';
+import Empty from "/src/components/empty";
 
 export default defineComponent({
   props: {
@@ -8,13 +12,48 @@ export default defineComponent({
       default: () => ([])
     }
   },
+  data() {
+    return {
+      lookList: [] as any[], // 观看学生列表
+      loadingLook: false, // 观看列表状态
+    }
+  },
   mounted() {
-    console.log(this.data)
+    this.loadingLook = true
+    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
+    setTimeout(() => {
+      this.loadingLook = false;
+    }, 2000);
+  },
+  methods: {
+    onWelcome(value: any) {
+      console.log(value)
+      if (value && value.user) {
+        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
+        let tempObj = {
+          name: value.user.name,
+          id: value.user.id,
+          sendTime
+        }
+        // 判断是否有同一个人
+        let isExist = false;
+        this.lookList.forEach((item: any) => {
+          if (item.id === tempObj.id) {
+            isExist = true
+          }
+        })
+        if (!isExist) {
+          this.lookList.push(tempObj);
+        }
+
+        this.loadingLook = false
+      }
+    }
   },
   render() {
     return (
       <div>
-        {this.data.length > 0 ? this.data.map((item : any) => (
+        {this.lookList.length > 0 ? this.lookList.map((item : any) => (
           <div class={styles.itemContent}>
             <img src="/src/assets/home/placehorder-icon.png" alt="" />
             <div class={styles.itemInfo} >
@@ -23,7 +62,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : null}
+        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员观看！" icon="noData-no-user" />}
       </div>
     )
   }

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

@@ -1,6 +1,10 @@
 import { defineComponent } from "vue";
 import { ElTag } from "element-plus";
 import styles from './index.module.less'
+import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
+import { state } from '/src/state'
+import dayjs from 'dayjs';
+import Empty from "/src/components/empty";
 
 export default defineComponent({
   props: {
@@ -9,10 +13,51 @@ export default defineComponent({
       default: () => ([])
     }
   },
+  data() {
+    return {
+      messageList: [] as any[], // 回复学生列表
+      loadingMessage: false, // 观看列表状态
+    }
+  },
+  mounted() {
+    this.loadingMessage = true
+    event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
+
+    setTimeout(() => {
+      this.loadingMessage = false;
+    }, 2000);
+  },
+  beforeUnmount() {
+    event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
+  },
+  methods: {
+    onMessage(value: any) {
+      if (value && value.user) {
+        console.log(state.user)
+        console.log(value)
+        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
+
+        let tempObj = {
+          name: value.user?.name,
+          id: value.user.id,
+          isSelf: false,
+          content: value.content,
+          sendTime
+        }
+        // 判断是否是主播
+        if (value.user.id === state.user.id) {
+          tempObj.isSelf = true
+        }
+        this.messageList.push(tempObj);
+        this.loadingMessage = false
+      }
+      console.log(this.messageList)
+    }
+  },
   render() {
     return (
-      <div>
-        {this.data.length > 0 ? this.data.map((item : any) => (
+      <div style={{ minHeight: '100%', position: 'relative' }}>
+        {this.messageList.length > 0 ? this.messageList.map((item : any) => (
           <div class={styles.itemContent}>
             <img src="/src/assets/home/placehorder-icon.png" alt="" />
             <div class={styles.itemInfo}>
@@ -25,7 +70,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : null}
+        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员互动！" icon="noData-no-message" />}
       </div>
     )
   }