portal/src/components/client/Questions/ReadTheTopic.vue

<template>
    <div class="mta-read-the-topic">
        <el-row class="mta-first-row" type="flex">
            <el-col>

                <!--                <span>阅读以下文字并回答问题</span>-->
                <!--                <span class="mta-SC-score" v-if="getShowScore">（{{questionData.score}}分）</span>-->
            </el-col>
        </el-row>

        <el-row class="mta-two-row" type="flex">
            <el-col>
                <span style="margin-right: 10px;" v-if="!!shitiNum">{{shitiNum}}.</span>
                <!-- 试题题干区域 -->
                <div style="display: flex;justify-content: space-between;flex-direction: row;">

                    <span class="mta-SC-title" v-html="questionData.name"></span>
                    <span class="mta-SC-score" v-if="getShowScore">（{{questionData.score}}分）</span>
                </div>
            </el-col>
        </el-row>

        <el-row class="mta-two-row" type="flex" v-if='audioOptions'>
            <mta-bus-audio-player
                    :options="audioOptions"
                    @updAudioPlaytimes="updAudioPlaytimes"
            >
            </mta-bus-audio-player>
        </el-row>

        <el-row class="mta-three-row" type="flex">
            <el-col>
                <!-- 试题区域 -->
                <!-- 单选题 -->
                <div v-for="(item,index) in danxuanData" :key="`danxuan${index}`" v-if="danxuanData.length > 0">
                    <mta-single-choice
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :shitiIndex="`${paragraph}-${num+index}`"
                            @reply="reply"
                            @updAudioPlaytimesSub="e=> updAudioPlaytimesSub('danxuan', index, e)"
                    ></mta-single-choice>
                </div>
                <!-- 多选题 -->
                <div v-for="(item,index)  in duoxuanData" :key="`duoxuan${index}`" v-if="duoxuanData.length > 0">
                    <mta-multiple-choice
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :shitiIndex="`${paragraph}-${num+index+danxuanData.length}`"
                            @reply="reply"
                            @updAudioPlaytimesSub="e=> updAudioPlaytimesSub('duoxuan', index, e)"
                    ></mta-multiple-choice>
                </div>
                <!-- 判断题 -->
                <div v-for="(item,index)  in panduanData" :key="`panduan${index}`" v-if="panduanData.length > 0">
                    <mta-true-or-false
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :shitiIndex="`${paragraph}-${num+index+panduanData.length+duoxuanData.length}`"
                            @reply="reply"
                            @updAudioPlaytimesSub="e=> updAudioPlaytimesSub('panduan', index, e)"
                    ></mta-true-or-false>
                </div>
                <!-- 填空题 -->
                <div v-for="(item,index)  in tiankongData" :key="`tiankong${index}`" v-if="tiankongData.length > 0">
                    <mta-gap-filling
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            :shitiIndex="`${paragraph}-${num+index+danxuanData.length+panduanData.length+panduanData.length}`"
                            @reply="reply"
                            @updAudioPlaytimesSub="e=> updAudioPlaytimesSub('tiankong', index, e)"
                    ></mta-gap-filling>
                </div>
                <!-- 简答题 -->
                <div v-for="(item,index)  in jiandaData" :key="`jianda${index}`" v-if="jiandaData.length > 0">
                    <mta-short-answer-question
                            :questionData="item"
                            :is-yue-du="true"
                            :yuduIndex="index"
                            @clickUploadFile="clickUploadFile"
                            @richText="richText"
                            :shitiIndex="`${paragraph}-${num+index+danxuanData.length+panduanData.length+panduanData.length+tiankongData.length}`"
                            @reply="reply"
                            :option="option"
                            @updAudioPlaytimesSub="e=> updAudioPlaytimesSub('jianda', index, e)"
                    ></mta-short-answer-question>
                </div>
            </el-col>
        </el-row>
        <div class="mta-modal" v-if="getShowModel"></div>
    </div>
</template>

<script>
    import MtaSingleChoice        from '@/components/client/Questions/SingleChoice.vue';
    import MtaTrueOrFalse         from '@/components/client/Questions/TrueOrFalse.vue';
    import MtaMultipleChoice      from '@/components/client/Questions/MultipleChoice.vue';
    import MtaGapFilling          from '@/components/client/Questions/GapFilling.vue';
    import MtaShortAnswerQuestion from '@/components/client/Questions/ShortAnswerQuestion.vue';
    import { mapGetters }         from 'vuex';
    import MtaBusAudioPlayer      from '@/components/custom/MtaBusAudioPlayer.vue';

    export default {
        name:       'ReadTheTopic',
        components: {
            MtaSingleChoice,
            MtaMultipleChoice,
            MtaTrueOrFalse,
            MtaGapFilling,
            MtaShortAnswerQuestion,
            MtaBusAudioPlayer,
        },
        props:      {
            questionData: { // 简答题数据
                require: true,
                type:    Object,
            },
            shitiIndex:   {
                type: String,
            },
            option:       {
                type:    Object,
                default: () => ({}),
            },
        },
        computed:   {
            danxuanData() {
                return this.questionData.danxuan;
            },
            duoxuanData() {
                return this.questionData.duoxuan;
            },
            panduanData() {
                return this.questionData.panduan;
            },
            jiandaData() {
                return this.questionData.jianda;
            },
            tiankongData() {
                return this.questionData.tiankong;
            },
            ...mapGetters(['getShowScore', 'getShowModel']),
        },
        data() {
            return {
                num:          1,
                // 段落
                paragraph:    null,
                shitiNum:     0,
                audioOptions: null,
            };
        },
        watch:      {
            shitiIndex:   {
                handler(newVal, oldVal) {
                    if (newVal) {
                        let c = newVal.split('-');
                        this.paragraph = c[0];
                        this.shitiNum = c[1];
                    }
                },
                immediate: true,
            },
            questionData: {
                handler(newVal, oldVal) {
                    // console.log(newVal);
                    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.curPlaytimes = newVal.playtimes;
                                this.audioOptions.playtimes = item.playtimes;
                            }
                        }
                    }
                },
                immediate: true,
            },
        },
        methods:    {
            clickUploadFile(data){
                this.$emit('clickUploadFile', data);
            },
            richText(){
                this.$emit('richText','richtext');
            },
            reply(data) {
                const newData = Object.assign(data, {
                    stId:      this.questionData.stId,
                    paragraph: this.paragraph,
                });
                this.$emit('reply', newData);
            },
            updAudioPlaytimes(playtimes) {
                this.$emit('updAudioPlaytimes', {
                    stId:      this.questionData.stId,
                    playtimes: playtimes,
                });
            },
            updAudioPlaytimesSub(type, index, payload) {
                this.$emit('updAudioPlaytimes', {
                    stId:      this.questionData.stId,
                    type:      type,
                    index:     index,
                    playtimes: payload.playtimes,
                });
            },
        },
    };
</script>