更新

src/App.vue

@@ -6,7 +6,10 @@ const parseSearch: any = qs.parse(location.search)
 const hashSearch = location.href.split('#/')[1]
 const hashParams = qs.parse(hashSearch.split('?')[1])
 const roomUid: string = parseSearch.roomUid || hashParams.roomUid || ''
-sessionStorage.setItem('roomUid', roomUid)
+// 如果房间号的值时则替换
+if(roomUid) {
+  sessionStorage.setItem('roomUid', roomUid)
+}
 </script>
 
 <template>

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

@@ -101,7 +101,6 @@ export default defineComponent({
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {list.length > 0 ? list.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}>
@@ -126,7 +125,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
+        )) : this.loadingJoin ? <div class={styles.loadingStyle}><div class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0.8);"><div class="el-loading-spinner"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg></div></div></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
       </div>
     )
   }

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

@@ -148,16 +148,14 @@ export default defineComponent({
       <div>
         {runtimeModel.lookList.length > 0 ? runtimeModel.lookList.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>
                 {item.type == 1 ? <ElButton size="small" type="primary" class={styles.btn} onClick={() => this.onUpLook(item)}>上麦</ElButton> : <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.onDownLook(item)}>下麦</ElButton>}
-                {/* {item.type == 1 ? <a href="javascript:;" class={[styles.btn, styles.downBtn]} onClick={() => this.onDownLook(item)}>下麦</a> : <a href="javascript:;" class={styles.btn} onClick={() => this.onUpLook(item)}>上麦</a>} */}
               </div>
             </div>
           </div>
-        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员观看！" icon="noData-no-user" />}
+        )) : this.loadingLook ? <div class={styles.loadingStyle} ><div class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0.8);"><div class="el-loading-spinner"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg></div></div></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员观看！" icon="noData-no-user" />}
       </div>
     )
   }

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

@@ -11,12 +11,6 @@ import Empty from "/src/components/empty";
 import runtime, * as RuntimeUtils from '/src/components/live-message/model/runtime'
 
 export default defineComponent({
-  props: {
-    data: {
-      type: Array,
-      default: () => ([])
-    }
-  },
   data() {
     return {
       messageList: [] as any[], // 回复学生列表
@@ -85,48 +79,9 @@ export default defineComponent({
   },
   render() {
     return (
-      // <RecycleScroller class="virtual-list"
-      //   style="height: 185px"
-      //   item-height={85}
-      //   items={this.messageList}
-      //   key-field="id"
-      // >
-      //   <div style={{ color: '#fff' }}>showInfo</div>
-      // </RecycleScroller>
-      //     <VirtualList class="list-dynamic scroll-touch"
-      //     :data-key="'id'"
-      //     :data-sources="items"
-      //     :estimate-size="80"
-      //     :item-class="'list-item-dynamic'"
-      //     ref="virtualList"
-      //   >
-      //   <template #={source}>
-      //       <div class="item-inner">
-      //           <div class="head">
-      //               <span># {{ source.index }}</span>
-      //               <span>{{ source.name }}</span>
-      //           </div>
-      //           <div class="desc">{{ source.desc }}</div>
-      //       </div>
-      //   </template>
-      // </VirtualList>
-      // <VirtualList class={styles.itemContent}
-      //   dataKey="id"
-      //   dataSources={this.messageList}
-      //   estimateSize="85"
-      //   itemClass="'itemInfo'"
-      //   ref="virtualList">
-      //     <template v-slot={source}>
-      //       <div style={{ color: 'red' }}>
-      //         { source }
-      //       </div>
-      //     </template>
-      // </VirtualList>
-
       <div style={{ minHeight: '100%', position: 'relative' }} id="messageList">
         {runtime.messageList.length > 0 ? runtime.messageList.map((item: any) => (
           <div class={styles.itemContent}>
-            {/* <img src="/src/assets/home/placeholder-icon.png" alt="" /> */}
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
                 <p class={styles.userName}>
@@ -139,7 +94,9 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : (this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员互动！" icon="noData-no-message" />)}
+        )) : (this.loadingMessage ? <div class={styles.loadingStyle}>
+          <div class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0.8);"><div class="el-loading-spinner"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg></div></div>
+          </div>: <Empty style={{ paddingTop: '120px' }} text="暂无学员互动！" icon="noData-no-message" />)}
       </div>
     )
   }