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-scroll-v3'
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 {
      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 (
      //     <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 #default={source}>
      //     <div class="item-inner">
      //       111
      //     </div>
      //   </template>
      // </VirtualList>
      <div style={{ minHeight: '100%', position: 'relative' }}>
        {this.messageList.length > 0 ? this.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}>{item.name} {item.isSelf ? <ElTag>主播</ElTag> : null}</p>
                <p class={styles.rightTime}>{ item.sendTime }</p>
              </div>
              <div class={[styles.itemText, item.isSelf ? styles.active : null]}>
                { item.content }
              </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" />}
      </div>
    )
  }
})