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

import { defineComponent } from "vue";
import { ElTag } from "element-plus";
// import VirtualList from 'vue-virtual-list-v3';
// import VirtualList from 'vue3-virtual-list'
// import { RecycleScroller } from 'vue-virtual-scroller'
import styles from './index.module.less'
import request from '/src/helpers/request';
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";
import runtime, * as RuntimeUtils from '/src/components/live-message/model/runtime'
import runtimeCast, * as RuntimeUtilCast from "/src/components/live-broadcast/runtime";
import { removeToken } from "/src/utils/auth";

export default defineComponent({
  data() {
    return {
      messageList: [] as any[], // 回复学生列表
      loadingMessage: false, // 观看列表状态
    }
  },
  mounted() {
    this.loadingMessage = true
    event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
    // event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Like"], this.onLike)
    event.on(LIVE_EVENT_MESSAGE["RC:ForcedOffline"], this.onForcedOffline)
    event.on('MESSAGE:Change', this.scrollToBottom) // 添加消息
    setTimeout(() => {
      this.loadingMessage = false;
    }, 2000);
    this.scrollToBottom()
  },
  beforeUnmount() {
    event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
    // event.off(LIVE_EVENT_MESSAGE["RC:Chatroom:Like"], this.onLike);
  },
  methods: {
    async onForcedOffline() {
      // 强制退出登录
      try {
        await RuntimeUtilCast.leaveIMRoom()
        await request.post('/api-auth/exit', { data: {} });
        RuntimeUtilCast.closeDevice('camera')
        RuntimeUtilCast.closeDevice('microphone')
        state.user = null
        removeToken();
        (this as any).$router.push({
          path: '/login',
          query: {
            ...this.$route.query
          }
        });
      } catch (e) {
        // TODO: handle error
      }
    },
    onLike(value: any) {
      if (value && value.user) {
        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
        console.log(value, 'like')
        let tempObj = {
          name: value.user?.name,
          id: value.user.id,
          isSelf: false,
          content: '给您点了' + value.counts + '个赞',
          sendTime
        }
        RuntimeUtils.addMessage(tempObj);
        this.loadingMessage = false
      }
      this.scrollToBottom()
    },
    onMessage(value: any) {
      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,
          isSelf: false,
          content: value.content,
          sendTime
        }
        // 判断是否是主播
        if (value.user.id === state.user.speakerId) {
          tempObj.isSelf = true
        }
        // this.messageList.push(tempObj);
        RuntimeUtils.addMessage(tempObj);
        this.loadingMessage = false
      }
      this.scrollToBottom()
    },
    scrollToBottom() {
      // 默认滚动到底部
      this.$nextTick(() => {
        document.querySelector('#tabList')?.scrollTo(0, document.querySelector('#messageList')?.scrollHeight || 0)
      })
    }
  },
  render() {
    return (
      <div style={{ minHeight: '100%', position: 'relative' }} id="messageList">
        {runtime.messageList.length > 0 ? runtime.messageList.map((item: any) => (
          <div class={styles.itemContent}>
            <div class={styles.itemInfo}>
              <div class={styles.itemName}>
                <div class={styles.userName}>
                  {item.isSelf ? <ElTag effect="dark" color="#01A79E">主讲人</ElTag> : null}
                  <span class={styles['name-style']}>{item.name}{ item.system ? null : '：' }</span>
                  <span class={[styles.itemText, item.isSelf ? styles.active : null]}>
                    {item.content}
                  </span>
                </div>
                <p class={styles.rightTime}>{item.sendTime}</p>
              </div>
            </div>
          </div>
        )) : (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>
    )
  }
})

function source(source: any) {
  throw new Error("Function not implemented.");
}