FE_exam_server/src/pages/practice/detail/index.vue

<template>
    <div class="box">
        <h1 class="title">{{paperName }}</h1>
        <div class="metas">
            <div class="m-r-20">
                <span class="name">总分：</span>
                <span class="val">100分</span>
            </div>
            <div class="m-r-20" v-if="score != null">
                <span class="name">得分：</span>
                <span class="val">{{score}}分</span>
            </div>
            <div>
                <span class="name">考试时长：</span>
                <span class="val">{{duration}}分钟</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.questionScore}}</p>
                    </div>
                </div>
                <div class="meta">
                    <p class="key">题干：</p>
                    <p class="val" v-html="item.questionStem"></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.userAnswer}}</p>
                    </div>
                </div>
                <div class="meta" v-if="active == 4">
                    <p class="key">附件：</p>
                    <div class="val">
                        <el-button v-if="item.fileUrl || item.videoAudio" type="text" @click="preview(item)">{{item.fileName}}</el-button>
                        <el-button v-if="item.fileUrl" type="primary" size="mini" @click="download(item)">下载</el-button>
                    </div>
                </div>
                <div class="meta">
                    <p class="key">答案解析：</p>
                    <p class="val" v-html="item.answerAnalysis"></p>
                </div>
            </div>
        </div>

        <div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000">
            <div class="el-image-viewer__mask"></div>
            <span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span>
            <div class="player" id="player"></div>
        </div>
        <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
    </div>
</template>
<script>
import setBackground from '@/mixins/setBackground'
import file from '@/mixins/file'
import { mapState } from 'vuex'
import pdf from '@/components/pdf'
export default {
    mixins: [ setBackground,file ],
    data() {
        return {
            paperName: '',
            duration: 0,
            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
                }
            ],
            typeNameList: ['单项选择','多项选择','判断题','简答题','填空题'],
            active: 1,
            list: [],
            curType: []
        };
    },
    components: { pdf },
    computed: {
        ...mapState('user', [
            'userId'
        ]),
        ...mapState('achievement', [
            'practiseId','stuId','score'
        ])
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            this.$post(`${this.api.reviewDetail}?id=${this.practiseId}`)
            .then(res => {
                let data = res.data
                data.list.forEach(n => {
                    n.isCorrecting == 0 && (n.questionScore = '')
                    n.isSub = n.typeName == '简答题'
                    if(n.typeName == '填空题'){
                        let answer = []
                        for(let i in n){
                            if(i.includes('option')) answer.push(n[i])
                        }
                        n.answer = answer.join('|')
                        n.userAnswer = n.userAnswer ? n.userAnswer.replace(/&lt;&gt;/g,'|') : ''
                    }
                    if(n.typeName == '简答题'){
                        if(n.fileUrl){
                            let file = n.fileUrl.split(',')
                            n.fileName = file[0]
                            n.fileurl = file[1]
                        }
                        if(n.videoAudio){
                            let file = n.videoAudio.split(',')
                            n.fileName = file[0]
                            n.fileurl = file[1]
                        }
                    }
                })
                this.list = data.list
                let tabs = this.tabs
                data.list.find(n => n.typeName == '单项选择') && (tabs[0].show = true)
                data.list.find(n => n.typeName == '多项选择') && (tabs[1].show = true)
                data.list.find(n => n.typeName == '判断题') && (tabs[2].show = true)
                data.list.find(n => n.typeName == '简答题') && (tabs[3].show = true)
                data.list.find(n => n.typeName == '填空题') && (tabs[4].show = true)
                for(let n of tabs){
                    if(n.show){
                        this.active = n.id
                        break
                    }
                }
                this.handleOptions()
                this.paperName = data.paperName
                this.userName = data.stuName
                this.this_score = data.score
                this.duration = data.timeCost
            })
            .catch(err => {})
        },
        tabChange(id){
            this.active = id
            this.handleOptions()
        },
        handleOptions(){
            let list = this.list
            let typeName = this.typeNameList[this.active-1]
            list = list.filter(n => n.typeName == typeName)
            list.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 = list
        }
    },
};
</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>