123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <!-- +---------------------------------------------------------------------- -->
- <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
- <!-- +---------------------------------------------------------------------- -->
- <!-- | Author: CRMEB Team <admin@crmeb.com> -->
- <!-- +---------------------------------------------------------------------- -->
- {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: #191C6E;
- }
- .wrong-list-page .nav a.on::after {
- content: "";
- position: absolute;
- left: 50%;
- bottom: 0;
- width: .7rem;
- height: .04rem;
- border-radius: .02rem;
- background-color: #191C6E;
- -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: #191C6E;
- }
- .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" :key="item.id" href="javascript:" @click="goQuestion(item)">
- <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();
- },
- goQuestion: function (item) {
- localStorage.setItem('wrong_question', JSON.stringify({
- id: item.id,
- is_master: this.is_master
- }));
- window.location.assign("{:url('topic/question_detail_wrong')}");
- }
- }
- });
- });
- </script>
- {/block}
|