zhishifufei_php/application/wap/view/first/topic/problem_result.html

<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}练习结果{/block}
{block name="head"}
<style>
    .circle-container {
        margin-top: .8rem;
        text-align: center;
    }

    .circle-container p {
        font-size: .22rem;
        color: #999;
    }

    .percent-text {
        color: #2c8eff;
    }

    .question-result-page .result-ft {
        margin-top: .6rem;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="question-result-page">
        <div class="circle-container">
            <vue-circle-progress
                ref="circle"
                id="circle"
                :progress="0"
                :size="133"
                :reverse="false"
                line-cap="round"
                :fill="fill"
                empty-fill="rgba(213, 224, 236, 0.6)"
                :animation-start-value="0.0"
                :start-angle="Math.PI / 2"
                insert-mode="append"
                :thickness="5"
                inner-text="正确率"
                :show-percent="true"
            ><p>正确率</p></vue-circle-progress>
        </div>
        <div class="title">{{ result.title }}</div>
        <ul class="basic">
            <li>
                <div>题目数</div>
                <div>{{ result.test_paper_question.length }}</div>
            </li>
            <li>
                <div>错题数</div>
                <div>{{ result.wrong_question }}</div>
            </li>
            <li>
                <div>未答数</div>
                <div>{{ result.not_questions }}</div>
            </li>
        </ul>
        <div class="result">
            <div class="result-hd">
                <div>答题情况</div>
                <ul>
                    <li><span></span><span>正确</span></li>
                    <li><span></span><span>错误</span></li>
                    <li><span></span><span>未答</span></li>
                </ul>
            </div>
            <div class="result-bd">
                <a v-for="(item, index) in result.test_paper_question" :class="{ no: item.is_correct === 1, ok: item.is_correct === 2 }" href="javascript:">{{ index + 1 }}</a>
            </div>
            <div v-if="!footerHidden" class="result-ft">
                <a :href="'{:url('topic/problem_sheet')}?from=problem_result&test_id=' + test_id + '&record_id=' + result.id">返回答题卡</a>
                <!-- <a :href="'{:url('special/question_index')}?id=' + test_id">再考一次</a> -->
            </div>
        </div>
    </div>
    <quick-menu></quick-menu>
</div>
<script>
    require([
        'vue',
        'helper',
        'store',
        'vue-circle-progress',
        'quick'
    ], function (Vue, $h, $http, VueCircle) {
        var vm = new Vue({
            el: '#app',
            components: {
                'vue-circle-progress': VueCircle
            },
            data: {
                test_id: 0,
                result: {
                    title: '--',
                    score: 0,
                    grade: '--',
                    test_paper_question: [],
                    wrong_question: 0,
                    duration_time: '00:00:00'
                },
                fill : { gradient: ["rgba(44, 142, 255, 1)", "rgba(44, 142, 255, 0.05)"] },
                footerHidden: false
            },
            created: function () {
                this.test_id = $h.getParmas('test_id');
                this.footerHidden = $h.getParmas('from') === 'question_user';
                this.getResult();
            },
            methods: {
                getResult: function () {
                    $h.loadFFF();
                    $http.baseGet($h.U({
                        c: 'topic',
                        a: 'examinationResults',
                        q: {
                            test_id: this.test_id,
                            type: 1
                        }
                    }), function (res) {
                        $h.loadClear();

                        var result = res.data.data;
                        var questions = result.test_paper_question;

                        var duration = result.duration
                        var hours = Math.floor(duration / 3600000);
                        var minutes = Math.floor((duration - hours * 3600000) / 60000);
                        var seconds = Math.floor((duration - hours * 3600000 - minutes * 60000) / 1000);
                        if (hours < 10) {
                            hours = '0' + hours;
                        }
                        if (minutes < 10) {
                            minutes = '0' + minutes;
                        }
                        if (seconds < 10) {
                            seconds = '0' + seconds;
                        }
                        result.duration_time = hours + ':' + minutes + ':' + seconds;

                        for (var i = questions.length; i--;) {
                            if (!Array.isArray(questions[i].userAnswer)) {
                                Object.assign(questions[i], questions[i].userAnswer);
                            }
                        }

                        vm.$refs.circle.updateProgress(parseInt(result.accuracy));
                        vm.result = result;
                    }, function () {
                        window.location.replace($h.U({
                            c: 'topic',
                            a: 'question_user'
                        }));
                    });
                }
            }
        });
    });
</script>
{/block}