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: ["micFlag","videoFlag","sharFlag"],
  components: {},
  data() {
    return {
      roomId: null,
      taskId: null,
      roleFlag: true,
      caseId: "",
    };
  },
  methods: {
    // 解散房间
    destructionRoomFn(data) {
      destructionRoom(data).then((res) => {
        console.log(res, "解散房间");
      });
    },
    /**开启麦克风 */
    micClickOn() {
      this.$emit("micClickOn");
    },
    /**关闭麦克风 */
    micClickOff() {
      this.$emit("micClickOff");
    },
    /**开启摄像头 */
    videoClickOn() {
      this.$emit("videoClickOn");
    },
    /**关闭摄像头 */
    videoClickOff() {
      this.$emit("videoClickOff");
    },
    /**共享屏幕 */
    sharClickOn() {
      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>