滑动到最底部

src/views/regime/Liveing.vue

@@ -13,27 +13,19 @@
             <div class="LivePlaying">
                 <LivePlaying></LivePlaying>
                 <div class="comment">
-                <div class="commentitem">
-                    <span>13:32:30</span>
-                    <span class="name"> Andy ： </span>
-                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
-                </div>
-                <div class="commentitem">
-                    <span>13:32:30</span>
-                    <span class="name"> Andy ： </span>
-                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
-                </div>
-                <div class="commentitem">
-                    <span>13:32:30</span>
-                    <span class="name"> Andy ： </span>
-                    <span> 老师，这个部分可以讲的慢一些吗？ </span>
+                    <div class="commentitem" v-for="(item,index) in imlist" :key="index">
+                        <span>{{item.time}}</span>
+                        <span class="name"> {{item.name}} ： </span>
+                        <span> {{item.text}} </span>
                     </div>
+               
                 </div>
             </div>
             <div class="others">
-                <div :id="'s-' + item.memberid" class="othersitem" v-for="(item, index) in roominfo.studentlist" :key="index">
+                <div class="othersitem" v-for="(item, index) in roominfo.studentlist" :key="index">
                     <div class="watcher"></div>
                     <div class="name">{{item.name}}</div>
+                    <div class="sbox" :id="'s-' + item.memberid"></div>
                 <!-- <img src="" alt="" /> -->
                 </div>
                 <!-- <div class="othersitem">
@@ -104,7 +96,7 @@
             margin-top: 29px;
             padding: 30px;
             font-size: 12px;
-
+            overflow-y: auto;
             color: #121212;
 
             .commentitem {
@@ -185,6 +177,10 @@
                 font-size: 12px;
                 color: #fff;
             }
+            .sbox{
+                width: 100%;
+                height: 100%;
+            }
         }
     }
 }
@@ -200,6 +196,7 @@ import store from '@/store';
 import { message } from 'ant-design-vue';
 import { useI18n } from '@/utils/i18n';
 import TIM from 'tim-js-sdk';
+import dayjs from 'dayjs';
 
 export default defineComponent({
     components: {
@@ -310,7 +307,7 @@ export default defineComponent({
                 });
             });
         }
-        
+        const imlist = ref<any>([])
         async function init(fun: any, userSig: string): Promise<void>{
             console.log(userSig)
             const el = document.querySelector("#local_stream");
@@ -339,6 +336,10 @@ export default defineComponent({
                 const remoteStream = event.stream;
                 console.log(remoteStream);
                 // 播放远端流
+                const el = document.querySelector('#s-' + remoteStream.userId_);
+                if(el){
+                    el.innerHTML = ""
+                }
                 remoteStream.play('s-' + remoteStream.userId_);
             });
             client
@@ -356,7 +357,7 @@ export default defineComponent({
 
             // im 初始化
             tim = TIM.create({
-                SDKAppID: 1400400340
+                SDKAppID: 1400435767
             }); // SDK 实例通常用 tim 表示
             tim.setLogLevel(0);
             tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event: any) {
@@ -365,6 +366,19 @@ export default defineComponent({
                 // event.data - 存储 Message 对象的数组 - [Message]
                 for(const i in event.data){
                     console.log(event.data[i])
+                    const now = dayjs(event.data[i].time)
+                    if(!event.data[i].payload.text){
+                        break;
+                    }
+                    imlist.value.push({
+                        name: event.data[i].nick,
+                        text: event.data[i].payload.text,
+                        time: `${now.hour()}:${now.minute()}:${now.second()}`
+                    })
+                    const div = document.querySelector(".comment")
+                    if(div){
+                        div.scrollTop = div.scrollHeight
+                    }
                 }
             });
             tim.on(TIM.EVENT.GROUP_LIST_UPDATED, function(event: any) {
@@ -529,7 +543,8 @@ export default defineComponent({
             guanbi,
             visible,
             lan,
-            sendtext
+            sendtext,
+            imlist
         }
     },
 });