zhishifufei_php/application/wap/view/first/topic/question_wrong.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>
    body {
        background-color: #f5f5f5;
    }

    .wrong-list-page .nav {
        position: fixed;
        top: .2rem;
        right: .3rem;
        left: .3rem;
        display: -webkit-box;
        display: flex;
        border-radius: .12rem;
        background-color: #fff;
    }

    .wrong-list-page .nav a {
        -webkit-box-flex: 1;
        flex: 1;
        position: relative;
        height: .9rem;
        font-size: .28rem;
        line-height: .9rem;
        text-align: center;
        color: #333;
    }

    .wrong-list-page .nav a.on {
        color: #2c8eff;
    }

    .wrong-list-page .nav a.on::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: .7rem;
        height: .04rem;
        border-radius: .02rem;
        background-color: #2c8eff;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .wrong-list-page .list {
        padding: .2rem .3rem;
        margin-top: 1.1rem;
    }

    .wrong-list-page .list a {
        display: block;
        padding-right: .3rem;
        padding-left: .3rem;
        border-radius: .12rem;
        background-color: #fff;
    }

    .wrong-list-page .list a ~ a {
        margin-top: .3rem;
    }

    .wrong-list-page .list .name {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        padding-top: .2rem;
        padding-bottom: .2rem;
    }

    .wrong-list-page .list .name div:nth-child(2) {
        -webkit-box-flex: 1;
        flex: 1;
        margin-right: .18rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: .3rem;
        color: #2c8eff;
    }

    .wrong-list-page .list .name img {
        display: block;
        width: .28rem;
        height: .28rem;
    }

    .wrong-list-page .list .desc {
        border-top: 1px dashed #e3e3e3;
        padding-top: .2rem;
        padding-bottom: .28rem;
        font-size: .3rem;
        color: #282828;
    }

    .wrong-list-page .list .desc div {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .wrong-list-page .list .desc span {
        color: #999;
    }

    .empty {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: .3rem;
        text-align: center;
        color: #999;
    }

    .empty img {
        width: 4.14rem;
        vertical-align: middle;
        -webkit-touch-callout: none;
        pointer-events: none;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="wrong-list-page">
        <div class="nav">
            <a :class="{ on: is_master === '' }" href="javascript:" @click="onTab('')">全部</a>
            <a :class="{ on: is_master === 1 }" href="javascript:" @click="onTab(1)">已掌握</a>
            <a :class="{ on: is_master === 0 }" href="javascript:" @click="onTab(0)">未掌握</a>
        </div>
        <div v-if="questions.length" class="list">
            <a v-for="item in questions" :href="'{:url('topic/question_detail_wrong')}?id=' + item.id">
                <div class="name">
                    <div><img src="{__WAP_PATH}zsff/images/question01.png"></div>
                    <div>{{ item.title }}</div>
                    <div>
                        <img v-if="item.is_master" src="{__WAP_PATH}zsff/images/question25.png">
                        <img v-else src="{__WAP_PATH}zsff/images/question26.png">
                    </div>
                </div>
                <div class="desc">
                    <div><span>[{{  item.question_type_text }}]</span>{{ item.stem }}</div>
                </div>
            </a>
        </div>
        <div v-else-if="page > 1 && !loading" class="empty">
            <img src="{__WAP_PATH}zsff/images/empty-box.png">
            <div>暂无数据</div>
        </div>
    </div>
    <quick-menu></quick-menu>
</div>
<script>
    require([
        'vue',
        'helper',
        'store',
        'quick'
    ], function (Vue, $h, $http) {
        var vm = new Vue({
            el: '#app',
            data: {
                page: 1,
                limit: 15,
                is_master: '',
                loading: false,
                finished: false,
                questions: []
            },
            watch: {
                loading: function (val) {
                    val ? $h.loadFFF() : $h.loadClear();
                }
            },
            created: function () {
                this.getQuestions();
            },
            mounted: function () {
                this.$nextTick(function () {
                    $h.EventUtil.listenTouchDirection(document, function () {
                        vm.getQuestions();
                    });
                });
            },
            methods: {
                getQuestions: function () {
                    if (this.loading || this.finished) {
                        return;
                    }
                    this.loading = true;
                    $http.basePost($h.U({
                        c: 'topic',
                        a: 'userWrongBank'
                    }), {
                        page: this.page++,
                        limit: this.limit,
                        is_master: this.is_master
                    }, function (res) {
                        var questions = res.data.data;
                        for (var i = questions.length; i--;) {
                            switch (questions[i].question_type) {
                                case 1:
                                    questions[i].question_type_text = '单选题';
                                    break;
                                case 2:
                                    questions[i].question_type_text = '多选题';
                                    break;
                                case 3:
                                    questions[i].question_type_text = '判断题';
                                    break;
                            }
                        }
                        vm.questions = vm.questions.concat(questions);
                        vm.loading = false;
                        vm.finished = vm.limit > questions.length;
                    });
                },
                onTab: function (master) {
                    if (this.loading) {
                        return;
                    }
                    this.is_master = master;
                    this.questions = [];
                    this.page = 1;
                    this.finished = false;
                    this.getQuestions();
                }
            }
        });
    });
</script>
{/block}