GCLS_Page_Book/src/views/preview.vue

<!--  -->
<template>
    <div class="question">
        <template v-if="context">
            <div v-html="context.title" v-if="context.title"></div>
            <div v-html="context.article" v-if="context.article"></div>
            <template v-if="queType == 'JUDEGE'">
                <Single
                    :answer="answer"
                    :cur="cur"
                    :getAnswer="getAnswer"
                    :moduleType="moduleType"
                    :queIndex="queIndex"
                    :uiType="context.ui_type"
                    ref="single"
                />
            </template>
            <a @click="handlePrev" class="btn-prev-big"></a>
            <a @click="handleNext" class="btn-next-big"></a>
        </template>
    </div>
</template>

<script>
import Single from "@/components/Single/index";

export default {
    name: "Question",
    props: {
        // context: {
        //     type: Array,
        //     default: null
        // },
    },
    components: {
        Single,
    },
    data () {
        return {
            answer: [],
            queType: "", //题型的类型
            moduleType: "", //模版的类型
            queList: [], //题目数组
            queTotal: 2, //题目总数
            queIndex: 0, //题目的索引
            cur: [], //当前的题目
            context: null
        };
    },
    computed: {},
    watch: {},
    //方法集合
    methods: {
        getAnswer (data, index) {
            if (this.answer.length + 1 < index) {
                // 新答案
                this.answer.push(data)
            } else {
                // 修改答案
                this.answer[index] = data
            }
            console.log(this.answer)
        },
        handleNext () {
            this.$refs.single.$emit("singleActiveindex")
            let _this = this;
            if (_this.queIndex == _this.queTotal - 1) {
                this.$message({
                    message: "已经是最后一题",
                    type: "success",
                });
            } else {
                _this.queIndex = _this.queIndex + 1;
                _this.cur = _this.queList[_this.queIndex];
            }
        },
        handlePrev () {
            this.$refs.single.$emit("singleActiveindex")
            let _this = this;
            if (_this.queIndex == 0) {
                this.$message({
                    message: "已经是第一题",
                    type: "success",
                });
            } else {
                _this.queIndex = _this.queIndex - 1;
                _this.cur = _this.queList[_this.queIndex];
            }
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () { },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        let _this = this;
        _this.context = {
            "content": "大撒大撒",
            "type": 9,
            "ui_type": "JUDEGE_01",
            "ui_typeList": [{ "name": "选择" }, { "name": "判断" }, { "name": "输入" }],
            "dataList": [
                {
                    "correct": [{ "con": "á", "isAnswer": 1 }],
                    "mp3": "",
                    "option": [{ "con": "ā", "isAnswer": false }, { "con": "á", "isAnswer": 1 }],
                }
            ]
        }
        if (_this.context) {
            let queType = _this.context.ui_type.split("_");
            _this.queType = queType[0];
            _this.moduleType = queType[1];
            let list = _this.context.dataList;
            if (list && list.length > 0) {
                _this.queList = list;
                _this.cur = list[_this.queIndex];
                _this.queTotal = list.length;
            }
        }
    },
    beforeCreate () { }, //生命周期 - 创建之前
    beforeMount () { }, //生命周期 - 挂载之前
    beforeUpdate () { }, //生命周期 - 更新之前
    updated () { }, //生命周期 - 更新之后
    beforeDestroy () { }, //生命周期 - 销毁之前
    destroyed () { }, //生命周期 - 销毁完成
    activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.question {
    position: relative;
    width: 100%;
    height: 100%;
    background: #ffd66b url('../assets/single/bg.png') center no-repeat;
    background-size: cover;
    .btn-prev-big,
    .btn-next-big {
        width: 172px;
        height: 116px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -58px;
        background: url('../assets/single/btn-prev.png') center no-repeat;
        background-size: 100% 100%;
    }
    .btn-next-big {
        right: 0;
        left: auto;
        background: url('../assets/single/btn-next.png') center no-repeat;
        background-size: 100% 100%;
    }
}
</style>