wkshi/resources/js/components/QuestionComponent.vue

<template>
    <div id="question">
        <header data-am-widget="header"
                class="am-header">
            <div class="am-header-left am-header-nav" onclick="history.go(-1)">
                <i class="am-icon-angle-left am-icon-md"></i>
            </div>

            <h1 class="am-header-title">
                <i class="am-icon-hourglass-1"></i>
                <span>{{shijian.text}}</span>

            </h1>
            <div class="am-header-right am-header-nav" @click="save">
                交卷
            </div>
        </header>

        <div class="body">
            <div class="header">
                <div class="time">
                    {{paper.name}}<span style="color: red;">（{{paper.exam_time}}分钟）</span>
                </div>
                <div class="btn">
                    {{question_id}}/{{questions.length}}
                </div>
            </div>

            <div class="content">
                <div class="title">
                    <span class="question-id">第{{question_id}}题：</span>
                    {{question.name}}
                </div>
                <div class="radios">
                    <div class="am-radio" v-for="radio in question.options">
                        <label>
                            <input v-if="question.answers.length === 1" type="radio" name="radio" @click='select(radio)'
                                   :value="radio.name">
                            <input v-if="question.answers.length !== 1" type="checkbox" name="radio"
                                   @click='select(radio)' :value="radio.name">
                            {{radio.name}}：{{radio.val}}
                        </label>
                    </div>
                    <input style="display:none;" id="hide-radio" type="radio" name="radio" value="">
                    <!--<input v-if="question.answers.length !== 1" style="display:none;" id="hide-radio" type="radio" name="radio" value="">-->
                </div>
            </div>
            <div class="error" v-if="alertStatus">
                <div class=" am-warning am-icon-warning mv-error"></div>
                <div class="msg">请先选择答案！</div>
            </div>
        </div>

        <div class="footer">
            <div :class="{prev: true, close: question_id === 1}" @click="prev">上一题</div>
            <div :class="{close: question_id === questions.length}" @click="next">下一题</div>
        </div>

    </div>
</template>
<script>
    export default {
        props: ['questions', 'paper', 'uid'],
        data() {
            return {
                index: 0,
                question: {},
                answer: [],
                selectVal: [],
                alertStatus: false,
                shijian: {
                    h: 0,
                    m: 0,
                    s: 0,
                    text: '00:00:00'
                },
                timeInterval: ''
            }
        },
        methods: {
            prev() {
                if (this.question_id === 1) {
                    return false
                }
                if (!this.saveVal()) return false
                this.index--
                this.initQuestion()
            },
            next() {
                if (this.question_id >= this.questions.length) {
                    return false
                }

                if (!this.saveVal()) return false

                this.index++
                this.initQuestion()
            },
            saveVal() {

                if (this.question.answers.length > 1) {
                    if (this.selectVal.length === 0) {
                        this.alertStatus = true
                        return false
                    }
                } else {
                    if (this.selectVal === '') {
                        this.alertStatus = true
                        return false
                    }
                }

                this.answer.splice(this.index, 1, this.selectVal);

                this.selectVal = []

                $('#hide-radio').attr("checked", true);
                $('input[name="radio"]').attr("checked", false);
                return true
            },
            async save(is_v = true) {
                if (is_v && this.selectVal === '') {
                    this.alertStatus = true
                    return false
                }

                this.answer.splice(this.index, 1, this.selectVal);

                let res = (await  axios.post('/api/answer', {
                    answer: this.answer,
                    'paper': this.paper.id,
                    'time': this.shijian,
                    'questions': this.questions,
                    uid: this.uid
                })).data
                if (res.status) {
                    layer.open({
                        content: '提交成功',
                        skin: 'msg',
                        time: 3000,
                        end: () => {
                            location.href = '/examHistoryContent/' + res.data.id
                        }
                    })
                }else {
                    layer.open({
                        content: res.msg,
                        skin: 'msg',
                        time: 3000,
                        end: () => {
                            location.href = '/examList'
                        }
                    })
                }
            },
            select(newval) {
                this.alertStatus = false;

                if (this.question.answers.length > 1) {
                    if (this.selectVal.indexOf(newval.name) < 0) {
                        this.selectVal[this.selectVal.length] = newval.name
                    } else {
                        let index = this.clocked.answer.indexOf(newval.name);
                        this.clocked.answer.splice(index, 1)
                    }
                } else {
                    this.selectVal = newval.name
                }
            },
            time() {
                this.shijian.s++
                if (this.shijian.s >= 60) {
                    this.shijian.m++
                    this.shijian.s = 0
                }
                if (this.shijian.m >= 60) {
                    this.shijian.h++
                    this.shijian.m = 0
                }
                this.shijian.text = this.prefixInteger(this.shijian.h, 2) + ':' + this.prefixInteger(this.shijian.m, 2) + ':' + this.prefixInteger(this.shijian.s, 2)

                if (this.paper.time !== 0) {
                    let time = this.shijian.h * 6 + this.shijian.m;
                    if (this.paper.time <= time) {
                        window.clearInterval(this.timeInterval)
                        let that = this
                        layer.open({
                            content: '测试的时间已经到了！'
                            , btn: ['知道了']
                            , shadeClose: false
                            , yes: function (index) {
                                that.save(false);
//                                location.href = '/questions';
//                                layer.close(index);
                            }
                        });
                    }
                }
            },
            prefixInteger(num, n) {
                return (Array(n).join(0) + num).slice(-n);
            },
            initQuestion() {
                this.question = this.questions[this.index]
                window.setTimeout(() => this.initAnswer())
            },
            initAnswer() {
                let val = this.answer[this.index] || false

                if (val) {
                    this.selectVal = val
                    if (this.question.answers.length > 1) {
                        $.map(val, function (v) {
                            $('input[value="' + v + '"]').click()
                        })
                    } else {
                        $('input[value="' + val + '"]').click()
                    }
                }
            }

        },
        mounted() {
            this.timeInterval = setInterval(this.time, 1000)
        },
        created() {
            this.initQuestion()
        },
        computed: {
            question_id() {
                return this.index + 1
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "../../sass/mobile";

    #question {
        .body {
            /*padding: 5px 15px;*/
            .header {
                padding: 10px 10px;
                background-color: #fff;
                border-bottom: 1px solid $border;
                color: $base;
                div {
                    display: inline-block;
                }
                .btn {
                    float: right;
                }
            }

            .content {
                padding: 5px 10px;
                .title {
                    padding: 10px 0 10px;
                    border-bottom: 1px solid $border;
                }
                .radios {
                    padding: 0 5px;
                }
            }

            .error {
                border: 1px solid #F37B1D;
                padding: 5px 10px;
                margin: 0 10px;
                .mv-error {
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    font-size: 18px;
                    line-height: 30px;
                    border-radius: 50%;
                    background-color: #F37B1D;
                    color: #fff;
                    text-align: center;
                    margin-right: 8px;
                }
                .msg {
                    font-size: 16px;
                    line-height: 30px;
                    color: #F37B1D;
                }
                div {
                    display: inline-block;
                }
            }
        }
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            border-top: 1px solid $border;
            div {
                width: 50%;
                text-align: center;
                margin: 8px 0;
            }
            .close {
                color: #999;
            }
            .prev {
                border-right: 1px solid $border;
            }
        }
    }
</style>