portal/src/components/client/QuestionsForCuoti/TrueOrFalse.vue

<template>
    <div class="mta-true-or-false" v-if="pageData.name">
        <el-row class="mta-first-row" type="flex">
            <el-col>
                <span class="wrap-shitiIndex" v-if="!!shitiIndex">
                    <span v-if="isYueDu">({{shitiIndex}})</span>
                    <span v-else>{{shitiIndex}}.</span>
                </span>
                <!-- 试题题目 -->
                <div class="mta-SC-title" v-html="pageData.name"></div>
                <span class="mta-SC-score" v-if="getShowScore && !isYueDu">（{{pageData.score}}分）</span>
            </el-col>
        </el-row>
        <el-row class="mta-two-row" type="flex" v-if='audioOptions' >
            <mta-bus-audio-player :checktimes="false" :options="audioOptions"></mta-bus-audio-player>
        </el-row>
        <el-row class="mta-two-row" type="flex">
            <el-col>
                <!-- 试题内容区域 -->
                <el-radio-group v-model="newRadioData" @change="selectChange"
                                :class="{'showError': showError && typeCase === 'geren'}">
                    <div class="mta-panduan-row">
                        <el-radio label="1">正确</el-radio>
                    </div>
                    <div class="mta-panduan-row">
                        <el-radio label="0">错误</el-radio>
                    </div>
                </el-radio-group>
                <div class="mta-modal" v-if="getShowModel"></div>
            </el-col>
        </el-row>
        <mta-answer-area
                v-if="typeCase === 'geren' || typeCase === 'cuoti2' || typeCase === 'cuoti3' || typeCase === 'yulan'"
                :data="{
                    showAnswer:showAnswer,
                    analysis: pageData.answer
                }"
        ></mta-answer-area>

    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import MtaAnswerArea from '@/components/client/QuestionsForCuoti/AnswerArea.vue'
    import MtaBusAudioPlayer    from '@/components/custom/MtaBusAudioPlayer.vue';

    export default {
        name: "TrueOrFalse",
        props: {
            questionData: { // 单选题数据
                require: true,
                type: Object,
            },
            shitiIndex: { // 试题序号
                type: Number,
                default: 0
            },
            isYueDu: {
                type: Boolean,
                default: false
            },
            yuduIndex: {
                type: Number,
            },
            // 组件接环状态， kaoshi,geren,yulan,cuoti2
            typeCase: {
                type: String,
                default: 'kaoshi'
            },
            getShowModel: {
                type: Boolean,
                default: true
            }
        },
        components: {
            MtaAnswerArea,
            MtaBusAudioPlayer,
        },
        data() {
            return {
                // 页面渲染必须数据
                pageData: null,
                // 答案
                newRadioData: this.questionData.reply,
                showAnswer: null,
                // 错误
                showError: false,
                // 解析
                analysis: null,
                audioOptions: null,
            }
        },
        watch: {

            questionData: {
                handler(newVal, oldVal) {
                    switch (this.typeCase) {
                        case `kaoshi`:
                            this.pageData = newVal;
                            this.newRadioData = newVal.reply;
                            break;
                        case `geren`:
                            this.pageData = newVal;
                            // 答案
                            this.newRadioData = newVal.reply;
                            // 解析答案
                            this.showAnswer = newVal.result === '0' ? '错误' : '正确';
                            // 解析
                            this.analysis = newVal.answer;
                            // 错误是否显示
                            this.showError = this.checkAnswer(newVal.result, newVal.reply);
                            break;
                        case `cuoti`:
                            this.pageData = newVal;
                            this.newRadioData = newVal.reply;
                            break;
                        case `yulan`:
                            this.pageData = newVal;
                            // this.newRadioData = newVal.result;
                            this.newRadioData = null;
                            // 解析答案
                            this.showAnswer = newVal.result === '0' ? '错误' : '正确';
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti2`:
                            this.pageData = newVal;
                            // 单选题答案
                            this.newRadioData = newVal.reply;
                            // 解析答案
                            this.showAnswer = newVal.reply === '0' ? '错误' : '正确';
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                        case `cuoti3`:
                            this.pageData = newVal;
                            // 单选题答案
                            this.newRadioData = newVal.reply;
                            // 解析答案
                            this.showAnswer = newVal.reply === '0' ? '错误' : '正确';
                            // 解析
                            this.analysis = newVal.answer;
                            break;
                    }

                    let data = this.questionData;
                    if (data.adjunct) {
                        let arrItem = JSON.parse(data.adjunct);
                        for (const item of arrItem) {
                            if (item.type === 'audio') {
                                this.audioOptions = {};
                                this.audioOptions.src = item.src;
                                this.audioOptions.title = item.oriname.split('.')[0];
                                this.audioOptions.autoplay = false;
                                this.audioOptions.dragable = item.dragable;

                                this.audioOptions.playtimes = item.playtimes;
                            }
                        }
                    }
                },
                immediate: true,
                deep: true
            },

            /* questionData: function (newVal, oldVal) {
                 this.newRadioData = newVal.reply;
             },*/
        },
        computed: {
            ...mapGetters(['getShowScore']),
        },
        methods: {
            checkAnswer(result, reply) {
                return result !== reply
            },
            selectChange(val) {
                this.questionData.reply = val;

                this.pageData.reply = val;
                this.showError = this.checkAnswer(this.pageData.result, val);

                if (this.isYueDu) {
                    this.$emit('reply', {
                        paragraph:  this.questionData.paragraph,
                        type: 'panduan',
                        stId: this.questionData.stId,
                        data: this.newRadioData,
                        number: this.yuduIndex,
                    });
                } else {
                    this.$emit('reply', {
                        paragraph:  this.questionData.paragraph,
                        stId: this.questionData.stId,
                        data: this.newRadioData,
                        number: this.shitiIndex - 1,
                    });
                }

            }
        },
    }
</script>