GCLS_Page_Learn/src/views/live/student/group.vue

<template>
  <div class="group">
    <!--顶部-->
    <div class="group-top">
      <div class="live-title">
        <div class="live-title-name">{{ roomInfo.cs_item_name }} {{ roomInfo.task_name }}</div>
        <div>
          <el-button @click="exitRoom">退出房间</el-button>
        </div>
      </div>
      <div class="live-course-name">{{ roomInfo.course_name }}</div>
      <div class="live-teacher">
        <span class="live-teacher-name">
          <svg-icon icon-class="person" />{{ roomInfo.teacher_name }}
        </span>
        <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
      </div>
    </div>
    <!-- 主容器 -->
    <div class="group-container">
      <!-- 左侧 -->
      <div class="group-container-left">
        <div class="group-discussion">
          <!-- 本地流 -->
          <div v-show="localStream" class="group-wrapper">
            <div id="group-local" class="group-box"></div>
            <div class="local-stream">
              <div>
                {{ studentSelf.student_name }}
              </div>
              <div>
                <svg-icon
                  :icon-class="hasVideo ? 'camera-on' : 'camera-off'"
                  @click="playOrPauseVideo"
                />
                <svg-icon
                  :icon-class="hasAudio ? 'mike-on' : 'mike-off'"
                  @click="playOrPauseAudio"
                />
              </div>
            </div>
          </div>
          <div v-show="!localStream" class="group-box student-info">
            <el-avatar icon="el-icon-user" :src="studentSelf.student_image_url" :size="80" />
            <span class="student_name">{{ studentSelf.student_name }}</span>
          </div>
          <!-- 有流列表 -->
          <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
            <div :id="`group-${i}`" class="group-box"></div>
            <div class="live-wrapper-stream">
              {{ searchStudentName(item.id()) }}
              <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
            </div>
          </div>
          <!-- 无流列表 -->
          <div v-for="item in noStreamList" :key="item.student_id" class="group-box student-info">
            <el-avatar icon="el-icon-user" :src="item.student_image_url" :size="80" />
            <span class="student_name">{{ item.student_name }}</span>
          </div>
        </div>
        <div class="button-group">
          <div class="button-group-left"></div>
          <div class="button-group-right"></div>
        </div>
        <div class="group-container-left-chat">
          <div class="chat-top">
            <span>聊天</span>
          </div>
          <div class="chat-window">
            <ul ref="chat" class="chat-window-ul">
              <li v-for="(item, i) in chatList" :key="i">
                <div class="msg-normal">
                  <span>{{ item.username }}: </span>
                  <span>{{ item.msg }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="chat-speak">
            <el-input
              v-model="msg"
              placeholder="输入发言"
              maxlength="400"
              @keydown.enter.native="sendMsg"
            >
              <el-button slot="append" @click="sendMsg">发送</el-button>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="group-container-right">
        <div
          class="live-teacher-lens"
          @mouseover="liveMenuShow = true"
          @mouseout="liveMenuShow = false"
        >
          <div class="live-container">
            <div v-show="is_teacher_in_group" id="live" />
            <el-image
              v-show="!is_teacher_in_group"
              :src="roomInfo.teacher_image_url"
              fit="contain"
            />
          </div>
          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
            <div>
              {{ roomInfo.teacher_name }}
            </div>
            <div></div>
          </div>
        </div>
        <div class="student-list">
          <div class="student-list-title">小组成员</div>
          <ul>
            <li v-for="item in student_list" :key="item.room_user_id">
              <div class="student-list-left">
                <el-avatar icon="el-icon-user" size="small" :src="item.student_image_url" />
                <span class="name">{{ item.student_name }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  StudentExitLiveRoom,
  GetLiveRoomInfo,
  GetGroupStatus,
  GetMyGroupInfo_Student,
  CreateEnterLiveRoomSession
} from '@/api/live';
import * as common from './group';

export default {
  data() {
    return {
      task_id: this.$route.query.task_id,
      room_user_id: '',
      session_id: '',
      live_room_sys_user_id: '',
      room_id: '',
      localStream: false,
      hasVideo: false,
      hasAudio: false,
      // 定时器
      timer: null,
      rtc: null,
      streamList: [],
      roomData: {
        desc: '直播间标题',
        name: '姓名',
        user: {
          id: '',
          name: '',
          role: 'talker',
          rommid: ''
        },
        max_users: 1,
        allow_chat: true,
        allow_audio: true,
        allow_speak: true
      },
      roomInfo: {
        room_id: '',
        video_mode: 1,
        task_name: '',
        cs_item_name: '',
        course_name: '',
        teacher_name: '',
        student_count: 0,
        teacher_image_url: ''
      },
      loadedNumber: 0,
      speakData: {},
      roomContext: {},
      msg: '',
      chatList: [],
      // 直播间学员列表
      student_list: [],
      // 直播状态
      liveStat: false,
      liveMenuShow: false,
      is_teacher_in_group: false,
      // 无远程流学员列表
      noStreamList: [],
      // 学员自身信息
      studentSelf: {}
    };
  },
  watch: {
    loadedNumber(newVal) {
      if (newVal === 5) {
        common.createScript(
          'https://class.csslcloud.net/static/SDK/docSDK/drawSdk_3.0.js'
        ).onload = () => {
          this.rtc = common.initSDK({
            userid: this.live_room_sys_user_id,
            roomid: this.room_id,
            sessionid: this.session_id
          });
          common.initListener(this); // 注册监听事件
          this.getLiveStat();
          this.$loading().close();
        };
      }
    },
    streamList(newVal) {
      let list = this.student_list.filter(item => {
        if (item.is_self === 'false') {
          let isNoStream = true;
          for (let i = 0; i < newVal.length; i++) {
            if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
          }
          return isNoStream;
        }
        return false;
      });
      this.noStreamList = list;

      if (newVal.length > 0) {
        this.$nextTick(() => {
          newVal[newVal.length - 1].show(`group-${newVal.length - 1}`);
        });
      }
    },
    // 聊天列表滚动
    chatList() {
      common.chatRoll(this);
    }
  },
  created() {
    this.getLiveRoomInfo();
    this.getMyGroupInfo_Student();
  },
  mounted() {
    this.GetGroupStatus();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    StudentExitLiveRoom({ task_id: this.task_id, room_user_id: this.room_user_id });
    common.handsDown({
      uid: this.room_user_id,
      success: str => {
        console.log('下麦成功', str);
      },
      fail: data => {
        console.log('下麦失败', data);
        common.closeVideo('picture');
      }
    });
    this.streamList.forEach(item => {
      common.unSubscribeStream(item);
    });
  },
  methods: {
    getLiveRoomInfo() {
      GetLiveRoomInfo({ task_id: this.task_id }).then(
        ({
          room_id,
          video_mode,
          task_name,
          cs_item_name,
          course_name,
          teacher_name,
          student_count,
          teacher_image_url
        }) => {
          this.roomInfo = {
            room_id,
            video_mode,
            task_name,
            cs_item_name,
            course_name,
            teacher_name,
            student_count,
            teacher_image_url
          };
        }
      );
    },

    exitRoom() {
      StudentExitLiveRoom({ task_id: this.task_id, room_user_id: this.room_user_id }).then(() => {
        this.$router.push('/');
      });
    },

    getLiveStat() {
      common.getLiveStat({
        success: data => {
          this.liveStat = data.started;
        },
        fail: str => {
          this.liveStat = false;
          console.log('直播关闭状态或查询直播失败', str);
        }
      });
    },

    // 发消息
    sendMsg() {
      common.sendMsg(this.msg);
      this.msg = '';
    },

    // 本地流视频开启、关闭
    playOrPauseVideo() {
      if (this.$store.state.app.liveDevice.video.length === 0) {
        return this.$message.warning('无视频设备');
      }

      if (this.hasVideo) {
        common.pauseVideo({
          streamName: 'picture',
          success: () => {
            this.$message.success('关闭本地流视频画面成功');
            this.hasVideo = false;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      } else {
        common.playVideo({
          streamName: 'picture',
          success: () => {
            this.$message.success('开启本地流视频画面成功');
            this.hasVideo = true;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      }
    },

    // 本地流音频开启、关闭
    playOrPauseAudio() {
      if (this.$store.state.app.liveDevice.audio.length === 0) {
        return this.$message.warning('无音频设备');
      }

      if (this.hasAudio) {
        common.pauseAudio({
          streamName: 'picture',
          success: () => {
            this.$message.success('关闭本地流声音成功');
            this.hasAudio = false;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      } else {
        common.playAudio({
          streamName: 'picture',
          success: () => {
            this.$message.success('开启本地流声音成功');
            this.hasAudio = true;
          },
          fail: str => {
            this.$message.warning(str);
          }
        });
      }
    },

    // 分组讨论
    GetGroupStatus() {
      this.timer = setInterval(() => {
        GetGroupStatus({ task_id: this.task_id })
          .then(({ is_enable_group, is_has_group_message, group_message_text }) => {
            if (is_enable_group === 'false') {
              clearInterval(this.timer);
              CreateEnterLiveRoomSession({
                task_id: this.task_id
              }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
                this.$router.push({
                  path: `/live/student`,
                  query: {
                    live_room_sys_user_id,
                    room_id,
                    session_id,
                    task_id: this.task_id,
                    room_user_id
                  }
                });
              });
            }

            if (is_has_group_message === 'true') {
              this.$alert(group_message_text, '群消息', {
                confirmButtonText: '关闭'
              });
            }
          })
          .catch(() => {
            clearInterval(this.timer);
          });
      }, 5000);
    },

    searchStudentName(id) {
      let uid = id.split('-')[0];
      if (uid) {
        let student = this.student_list.find(item => item.room_user_id === uid);
        return student ? student.student_name : '';
      }
      return '';
    },

    getMyGroupInfo_Student() {
      GetMyGroupInfo_Student({
        task_id: this.task_id
      }).then(({ live_room_sys_user_id, room_id, student_list }) => {
        let data = student_list.find(el => {
          return el.is_self === 'true';
        });
        this.session_id = data.session_id;
        this.room_user_id = data.room_user_id;
        this.live_room_sys_user_id = live_room_sys_user_id;
        this.room_id = room_id;
        this.student_list = student_list;
        this.noStreamList = student_list.filter(item => item.is_self === 'false');
        this.studentSelf = student_list.find(item => item.is_self === 'true');
        common.downloadWebSDK(this);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
$live-bc: #3d3938;

.group {
  @include container;

  // 顶部
  &-top {
    background-color: #fff;
    padding: 24px 32px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    .live-title {
      display: flex;
      justify-content: space-between;

      &-name {
        font-size: 22px;
      }

      .el-button {
        border-radius: 4px;
        padding: 7px 12px;
      }
    }

    .live-course-name {
      font-size: 14px;
      color: #737373;
      line-height: 30px;
    }

    .live-teacher {
      margin-top: 12px;

      .svg-icon {
        margin-right: 8px;
      }

      &-name {
        margin-right: 60px;
      }
    }
  }

  // 主容器
  &-container {
    display: flex;
    justify-content: left;

    &-left {
      width: 832px;
      background-color: #fff;
      border-radius: 8px;

      // 分组讨论
      .group-discussion {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 468px;
        position: relative;
        background-color: $live-bc;
        overflow: auto;

        .group-box {
          width: 255px;
          height: 144px;
          margin: 8px;

          &.student-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: 2px solid #625c5b;

            .el-avatar {
              margin-top: 12px;
            }

            .student_name {
              height: 28px;
              color: #fff;
            }
          }
        }

        .group-wrapper {
          position: relative;

          .live-wrapper-stream {
            position: absolute;
            top: 120px;
            height: 32px;
            width: calc(100% - 16px);
            background-color: #000;
            opacity: 0.7;
            color: #fff;
            line-height: 32px;
            text-align: center;
            margin: 0 8px;
            padding: 0 15px;
            transition: all 300ms ease-in 0s;

            > .svg-icon {
              margin-left: 12px;
            }
          }

          .local-stream {
            @extend .live-wrapper-stream;

            display: flex;

            > div:first-child {
              flex: 6;
            }

            > div:last-child {
              flex: 4;
              text-align: right;

              .svg-icon {
                cursor: pointer;
                margin-right: 18px;
              }
            }
          }
        }
      }

      .button-group {
        display: flex;
        justify-content: space-between;
        height: 48px;
        background-color: #4d4d4d;
        padding: 0 15px;
        border-bottom-left-radius: 5px;

        .svg-icon {
          font-size: 20px;
        }

        &-left {
          > span {
            display: inline-block;
            height: 100%;
            padding: 14px 16px;
            cursor: pointer;

            &:active,
            &:hover {
              background-color: #3d3d3d;
            }
          }
        }
      }

      // 聊天窗口
      &-chat {
        height: 278px;
        border: 1px solid #ccc;
        border-bottom-left-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .chat-top {
          display: flex;
          justify-content: space-between;
          padding: 15px 15px 10px;
          border-bottom: 1px solid #e6e6e6;
          color: #959595;

          label {
            cursor: pointer;
          }

          .allow-chat {
            margin-right: 12px;
          }
        }

        .chat-window {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;

          &-ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;

            .msg-normal {
              padding: 7px 16px;
            }
          }
        }

        .chat-speak {
          padding: 16px;
        }
      }
    }

    &-right {
      height: 794px;
      padding: 8px;
      background-color: #2c2c2c;
      border-end-end-radius: 8px;

      .live-teacher-lens {
        position: relative;
        overflow: hidden;

        .live-container {
          width: 352px;
          height: 198px;
          background-color: $live-bc;

          #live {
            width: 100%;
            height: 100%;
          }

          .el-image {
            width: 100%;
            height: 100%;
          }
        }

        .live-wrapper {
          position: absolute;
          height: 40px;
          width: 100%;
          background-color: #000;
          opacity: 0.7;
          color: #fff;
          line-height: 40px;
          padding: 0 16px;
          transition: all 300ms ease-in 0s;
        }
      }

      .student-list {
        width: 100%;
        padding: 24px 16px;
        margin-top: 2px;
        height: calc(100% - 200px);
        background-color: #2c2c2c;
        font-size: 14px;
        color: #fff;

        &-title {
          margin-bottom: 16px;
        }

        ul {
          height: calc(100% - 20px);
          overflow-x: auto;
        }

        li {
          display: flex;
          margin-bottom: 16px;

          .student-list-left {
            .name {
              vertical-align: super;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
</style>