Arbitrate-FrontendH5/src/views/components/roomFooter.vue

<template>
    <div class="roomFooter">
      <div class="outRoom">
        <el-button type="danger" @click="exitRoom" v-if="!roleFlag">退出房间</el-button>
        <el-button type="danger" @click="exitRoom" v-if="roleFlag">解散房间</el-button>
      </div>
      <div class="operation">
        <div class="mic">
          <img class="micImg" src="@/assets/mic_on.png" alt="" v-if="micFlag" @click="micClickOn">
          <img class="micImg" src="@/assets/mic_off.png" alt="" v-else @click="micClickOff">
        </div>
        <div class="video">
          <img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn">
          <img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff">
        </div>
        <div class="sharing">
          <img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn">
          <img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff">
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
  export default {
    name: 'Footer',
    // props: [
    //     "roomId"
    // ],
    components: {
  
    },
    data() {
      return {
        roomId: null,
        taskId: null,
        roleFlag: true,
        caseId: "",
        micFlag: true,
        videoFlag: true,
        sharFlag: true,
      };
    },
    methods: {
      // 解散房间
      destructionRoomFn(data) {
        destructionRoom(data).then(res => {
          console.log(res, "解散房间");
        })
      },
      /**开启麦克风 */
      micClickOn() {
        this.micFlag = false;
        this.$emit('micClickOn');
      },
      /**关闭麦克风 */
      micClickOff() {
        this.micFlag = true;
        this.$emit('micClickOff');
      },
      /**开启摄像头 */
      videoClickOn() {
        this.videoFlag = false;
        this.$emit('videoClickOn');
      },
      /**关闭摄像头 */
      videoClickOff() {
        this.videoFlag = true;
        this.$emit('videoClickOff');
      },
      /**共享屏幕 */
      sharClickOn(){
        this.sharFlag = false;
        this.$emit('sharClickOn');
      },
      /**关闭共享屏幕 */
      sharClickOff(){
        this.sharFlag = true;
        this.$emit('sharClickOff');
      },
      exitRoom() {
        if (this.roleFlag) {
          this.stopVideoFn();
          this.destructionRoomFn({ roomId: this.roomId })
          this.$emit('exitRoom');
        } else {
          this.$emit('exitRoom');
        }
      },
      async startVideoFn() {
        await startVideo({
          caseId: this.caseId,
          roomId: this.roomId
        }).then(res => {
          this.taskId = res.data.taskId
          console.log(res.data.taskId, "pppppp");
        })
      },
      stopVideoFn() {
        stopVideo(this.taskId).then(res => {
          console.log(res, "KKKKKK");
        })
      },
    },
    async mounted() {
      this.roomId = this.$route.query.roomId;
      this.caseId = this.$route.query.caseId;
      let roleFlag = this.$route.query.flag;
      this.roleFlag = roleFlag;
      if (roleFlag) {
        await this.startVideoFn();
      }
      // setTimeout(() => {
      //     console.log(this.roomId, "房间号房间哈房间号房间哈房间号");
      // });
    },
  };
  </script>
  
  <style scoped>
  .roomFooter {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
  }
  
  .mic,
  .video,
  .sharing,
  .outRoom {
    cursor: pointer;
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .operation {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  
  .iconImg {
    width: 30%;
    height: 60%;
  }
  
  .title {
    color: aliceblue;
  }
  
  .empty {
    width: 60%;
    height: 100%;
  }
  
  .mic,
  .video,
  .sharing {
    width: 60px;
    height: 60px;
    margin-left: 20px;
  }
  
  .micImg,
  .videoImg,
  .sharImg {
    width: 40px;
    height: 40px;
  }
  </style>