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 class="mediationPop">
        <el-button type="warning" @click="mediationPop">调解</el-button>
      </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");
    },
    // 弹出调解内容
    mediationPop() {
      this.$emit("mediationPop");
    },
    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 || false;
    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;
}

.mediationPop {
  margin-left: 20px;
}

.micImg,
.videoImg,
.sharImg {
  width: 40px;
  height: 40px;
}
</style>