zhishifufei_uniapp/pages/topic/question_wrong.vue

<template>
  
  <BaseContainer class="wrong-list-page">
    <NavBar title="我的错题" />
    <view class="nav">
      <view class="nav-item" :class="{ on: is_master === '' }" @click="onTab('')"
        >全部</view
      >
      <view class="nav-item" :class="{ on: is_master === 1 }" @click="onTab(1)"
        >已掌握</view
      >
      <view class="nav-item" :class="{ on: is_master === 0 }" @click="onTab(0)"
        >未掌握</view
      >
    </view>
    <view v-if="questions.length" class="list">
      <navigator
        v-for="item in questions"
        :url="`/pages/topic/question_detail_wrong?id=${item.id}&ismaster=${is_master}`"
      >
        <view class="name">
          <view>
            <image :src="getImgPath('/wap/first/zsff/images/question01.png')" />
          </view>
          <view class="title">{{ item.title }}</view>
          <view>
            <image
              v-if="item.is_master"
              :src="getImgPath('/wap/first/zsff/images/question25.png')"
            />
            <image v-else :src="getImgPath('/wap/first/zsff/images/question26.png')" />
          </view>
        </view>
        <view class="desc">
          <view>
            <text>[{{ item.question_type_text }}]</text>{{ item.stem }}
          </view>
        </view>
      </navigator>
    </view>
    <view v-else-if="page > 1 && !loading" class="empty">
      <image mode="widthFix" :src="getImgPath('/wap/first/zsff/images/empty-box.png')" />
      <view>暂无数据</view>
    </view>
  </BaseContainer>
</template>

<script>
import { getWrongBank } from "@/api/topic";
export default {
  data() {
    return {
      page: 1,
      limit: 15,
      is_master: "",
      loading: false,
      finished: false,
      questions: [],
    };
  },
  onLoad() {
    this.getQuestions();
  },
  onReachBottom() {
    this.getQuestions();
  },
  methods: {
    async getQuestions() {
      if (this.loading || this.finished) return;
      this.loading = true;

      uni.showLoading({ mask: true });

      try {
        const { data: questions } = await getWrongBank({
          page: this.page++,
          limit: this.limit,
          is_master: this.is_master,
        });
        uni.hideLoading();

        for (let 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;
          }
        }
        this.questions = this.questions.concat(questions);
        this.loading = false;
        this.finished = this.limit > questions.length;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
    },
    onTab(master) {
      if (this.loading) return;
      this.is_master = master;
      this.questions = [];
      this.page = 1;
      this.finished = false;
      this.getQuestions();
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
.wrong-list-page .nav {
  margin: 20rpx 30rpx 0;
  display: flex;
  border-radius: 12rpx;
  background-color: #ffffff;
}

.wrong-list-page .nav .nav-item {
  flex: 1;
  position: relative;
  height: 90rpx;
  font-size: 28rpx;
  line-height: 90rpx;
  text-align: center;
  color: #333;
}

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

.wrong-list-page .nav .nav-item.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70rpx;
  height: 4rpx;
  border-radius: 2rpx;
  background-color: #2c8eff;
  transform: translateX(-50%);
}

.wrong-list-page .list {
  padding: 20rpx 30rpx;
}

.wrong-list-page .list navigator {
  display: block;
  padding-right: 30rpx;
  padding-left: 30rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
}

.wrong-list-page .list navigator + navigator {
  margin-top: 30rpx;
}

.wrong-list-page .list .name {
  display: flex;
  align-items: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.wrong-list-page .list .name .title {
  flex: 1;
  margin-right: 18rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 30rpx;
  color: #2c8eff;
}

.wrong-list-page .list .name image {
  display: block;
  width: 28rpx;
  height: 28rpx;
}

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

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

.wrong-list-page .list .desc text {
  color: #999999;
}

.empty {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30rpx;
  text-align: center;
  color: #999999;
}

.empty image {
  width: 414rpx;
  pointer-events: none;
}
</style>