zyedu/application/wap/view/first/topic/problem_detail.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}练习答题{/block}
{block name="head_top"}
<style>
    body {
        background-color: #f5f5f5;
    }

    .share-mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 6;
        width: 100%;
        height: 100%;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app" class="question-paper">
    <div v-show="questionSwiper" class="header">
        <div class="message">温馨提示：请点击“答题卡”前去提交考试哦！</div>
        <div class="header-bd">
            <a :href="'{:url('topic/problem_sheet')}?test_id=' + test_id + '&record_id=' + e_id + '&index=' + activeIndex">答题卡</a>
            <a v-if="isWechat" href="javascript:" @click="isShare = true">分享</a>
        </div>
    </div>
    <div class="swiper-container swiper-no-swiping">
        <div class="swiper-wrapper">
            <div v-for="item in virtualData.slides" :key="item.id" :style="{ left: virtualData.offset + 'px' }" class="swiper-slide">
                <div class="type">{{ item.questionType }}</div>
                <div class="question">
                    <div>{{ item.stem }}</div>
                    <img v-if="item.image" :src="item.image">
                    <div :class="{ image: item.is_img }" class="label-group">
                        <template v-for="option in item.options">
                            <label v-if="option.value" :key="option.code">
                                <input v-if="item.question_type === 2" v-model="item.user_answer" :value="option.code" :disabled="!!item.is_correct" type="checkbox" hidden>
                                <input v-else v-model="item.user_answer" :value="option.code" :disabled="!!item.is_correct" type="radio" hidden>
                                <div :class="{
                                        ok: option.right && item.is_correct && item.user_answer.includes(option.code),
                                        no: !option.right && item.is_correct && item.user_answer.includes(option.code)
                                    }">
                                    <img v-if="item.is_img" :src="option.value">
                                    <template v-else>{{ option.value }}</template>
                                </div>
                            </label>
                        </template>
                    </div>
                </div>
                <div v-show="item.is_correct" class="analysis">
                    <div :class="{ no: item.is_correct === 1 }">回答{{ item.is_correct === 1 ? '错误' : '正确' }}</div>
                    <div>
                        <div>正确答案：<div>{{ item.answer }}</div>
                        </div>
                        <div>您的答案：<div>{{ item.user_answer.toString() }}</div>
                        </div>
                    </div>
                    <div>试题难度：<span v-for="star in 5" :key="star" :class="{ on: item.difficulty >= star }" class="iconfont iconxing"></span></div>
                    <div>答案解析：</div>
                    <div v-html="item.analysis"></div>
                    <div v-if="item.special.length">关联知识点：</div>
                    <a v-for="special in item.special" :key="special.id"
                       :href="(special.is_light ? '{:url('special/single_details')}' : '{:url('special/details')}') + '?id=' + special.id">{{ special.title }}</a>
                </div>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div v-if="questionSwiper" class="footer">
        <button :disabled="!questionSwiper.activeIndex" @click="slidePrev">
            <i class="iconfont iconshangyige"></i>
            <div>上一题</div>
        </button>
        <button :disabled="!!questions[questionSwiper.activeIndex].is_correct" @click="submitQuestion">
            <i class="iconfont icontijiao"></i>
            <div>确认提交</div>
        </button>
        <button :disabled="questionSwiper.activeIndex === questionSwiper.virtual.slides.length - 1" @click="slideNext">
            <i class="iconfont iconxiayige"></i>
            <div>下一题</div>
        </button>
    </div>
    <img v-show="isShare" class="share-mask" src="{__WAP_PATH}zsff/images/share-info.png" @touchmove.prevent @click="isShare = false">
    <quick-menu></quick-menu>
    <question-guide :visible.sync="guideVisible"></question-guide>
</div>
{/block}
{block name="foot"}
<script>
    window.overallShare = false;
    var wechat_share =<?php echo isset($overallShareWechat) ? $overallShareWechat : '{}'; ?>;
    var uid = '{$uid}';
    var titles = '{$titles}';
    require([
        'vue',
        'helper',
        'axios',
        'swiper',
        'layer',
        'components/question-guide/index',
        'quick'
    ], function (Vue, $h, axios, Swiper, layer, questionGuide) {
        var isWechat = '{$isWechat}';
        var app = new Vue({
            el: '#app',
            components: {
                'question-guide': questionGuide
            },
            data: {
                questions: [],
                test_id: '',
                e_id: '',
                isWechat: isWechat,
                is_analysis: 0,
                isShare: false,
                activeIndex: 0,
                virtualData: {
                    slides: []
                },
                questionSwiper: null,
                guideVisible: false
            },
            watch: {
                guideVisible: function (value) {
                    if (!value) {
                        localStorage.setItem('problem-guide', new Date());
                    }
                }
            },
            created: function () {
                var vm = this;
                this.test_id = $h.getParmas('test_id');
                this.activeIndex = Number($h.getParmas('index'));

                if (parseInt($h.getParmas('is_analysis'))) {
                    this.is_analysis = 1;
                    // this.e_id = $h.getParmas('e_id');
                    // this.getQuestions();
                } else {
                    // this.getSituation();
                }
                if ($h.getParmas('e_id')) {
                    this.e_id = $h.getParmas('e_id');
                    this.getQuestions();
                }
                if (this.isWechat) {
                    mapleWx($jssdk(), function () {
                        this.onMenuShareAll({
                            title: titles,
                            desc: titles,
                            imgUrl: wechat_share.wechat_share_img,
                            link: window.location.origin + "{:url('topic/problem_index')}?spread_uid=" + uid + "&id=" + vm.test_id
                        });
                    });
                }
            },
            methods: {
                // 获取状态
                getSituation: function () {
                    var vm = this;
                    var load = layer.load(1);
                    axios.get('/wap/topic/situationRecord', {
                        params: {
                            id: this.test_id
                        }
                    }).then(function (res) {
                        if (res.data.code === 400) {
                            return layer.msg(res.data.msg);
                        }
                        switch (res.data.data) {
                            case 0:
                                vm.getAnswer();
                                break;
                            case 1:
                                vm.getAnswerAgain();
                                break;
                            case 2:
                                vm.getAnswerContinue();
                                break;
                        }
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 开始答题
                getAnswer: function () {
                    var vm = this;
                    var load = layer.load(1);
                    axios.get('/wap/topic/userAnswer', {
                        params: {
                            test_id: this.test_id,
                            type: 1
                        }
                    }).then(function (res) {
                        if (res.data.code === 200) {
                            vm.e_id = res.data.data;
                            $h.setCookie('e_id', vm.e_id);
                            vm.getQuestions();
                        } else {
                            layer.msg(res.data.msg, function () {
                                window.location.assign('{:url(\'topic/question_user\')}?type=1');
                            });
                        }
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 再次答题
                getAnswerAgain: function () {
                    var vm = this;
                    var load = layer.load(1);
                    axios.get('/wap/topic/takeTheTestAgain', {
                        params: {
                            test_id: this.test_id,
                            type: 1
                        }
                    }).then(function (res) {
                        if (res.data.code === 200) {
                            vm.e_id = res.data.data;
                            $h.setCookie('e_id', vm.e_id);
                            vm.getQuestions();
                        } else {
                            layer.msg(res.data.msg, function () {
                                window.location = "{:url('topic/question_user')}?type=1";
                            });
                        }
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 继续答题
                getAnswerContinue: function () {
                    var vm = this;
                    var load = layer.load(1);
                    axios.get('/wap/topic/continueAnswer', {
                        params: {
                            test_id: this.test_id,
                            type: 1
                        }
                    }).then(function (res) {
                        if (res.data.code === 200) {
                            vm.e_id = res.data.data;
                            $h.setCookie('e_id', vm.e_id);
                            vm.getQuestions();
                        } else {
                            layer.msg(res.data.msg, function () {
                                window.location = "{:url('topic/question_user')}?type=1";
                            });
                        }
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 获取练习题
                getQuestions: function () {
                    var vm = this;
                    var load = layer.load(1);
                    axios.get('/wap/topic/testPaperQuestions', {
                        params: {
                            test_id: this.test_id,
                            record_id: this.e_id,
                            type: 1
                        }
                    }).then(function (res) {
                        var questions = res.data.data;
                        questions.forEach(function (question) {
                            question.options = [];
                            if (Array.isArray(question.option)) {
                                question.option.forEach(function (option, index) {
                                    var code = String.fromCharCode(index + 65);
                                    question.options.push({
                                        code: code,
                                        value: option,
                                        right: question.answer.includes(code)
                                    });
                                });
                            } else {
                                for (var key in question.option) {
                                    if (Object.hasOwnProperty.call(question.option, key)) {
                                        question.options.push({
                                            code: key,
                                            value: question.option[key],
                                            right: question.answer.includes(key)
                                        });
                                    }
                                }
                            }
                            if (!Array.isArray(question.userAnswer)) {
                                Object.assign(question, question.userAnswer);
                            }
                            if (!('is_correct' in question)) {
                                question.is_correct = 0;
                            }
                            if (!('user_answer' in question)) {
                                question.user_answer = '';
                            }
                            if (question.question_type === 2) {
                                question.user_answer = question.user_answer ? question.user_answer.split(',') : [];
                            }
                            switch (question.question_type) {
                                case 1:
                                    question.questionType = '单选题';
                                    break;
                                case 2:
                                    question.questionType = '多选题';
                                    break;
                                case 3:
                                    question.questionType = '判断题';
                                    break;
                            }
                        });
                        vm.questions = questions;
                        vm.questionSwiper = new Swiper('.swiper-container', {
                            initialSlide: vm.activeIndex,
                            pagination: {
                                el: '.swiper-pagination',
                                type: 'fraction'
                            },
                            virtual: {
                                slides: questions,
                                renderExternal: function (data) {
                                    vm.virtualData = data;
                                }
                            },
                            on: {
                                init: function () {
                                    vm.guideVisible = !localStorage.getItem('problem-guide');
                                },
                                slideChange: function () {
                                    vm.activeIndex = this.activeIndex;
                                    if (vm.activeIndex === vm.questions.length - 1) {
                                        layer.msg('答完全部考题后<br>点击左上角“答题卡”前去提交练习');
                                    }
                                }
                            }
                        });
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 提交本题
                submitQuestion: function () {
                    var question = this.questions[this.activeIndex];
                    var data = {
                        e_id: this.e_id,
                        questions_id: question.questions_id,
                        answer: question.answer,
                        score: question.score,
                        type: 1
                    };
                    if (!question.user_answer.length) {
                        return layer.msg('请作答后提交本题');
                    }
                    if (question.question_type === 2) {
                        question.user_answer.sort();
                        data.user_answer = question.user_answer.toString();
                    } else {
                        data.user_answer = question.user_answer;
                    }
                    data.is_correct = data.user_answer === question.answer ? 2 : 1;
                    var load = layer.load(1);
                    axios.post('/wap/topic/submitQuestions', data).then(function (res) {
                        if (res.data.code === 200) {
                            question.is_correct = data.is_correct;
                        } else {
                            layer.msg(res.data.msg);
                        }
                    }).catch(function () {

                    }).then(function () {
                        layer.close(load);
                    });
                },
                // 上一题
                slidePrev: function () {
                    this.questionSwiper.slidePrev();
                },
                // 下一题
                slideNext: function () {
                    this.questionSwiper.slideNext();
                },
            }
        });
    });
</script>
{/block}