更新

src/components/empty/index.tsx

@@ -7,10 +7,6 @@ export default defineComponent({
       type: String,
       default: '暂无数据'
     },
-    iconClass: {
-      type: String,
-      default: ''
-    },
     icon: {
       type: String,
       default: 'noData-no-message'
@@ -19,7 +15,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles["empty-container"]}>
-        <SvgIcon name={this.icon} class={[styles.icon, this.iconClass]} />
+        <SvgIcon name={this.icon} class={[styles.icon]} />
         <p class={styles['empty-text']}>{this.text}</p>
       </div>
     )

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

@@ -1,11 +1,13 @@
 import { defineComponent } from "vue";
-import { ElTag, ElIcon, ElButton } from "element-plus";
+// import { ElTag, ElIcon, ElButton } from "element-plus";
 import styles from './item-list.module.less';
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import dayjs from 'dayjs';
 import Empty from "../empty";
 // import VirtualList from 'vue-virtual-scroll-list';
 import LookModel from './model/look-model';
+import JoinModel from './model/join-model';
+import MessageModel from './model/message-model';
 
 type itemType = 'message' | 'join' | 'look'
 
@@ -47,59 +49,22 @@ export default defineComponent({
   render() {
     return (
       <div>
-        { this.type === 'message' ? 
+        { this.type === 'message' ?
           this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
-            <div class={styles.itemContent}>
-              <img src="/src/assets/home/placehorder-icon.png" alt="" />
-              <div class={styles.itemInfo}>
-                <div class={styles.itemName}>
-                  <p class={styles.userName}>唐老师 <ElTag >主播</ElTag></p>
-                  <p class={styles.rightTime}>18:30:00</p>
-                </div>
-                <div class={styles.itemText}>
-                  请问老师，我在乐团学习长笛已经2年了，目前可以把1-4级都熟练吹奏，接下来要怎么继续提高呢？
-                </div>
-              </div>
-            </div>
-          )) : <Empty text="暂无学员互动！" iconClass="" icon="noData-no-message" />
+            <MessageModel />
+          )) : <Empty text="暂无学员互动！" icon="noData-no-message" />
         : null }
 
         { this.type === 'join' ?
           this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
-            <div class={styles.itemContent}>
-              <img src="/src/assets/home/placehorder-icon.png" alt="" />
-              <div class={styles.itemInfo}>
-                <div class={styles.itemName}>
-                  <p class={styles.userName}>唐老师 </p>
-                </div>
-                <div class={styles.joinText}>
-                  <div class={styles.join}>
-                    申请连麦
-                  </div>
-                  <div class={styles.btn}>下麦</div>
-                </div>
-              </div>
-            </div>
+            <JoinModel />
           )) : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />
         : null }
 
         { this.type === 'look' ?
-        // <VirtualList
-        //   data-key="id"
-        //   data-sources={this.lookList}
-        //   data-component={LookModel}
-        // />
-        this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
-          <div class={styles.itemContent}>
-            <img src="/src/assets/home/placehorder-icon.png" alt="" />
-            <div class={styles.itemInfo} >
-              <div class={styles.itemName}>
-                <p class={styles.userName}>{item.name}</p>
-              </div>
-            </div>
-          </div>
-        )) : <Empty text="暂无学员观看！" icon="noData-no-user" />
-
+          this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
+            <LookModel data={this.lookList} />
+          )) : <Empty text="暂无学员观看！" icon="noData-no-user" />
         : null }
       </div>
     )

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

@@ -1,3 +1,15 @@
+.itemContent {
+  padding: 16px;
+  display: flex;
+  color: var(--live-color);
+  & > img {
+    width: 28px;
+    height: 28px;
+    margin-right: 8px;
+  }
+}
+
+
 .itemInfo {
   width: 100%;
 }

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

@@ -0,0 +1,33 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  render() {
+    return (
+      <div>
+        {this.data.length > 0 ? this.data.map((item : any) => (
+          <div class={styles.itemContent}>
+            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <div class={styles.itemInfo}>
+              <div class={styles.itemName}>
+                <p class={styles.userName}>唐老师 </p>
+              </div>
+              <div class={styles.joinText}>
+                <div class={styles.join}>
+                  申请连麦
+                </div>
+                <div class={styles.btn}>下麦</div>
+              </div>
+            </div>
+          </div>
+        )) : null}
+      </div>
+    )
+  }
+})

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

@@ -2,12 +2,28 @@ import { defineComponent } from "vue";
 import styles from './index.module.less'
 
 export default defineComponent({
+  props: {
+    data: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  mounted() {
+    console.log(this.data)
+  },
   render() {
     return (
-      <div class={styles.itemInfo}>
-        <div class={styles.itemName}>
-          <p class={styles.userName}>唐老师</p>
-        </div>
+      <div>
+        {this.data.length > 0 ? this.data.map((item : any) => (
+          <div class={styles.itemContent}>
+            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <div class={styles.itemInfo} >
+              <div class={styles.itemName}>
+                <p class={styles.userName}>{item.name}</p>
+              </div>
+            </div>
+          </div>
+        )) : null}
       </div>
     )
   }

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

@@ -0,0 +1,31 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+  props: {
+    data: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  render() {
+    return (
+      <div>
+        {this.data.length > 0 ? this.data.map((item : any) => (
+          <div class={styles.itemContent}>
+            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <div class={styles.itemInfo}>
+              <div class={styles.itemName}>
+                <p class={styles.userName}>唐老师 <ElTag >主播</ElTag></p>
+                <p class={styles.rightTime}>18:30:00</p>
+              </div>
+              <div class={styles.itemText}>
+                请问老师，我在乐团学习长笛已经2年了，目前可以把1-4级都熟练吹奏，接下来要怎么继续提高呢？
+              </div>
+            </div>
+          </div>
+        )) : null}
+      </div>
+    )
+  }
+})