FE_exam_client/src/pages/exam/detail/index.vue

<template>
    <div class="box">
        <h1 class="title">{{paperName }}</h1>
        <div class="metas">
            <div style="margin-right: 20px;">
                <span class="name">总分：</span>
                <span class="val">100分</span>
            </div>
            <div class="m-r-20">
                <span class="name">考试时长：</span>
                <span class="val">{{time}}分钟</span>
            </div>
            <div>
                <span class="name">排名：</span>
                <span class="val">{{ranking}}</span>
            </div>
        </div>

        <ul class="tab">
            <template v-for="(item,index) in tabs">
                <li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
            </template>
        </ul>

        <div class="wrap">
            <div class="item" v-for="(item,index) in curType" :key="index">
                <div class="answer">
                    <div class="info">
                        <p class="key">序号：</p>
                        <p class="val">{{index+1}}</p>
                    </div>
                    <div class="info">
                        <p class="key">得分：</p>
                        <p class="val">{{item.question_score}}</p>
                    </div>
                </div>
                <div class="meta">
                    <p class="key">题干：</p>
                    <p class="val" v-html="item.question_stem"></p>
                </div>
                <div class="meta">
                    <p class="key">选项：</p>
                    <div class="val">
                        <p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p>
                    </div>
                </div>
                <div class="meta ans">
                    <div class="info">
                        <p class="key">正确答案：</p>
                        <p class="val">{{item.answer}}</p>
                    </div>
                    <div class="info">
                        <p class="key">学生答案：</p>
                        <p class="val">{{item.user_answer}}</p>
                    </div>
                </div>
                <div class="meta">
                    <p class="key">答案解析：</p>
                    <p class="val" v-html="item.answer_analysis"></p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixins from '@/mixins/setBackground'
import { mapState } from 'vuex'
import util from '@/libs/util'
export default {
    mixins: [ mixins ],
    data() {
        return {
            paperName: '',
            time: 0,
            ranking: 1,
            selectVisible: false,
            tabs: [
                {
                    id: 1,
                    name: '单选题',
                    show: false
                },{
                    id: 2,
                    name: '多选题',
                    show: false
                },{
                    id: 3,
                    name: '判断题',
                    show: false
                },{
                    id: 4,
                    name: '简答题',
                    show: false
                },{
                    id: 5,
                    name: '填空题',
                    show: false
                }
            ],
            active: 1,
            curType: []
        };
    },
    computed: {
        ...mapState('user', [
            'userId'
        ]),
        ...mapState('exam', [
            'testPaperId','assessmentId'
        ])
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.$post(`${this.api.answerDetail}?userId=${this.userId}&assessmentId=${this.assessmentId}&paperId=${this.testPaperId}`)
            .then(res => {
                this.paperName = res.paperName
                this.ranking = res.ranking
                this.time = res.time
                this.allData = res.data
                let tabs = this.tabs
                res.data.list1.length && (tabs[0].show = true)
                res.data.list2.length && (tabs[1].show = true)
                res.data.list3.length && (tabs[2].show = true)
                res.data.list4.length && (tabs[3].show = true)
                res.data.list5.length && (tabs[4].show = true)
                for(let n of tabs){
                    if(n.show){
                        this.active = n.id
                        this.curType = this.allData[`list${n.id}`]
                        break
                    }
                }
                this.handleOptions()
            }).catch(err => {})
        },
        tabChange(id){
            this.active = id
            this.curType = this.allData[`list${id}`]
            this.handleOptions()
        },
        handleOptions(){
            let curType = this.curType
            curType.forEach(n => {
                if(!n.options){
                    let options = {}
                    for(let i in n){
                        if(i.includes('option') && n[i]){
                            options[i.replace('option_','')] = n[i]
                        }
                    }
                    n.options = options
                }
            })
            this.curType = curType
        }
    },
};
</script>

<style lang="scss" scoped>
    @import "@/styles/pages/testPaperDetail.scss";
</style>