FE_exam_server/src/pages/achievement/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>
                <span class="name">考试时长：</span>
                <span class="val">{{time}}分钟</span>
            </div>
        </div>

        <ul class="tab">
            <li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
        </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'
export default {
    mixins: [ mixins ],
    data() {
        return {
            paperName: '',
            time: 0,
            selectVisible: false,
            tabs: [
                {
                    id: 1,
                    name: '单选题'
                },{
                    id: 2,
                    name: '多选题'
                },{
                    id: 3,
                    name: '判断题'
                },{
                    id: 4,
                    name: '简答题'
                },{
                    id: 5,
                    name: '填空题'
                }
            ],
            active: 1,
            curType: []
        };
    },
    computed: {
        ...mapState('user', [
            'userId'
        ]),
        ...mapState('achievement', [
            'id','assessmentId','stuId'
        ])
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.$post(`${this.api.answerDetail}?userId=${this.stuId}&assessmentId=${this.assessmentId}&paperId=${this.id}`)
            .then(res => {
                this.paperName = res.paperName
                this.time = res.time
                this.allData = res.data
                this.curType = this.allData.list1
                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 = {}
                    let answer = []
                    for(let i in n){
                        if(i.includes('option') && n[i]){
                            options[i.replace('option_','')] = n[i]
                            if(n.typeName == '填空题') answer.push(n[i])
                        }
                    }
                    if(n.typeName == '填空题') n.answer = answer.join('|')
                    n.options = options
                }
            })
            this.curType = curType
        }
    },
};
</script>

<style lang="scss" scoped>
    .box{
        width: 90%;
        margin: 0 auto;
    }
    .title{
        text-align: center;
        font-size: 18px;
        font-weight: 600;
    }
    .metas{
        display: flex;
        justify-content: center;
        margin: 20px 0 30px;
        .name{
            font-size: 12px;
            color: #717171;
        }
        .val{
            font-size: 12px;
            color: #929292;
        }
    }
    .tab{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        li{
            position: relative;
            padding: 0 44px;
            margin-right: 7px;
            font-size: 13px;
            line-height: 46px;
            text-align: center;
            color: #444;
            border: 1px solid #ececec;
            cursor: pointer;
            &:hover{
                opacity: .8;
            }
            &.active:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 4px;
                background-color: $main-color;
            }
        }
    }
    .wrap{
        .item{
            padding-bottom: 30px;
            margin-bottom: 30px;
            border-bottom: 1px dashed #f4f4f4;

            .key{
                font-weight: bold;
                color: #333;
                font-size: 14px;
            }
            .val{
                color: #757575;
                font-size: 14px;
            }
            .answer{
                display: flex;
                align-items: center;
                padding: 15px;
                margin: 15px 0;
                font-size: 12px;
                border: 1px solid #e8e8e8;
                background-color: #f3f2f2;
                .info{
                    display: inline-flex;
                    align-items: center;
                    margin-right: 30px;
                }
            }
            .meta{
                padding-left: 10px;
                margin: 20px 0;
                font-size: 12px;
                &.ans{
                    display: flex;
                    .info{
                        margin-right: 20px;
                    }
                }
                .key{
                    margin-bottom: 5px;
                }
            }
        }
    }
    .btns{
        display: flex;
        justify-content: center;
        margin-top: 20px;
        button{
            height: 30px;
            padding: 0 30px;
            margin: 0 15px;
            font-size: 14px;
            color: #333;
            line-height: 30px;
            background-color: #fff;
            border: 1px solid #ededed;
            border-radius: 4px;
            cursor: pointer;
            &.submit{
                color: #fff;
                background-color: $main-color;
                border-color: $main-color;
            }
            &:hover{
                opacity: .8;
            }
        }
    }
</style>