FE-V2-XCX/pages_student/workbench/exam/examInfo.vue

<!-- 开始考试 -->
<template>
    <view id="examInfo" v-if="pageType">
        <view class="time-box">倒计时：{{minute}}:{{second}}</view>
        <view class="exam-top-box">
            <view class="exam-title-box">{{examIndex+1}}.{{examData.content}}</view>
            <radio-group @change="radioChange" class="exam-topic-for" v-if="examList[examIndex].topicType == 'radioList'||examList[examIndex].topicType == 'judgeList'">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in examData.elPaperQuAnswerList" :key="index">
                    <view class="for-min-box">
                        <radio :value="item.content" :checked="item.checked" color="#0183FA"/>{{item.abc}}.{{item.content}}
                    </view>
                </label>
            </radio-group>
            <checkbox-group @change="checkboxChange" class="exam-topic-for" v-if="examList[examIndex].topicType == 'multiList'">
                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in examData.elPaperQuAnswerList" :key="index">
                    <view class="for-min-box">
                        <checkbox :value="item.content" :checked="item.checked" color="#0183FA"/>{{item.abc}}.{{item.content}}
                    </view>
                </label>
            </checkbox-group>
            <view class="exam-topic-for">
                <view class="button-box">
                    <view class="left-p" v-if="examIndex != 0" @click="topicSwitch(1)">上一题</view>
                    <view class="right-p" v-if="examIndex < examList.length-1" @click="topicSwitch(2)">下一题</view>
                </view>
            </view>
        </view>
        <view class="exam-bottom-box" @click.stop="shadeClick">
            <view class="button-box" @click.stop="upDataButton('交卷成功')">交卷</view>
            <view class="null-view"></view>
            <img src="@/images/icon_09.png">
            <view class="num-box">
                <view>{{topicNum}}</view>
                <view>/{{maxTopicNum}}</view>
            </view>
        </view>
        <view class="shade-max-box" v-if="shadeType">
            <view class="null-box" @click.stop="shadeClick"></view>
            <view class="shade-big-box">
                <view class="shade-big-box">
                    <view class="shade-top-box">
                        <view class="button-box" @click="upDataButton('交卷成功')">交卷</view>
                        <view class="null-view"></view>
                        <img src="@/images/icon_09.png">
                        <view class="num-box">
                            <view>{{topicNum}}</view>
                            <view>/{{maxTopicNum}}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="for-max-box">
                <view class="for-box" @click="topicClick(index)"
                      :class="index == examIndex?'colorB':(item.answerType == 1?'colorA':'')"
                      v-for="(item,index) in examList" :key="index">{{index+1}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { getPaper,paperDetail,fillAnswer,handPaper } from '@/api/index.js'
    export default {
        data() {
            return {
                //时间数据
                timer:{},
                //接收参数
                itemData:{},
                //分
                minute:"",
                //秒
                second:"",
                //当前选中
                examIndex:0,
                //遮罩层开关
                shadeType:false,
                //最大提数
                maxTopicNum:0,
                //当前做过的题
                topicNum:0,
                //答题卡
                examList:[],
                //当前答题
                examData:{},
                //违规考试
                violationId:"",
				//页面开关/加载完毕后开启
				pageType:false,
            }
        },
        onLoad(option) {
            console.log("option",option)
            this.itemData = JSON.parse(decodeURIComponent(option.item));
            //修改页面title
            uni.setNavigationBarTitle({
                title:this.itemData.title
            });
            this.time(this.itemData.totalTime);
            this.getPaper();
            if(option.violationId){
                this.violationId = option.violationId;
            }
        },
        methods: {
            //定时器
            time(num){
                let self = this;
                let time = num * 60;
                this.timer = setInterval(refreshCount, 1000);
                function refreshCount() {
                    if(time<=0){
                        clearInterval(this.timer);
                        self.upDataButton('考试时间结束,交卷成功');
                    }else{
                        time--;
                        self.minute = parseInt(time/60);
                        self.second = time%60;
                    }
                }
            },
            //交卷按钮
            upDataButton(text){
                let self = this;
                let list = [];
                for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                    if(self.examData.elPaperQuAnswerList[i].checked == 1){
                        list.push(self.examData.elPaperQuAnswerList[i]);
                    }
                }
                if(list[0]){
                    this.fillAnswer(list).then(res => {
                        this.handPaper(text);
                    });
                }else{
                    this.handPaper(text);
                }
            },
            //交卷
            async handPaper(text){
                let obj = {};
                if(this.violationId){
                    obj.violationId = this.violationId;
                }
                const {data} = await handPaper(this.itemData.newPaperId,obj);
                if(data.code == 200){
                    uni.showToast({
                        title: text,
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            //单选事件
            radioChange(e){
                let self = this;
                console.log("单选",e)
                this.examList[this.examIndex].answerType = '1';
                for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                    if(e.detail.value == self.examData.elPaperQuAnswerList[i].content){
                        self.examData.elPaperQuAnswerList[i].checked = 1
                    }else{
                        self.examData.elPaperQuAnswerList[i].checked = 0
                    }
                }
            },
            //多选事件
            checkboxChange(e){
                let self = this;
                console.log("多选",e)
                this.examList[this.examIndex].answerType = '1';
                for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                    let num = 0;
                    for(let o=0;o<e.detail.value.length;o++){
                        if(e.detail.value[o] == self.examData.elPaperQuAnswerList[i].content){
                            num ++
                        }
                    }
                    if(num>0){
                        self.examData.elPaperQuAnswerList[i].checked = 1
                    }else{
                        self.examData.elPaperQuAnswerList[i].checked = 0
                    }
                }
            },
            //提交答案
            async fillAnswer(list){
                let self = this;
                let obj ={
                    answer: "",
                    elPaperQuAnswerList: list,
                    paperId:this.examData.paperId,
                    quId:this.examData.quId,
                }
                const {data} = await fillAnswer(obj);
                return data
            },
            //获取答题卡
            async getPaper(){
                let self = this;
                const {data} = await getPaper(this.itemData.newPaperId);
                if(data.code == 200){
                    let list = [];
                    //单选题
                    if(data.data.radioList){
                        for(let i=0;i<data.data.radioList.length;i++){
                            data.data.radioList[i].topicType = 'radioList'
                            data.data.radioList[i].answerType = '0'
                            list.push(data.data.radioList[i])
                        }
                    }
                    //多选题
                    if(data.data.multiList){
                        for(let i=0;i<data.data.multiList.length;i++){
                            data.data.multiList[i].topicType = 'multiList'
                            data.data.multiList[i].answerType = '0'
                            list.push(data.data.multiList[i])

                        }
                    }
                    //判断题
                    if(data.data.judgeList){
                        for(let i=0;i<data.data.judgeList.length;i++){
                            data.data.judgeList[i].topicType = 'judgeList'
                            data.data.judgeList[i].answerType = '0'
                            list.push(data.data.judgeList[i])

                        }
                    }
                    this.maxTopicNum = list.length;
                    this.examList = list;
					this.paperDetail(list[0]).then(response => {
						this.pageType = true;
					});
                }
            },
            //获取题目
            async paperDetail(item){
                let self = this;
                let obj ={
                    paperId:item.paperId,
                    quId:item.quId,
                };
                const {data} = await paperDetail(obj);
                if(data.code == 200){
                    this.examData = data.data;
                }
            },
            //计算已做数量
            calculateTheNumber(){
                let self = this;
                let num = 0;
                for(let i=0;i<self.examList.length;i++){
                    if(self.examList[i].answerType == '1'){
                        num++
                    }
                }
                this.topicNum = num;
            },
            //上一题/下一题
            topicSwitch(type){
                let self = this;
                if(type==1){
                    if(this.examIndex>0){
                        let list = [];
                        for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                            if(self.examData.elPaperQuAnswerList[i].checked == 1){
                                list.push(self.examData.elPaperQuAnswerList[i]);
                            }
                        }
                        if(list[0]){
                            this.fillAnswer(list).then(res => {
                                this.examIndex--;
                                this.paperDetail(this.examList[this.examIndex]);
                            });
                        }else{
                            this.examIndex--;
                            this.paperDetail(this.examList[this.examIndex]);
                        }
                    }
                }else if(type==2){
                    if(this.examIndex<this.examList.length-1){
                        let list = [];
                        for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                            if(self.examData.elPaperQuAnswerList[i].checked == 1){
                                list.push(self.examData.elPaperQuAnswerList[i]);
                            }
                        }
                        if(list[0]){
                            this.fillAnswer(list).then(res => {
                                this.examIndex++;
                                this.paperDetail(this.examList[this.examIndex]);
                            });
                        }else{
                            this.examIndex++;
                            this.paperDetail(this.examList[this.examIndex]);
                        }
                    }
                }
                this.calculateTheNumber();
            },
            //题目点击切换
            topicClick(index){
                let self = this;
                if(this.examIndex != index){
                    let list = [];
                    for(let i=0;i<self.examData.elPaperQuAnswerList.length;i++){
                        if(self.examData.elPaperQuAnswerList[i].checked == 1){
                            list.push(self.examData.elPaperQuAnswerList[i]);
                        }
                    }
                    if(list[0]){
                        this.fillAnswer(list).then(res => {
                            this.examIndex = index;
                            this.paperDetail(this.examList[this.examIndex]);
                        });
                    }else{
                        this.examIndex = index;
                        this.paperDetail(this.examList[this.examIndex]);
                    }
                }
                this.calculateTheNumber();
            },
            //遮罩开关
            shadeClick(){
                this.shadeType = !this.shadeType;
            },
        },
        beforeDestroy() {
            //清除定时器
            clearInterval(this.timer);
            console.log("beforeDestroy");
        },
    }
</script>

<style lang="stylus" scoped>
    #examInfo{
        height:100%;
        width:100%;
        display flex
        flex-direction column
        .time-box{
            line-height:80rpx;
            text-align center
            border-bottom:1rpx solid #e0e0e0;
            background #fff
            font-size:26rpx;
        }
        .exam-top-box{
            flex:1;
            .exam-title-box{
                line-height:85rpx;
                padding:0 20rpx;
                font-size:30rpx;
                color:#333;
                background #fff
            }
            .exam-topic-for{
                background #fff
                .for-min-box{
                    margin:0 30rpx;
                    padding:25rpx 0;
                    line-height:28rpx;
                    font-size:28rpx;
                    color:#666666;
                }
                .for-color-type{
                    color:#0183FA;
                }
                .button-box{
					position:relative;
					height:180rpx;
                    .left-p{
                        width: 180rpx;
                        line-height: 80rpx;
                        background: #FFFFFF;
                        border: 2rpx solid #E0E0E0;
                        border-radius: 10rpx;
                        font-size:22rpx;
                        color: #666666;
                        text-align center;
                        // margin:0 44rpx 0 0;
						position absolute;
						top:50rpx;
						left:172rpx;
                    }
                    .right-p{
                        width: 180rpx;
                        height: 80rpx;
                        line-height: 80rpx;
                        border: 2rpx solid #0183FA;
                        background: #0183FA;
                        border-radius: 10rpx;
                        font-size:22rpx;
                        color: #fff;
                        text-align center;
						position absolute;
						top:50rpx;
						left:396rpx;
                    }
                }
            }
        }
        .exam-bottom-box{
            height:100rpx;
            display flex
            background #fff
            .button-box{
                width:130rpx;
                line-height:60rpx;
                color:#fff;
                background :#0183FA;
                margin:20rpx 0 20rpx 20rpx;
                border-radius: 30rpx;
                text-align center
            }
            .null-view{
                flex:1;
            }
            img{
                width:30rpx;
                height:30rpx;
                margin:35rpx 15rpx 35rpx 0;
            }
            .num-box{
                display flex
                margin-right:20rpx;
                view{
                    line-height:100rpx;
                }
                view:nth-child(1){
                    color:#0183FA;
                }
                view:nth-child(2){
                    color:#999999;
                }
            }
        }
        .shade-max-box{
            position absolute
            top:0;
            left:0;
            background rgba(0,0,0,0.4)
            height:100%;
            width:100%;
            display flex
            flex-direction column
            .null-box{
                flex:1;
            }
            .shade-big-box{
                background #fff
                .shade-top-box{
                    height:100rpx;
                    display flex
                    background #fff
                    .button-box{
                        width:130rpx;
                        line-height:60rpx;
                        color:#fff;
                        background :#0183FA;
                        margin:20rpx 0 20rpx 20rpx;
                        border-radius: 30rpx;
                        text-align center
                    }
                    .null-view{
                        flex:1;
                    }
                    img{
                        width:30rpx;
                        height:30rpx;
                        margin:35rpx 15rpx 35rpx 0;
                    }
                    .num-box{
                        display flex
                        margin-right:20rpx;
                        view{
                            line-height:100rpx;
                        }
                        view:nth-child(1){
                            color:#0183FA;
                        }
                        view:nth-child(2){
                            color:#999999;
                        }
                    }
                }
            }
            .for-max-box{
                background #fff
                padding-bottom:33rpx;
                .for-box{
                    display inline-block
                    width:97rpx;
                    height:97rpx;
                    line-height:97rpx;
                    text-align center;
                    font-size:34rpx;
                    color:#999999;
                    border:1rpx solid #999999;
                    border-radius:50%;
                    margin:33rpx 0 0 22rpx;
                }
                .colorA{
                    border:1rpx solid #cce6fd;
                    background: #cce6fd;
                    color:#0183FA;
                }
                .colorB{
                    border:1rpx solid #0183FA;
                }
            }
        }
    }
</style>