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

import { defineComponent } from "vue";
import styles from './index.module.less'
import { ElButton } from 'element-plus'
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-broadcast/runtime'
import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'

export default defineComponent({
  data() {
    return {
      joinList: {} as { [key: string]: any }, // 连麦学生列表
      loadingJoin: false, // 连麦列表状态
      upStatus: false,
      downStatus: false,
    }
  },
  computed: {
    count() {
      let count = 0
      for (const key in runtimeModel.joinList) {
        if (Object.prototype.hasOwnProperty.call(runtimeModel.joinList, key)) {
          const item = runtimeModel.joinList[key];
          if (item.userRoomType === 4) {
            count += 1
          }
          if (count > 3) {
            break
          }
        }
      }
      return count
    },
  },
  mounted() {
    // userRoomType
    // 1 普通
    // 2 老师邀请
    // 3 学生申请
    // 4 连麦中
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatResponse'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:Leave'], this.onLeave); // 移动端接收的消息
    event.on(LIVE_EVENT_MESSAGE['RC:LookerLoginOut'], this.onLeave); // 后台接收的消息
  },
  methods: {
    async onLeave(value: any) {
      // 学生离开时处理
      const userId = value.userId || value.fromUserId
      if(runtimeModel.joinList[userId]) {
        RuntimeModelUtils.removeJoin(userId)
      }
      if(runtimeModel.lookList[userId]) {
        RuntimeModelUtils.removeLook(userId)

        // 判断是否有学生
        runtime.lookCount = runtime.lookCount - 1 >= 0 ? runtime.lookCount - 1 : 0
      }
      // 同步移动端观看人数
      await RuntimeUtils.sendMessage({ count: runtime.lookCount }, 'MemberCount')
    },
    onSeatApply(evt: any) {
      // console.log(evt, 'onSeatApply joinModel')
      if (Array.isArray(evt)) {
        for (const id of evt) {
          console.log('onSeatApply', id)
          RuntimeModelUtils.removeJoin(id)
        }
        return
      }
      const response = evt.$EventMessage.messageType === 'RC:Chatroom:SeatResponse'
      const userRoomType = response ? 4 : 3
      // if(evt.$EventMessage.messageType === 'RC:Chatroom:SeatResponse')
      const sendTime = dayjs(evt.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
      let tempObj = {
        name: evt.audienceName,
        id: String(evt.audienceId),
        system: 1,
        isSelf: false,
        content: '',
        sendTime
      }
      // 申请连麦
      if (evt.type === 3) {
        console.log(evt, '申请连麦')
        const params = {
          name: evt.audienceName,
          id: evt.audienceId,
          userRoomType: userRoomType,
          type: evt.type,
        }
        RuntimeModelUtils.addJoin(evt.audienceId, params)
        RuntimeModelUtils.addLook(evt.audienceId, params)

        tempObj.content = response ? '同意了连麦申请' : '发起了连麦申请'
        RuntimeModelUtils.addMessage(tempObj);
        event.emit('MESSAGE:Change')
      }
      // 取消连麦
      if (evt.type === 4) {
        console.log(evt, '取消连麦')
        if (runtimeModel.joinList[evt.audienceId]) {
          RuntimeModelUtils.removeJoin(evt.audienceId)
        }
        if (runtimeModel.lookList[evt.audienceId]) {
          let userLook = runtimeModel.lookList[evt.audienceId]
          userLook.userRoomType = 1
          RuntimeModelUtils.addLook(evt.audienceId, userLook)
        }

        //
        tempObj.content = response ? '拒绝了连麦申请' : '取消了连麦申请'
        RuntimeModelUtils.addMessage(tempObj);
        event.emit('MESSAGE:Change')
      }

    },
    agree(item: any) {
      if (this.count > 3 || this.upStatus) {
        console.log(true, 2323)
        return
      }
      this.upStatus = true
      const data = {
        ...item,
        audienceName: item.name,
        audienceId: String(item.id),
        teacherId: String(state.user?.id),
        teacherName: state.user?.speakerName,
        userRoomType: 4,
        type: 1,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeModelUtils.addLook(item.id, data)
      RuntimeUtils.sendMessage(data, 'SeatResponse')

      setTimeout(() => {
        this.upStatus = false
      }, 300);
    },
    refuse(item: any) {
      if(this.downStatus) {
        return
      }
      this.downStatus = true
      const data = {
        ...item,
        audienceName: item.name,
        audienceId: String(item.id),
        teacherId: String(state.user?.id),
        teacherName: state.user?.speakerName,
        userRoomType: 4,
        type: 5,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeUtils.sendMessage(data, 'SeatApply')
      setTimeout(() => {
        this.downStatus = false
      }, 300);
    },
    onSwitchRole(evt: any) {
      console.log(evt, 'onSwitchRole')
      if (runtimeModel.joinList[evt.userId] && evt.role === 2) {
        const user = runtimeModel.joinList[evt.userId]
        const sendTime = dayjs(new Date()).format('HH:mm:ss')
        let tempObj = {
          name: user.audienceName,
          id: user.audienceId,
          system: 1,
          isSelf: false,
          content: '发起了连麦申请',
          sendTime
        }
        RuntimeModelUtils.addMessage(tempObj);
        event.emit('MESSAGE:Change')

        RuntimeModelUtils.removeJoin(evt.userId)
      }
      if (runtimeModel.lookList[evt.userId] && evt.role === 2) {
        let userLook = runtimeModel.lookList[evt.userId]
        userLook.userRoomType = 1
        RuntimeModelUtils.addLook(evt.userId, userLook)
      }
    }
  },
  render() {
    const list = Object.values(runtimeModel.joinList)
    return (
      <div style={{ minHeight: '100%', position: 'relative' }}>
        {list.length > 0 ? list.map((item: any) => (
          <div class={styles.itemContent}>
            <div class={styles.itemInfo}>
              <div class={styles.itemName}>
                <p class={styles.userName}>
                  <span class={styles['name-style']}>{item.name}</span>
                  {item.userRoomType !== 4 ? <span style={{ paddingLeft: '10px' }}>申请连麦</span> : <span style={{ paddingLeft: '10px', color: 'var(--live-text-color)' }}>正在连麦</span>}
                </p>
                {item.userRoomType !== 4 ? (
                    <div class={styles.joinText}>
                      <div class={styles.join}>
                        {/* 申请连麦 */}
                      </div>
                      <ElButton size="small" type="primary" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
                    </div>
                  ) : (
                    <div class={styles.joinText}>
                      <div class={styles.join}>
                        {/* 正在连麦 */}
                      </div>
                      <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.refuse(item)}>下麦</ElButton>
                    </div>
                  )}
              </div>
            </div>
          </div>
        )) : 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>
    )
  }
})