wastesorting/src/pages/waste_sorting/question.vue

<template>
    <view>
        <view class="uni-padding-wrap" v-if="isLoad">

            <view v-for="(question,q_index) in questions" :key="q_index" class="question uni-flex uni-column">
                <text class="title uni-center">{{question.question_title}}</text>
                <radio-group @change="doChange($event,q_index)">
                    <label class="uni-list-cell uni-list-cell-pd" :class="{true:show_answer&&answer['is_true']===1}" v-for="(answer,a_index) in question.answer" :key="a_index">
                        <view>
                            <radio :value="a_index"/>
                        </view>
                        <view :class="{true_font:show_answer&&answer['is_true']===1}">{{answer.answer}}</view>
                    </label>
                </radio-group>
            </view>

            <view class="uni-flex uni-row button-group question" v-if="questions.length>0">
                <view class="flex-item">
                    <button type="primary" @click="submit">提交答卷</button>
                </view>
                <view class="flex-item">
                    <button type="primary" class="reset" @click="reset">重置答卷</button>
                </view>
            </view>
            <view class="uni-flex vertical-center" :style="{height: height+'px'}" v-else>
                <view class="weui-btn-area" :style="{width:width+'px'}">
                    <button class="weui-btn" type="default" @click="openConfirm">错误提示</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {config,getInterface} from 'common/config'

    export default {
        name: "question",
        data: function () {
            return {
                title: "垃圾百科测验",
                questions:[],
                isLoad:false,
                show_answer:false,
                height:0,
                width:0
            }
        },
        methods:{
            openConfirm:function(){
                let that=this
                uni.showModal({
                    title:"错误提示",
                    content:that.err_msg,
                    showCancel:false
                })
            },
            reset:function () {
                this.show_answer=false
                uni.reLaunch({
                    url: 'question'
                });
            },
            check:function(true_count){
                let count=this.questions.length
                let that=this
                this.show_answer=true
                uni.showModal({
                    title:"答题结果",
                    content:"共"+count+"题，对错比："+true_count+"/"+(count-true_count),
                    cancelText:"再来一次",
                    success:function (res) {
                        if(res.cancel){
                            that.reset()
                        }
                    }
                })
            },
            submit:function () {
                console.info("提交答卷")
                let true_count=0;
                let that=this
                for(let index in this.questions){
                    if(this.questions[index]["is_true"]){
                        true_count++
                    }
                    if(!this.questions[index].hasOwnProperty("submit_answer")){
                        uni.showModal({
                            title:"提示信息",
                            content:"有题目没有填写答案，确认提交答卷？",
                            confirmText:"提交答卷",
                            cancelText:"继续答卷",
                            success:function (res) {
                                if(res.confirm){
                                    that.check(true_count)
                                }
                            },
                            fail:function (err) {
                                console.error(err)
                                uni.showToast({
                                    title:"审核答卷异常，请联系管理员"
                                })
                            }
                        })
                        return
                    }

                }
                this.check(true_count)


            },
            doChange:function(e,q_index){
                this.questions[q_index]["submit_answer"]=parseInt(e.target.value);
                this.questions[q_index]["is_true"]=this.questions[q_index]["submit_answer"]===this.questions[q_index]["right_answer"]
            }
        },
        onShow:function(){
            console.info("加载试题中")
            uni.showLoading({
                title:"加载试题中"
            })
            let that=this
            uni.getSystemInfo({
                success:function (res) {
                    console.info(res)
                    that.height=res.windowHeight
                    that.width=res.windowWidth
                }
            })
            let url=getInterface(config.interface.create_question)

            console.info("创建试题接口："+url);
            uni.request({
                url:url,
                success:function (res) {
                    console.info(res.data)
                    if(res.data.status) {
                        that.questions = res.data.result;
                    }else{
                        that.err_msg=res.data.msg
                        uni.showModal({
                            title:"错误提示",
                            content:that.err_msg,
                            showCancel:false
                        })
                    }
                },
                fail:function (err) {
                    console.error(err)
                    uni.showToast({
                        title:"创建试题失败，请联系管理员"
                    })
                },
                complete:function () {
                    that.isLoad=true
                    uni.hideLoading()
                }
            })
        },

    }
</script>

<style scoped>
    .uni-list-cell {
        justify-content: flex-start
    }
    .question{
        margin-top:10px;
    }
    .reset{
        margin-left: 20px;
    }
    .button-group{
        justify-content: center;
    }
    .true{
        background-color: lightgrey;
    }
    .true_font{
        color: green;
        font-size: large;
    }
    .false{
        color: red;
    }
/*    水平垂直居中*/
    .vertical-center{
        align-items: center;
        justify-content:center;
    }
</style>