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>
</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:""
        };
    },
    methods: {
        // 解散房间
        destructionRoomFn(data) {
            destructionRoom(data).then(res => {
                console.log(res, "解散房间");
            })
        },
        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,
.record,
.outRoom {
    cursor: pointer;
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconImg {
    width: 30%;
    height: 60%;
}

.title {
    color: aliceblue;
}

.empty {
    width: 60%;
    height: 100%;
}
</style>