zhishifufei_uniapp/pages/topic/question_user.vue

<template>
  
  <BaseContainer>
    <NavBar title="考题测评" />
    <view class="user-question-page">
      <view class="nav">
        <view class="nav-item" :class="{ on: type === 1 }" @click="onNav(1)">练习</view>
        <view class="nav-item" :class="{ on: type === 2 }" @click="onNav(2)">考试</view>
      </view>
      <view class="content">
        <view v-if="type === 1" class="problem">
          <view class="item" v-for="item in questions">
            <view class="title">{{ item.title }}</view>
            <view class="group">
              <view>共{{ item.item_number }}题</view>
              <view :class="{ gray: !item.number }">
                {{ item.number ? "已完成" : "未完成" }}
              </view>
              <navigator
                v-if="item.number"
                :url="`/pages/topic/problem_index?id=${item.test_id}`"
                >再次答题</navigator
              >
              <navigator
                :url="`/pages/topic/problem_result?test_id=${item.test_id}`"
                v-if="item.number > 0"
                >答题结果</navigator
              >
              <navigator :url="`/pages/topic/problem_index?id=${item.test_id}`" v-else
                >开始答题</navigator
              >
            </view>
          </view>
        </view>
        <view v-else class="question">
          <view class="item" v-for="item in questions" :key="item.test_id">
            <view>
              <image :src="item.image" mode="aspectFit" />
            </view>
            <view>
              <view class="title">{{ item.title }}</view>
              <view class="group">
                <view :class="{ gray: !item.number }">
                  {{ item.number ? "已完成" : "未完成" }}
                </view>
                <navigator
                  v-if="item.number"
                  :url="`/pages/special/question_index?id=${item.test_id}`"
                  >再次答题</navigator
                >
                <navigator
                  :url="`/pages/topic/question_result?from=question_user&test_id=${item.test_id}&type=2`"
                  v-if="item.number > 0"
                  >答题结果</navigator
                >
                <navigator
                  :url="`/pages/special/question_index?id=${item.test_id}`"
                  v-else
                  >开始答题</navigator
                >
              </view>
            </view>
          </view>
        </view>
        <view v-if="page > 1 && !loading && !questions.length" class="empty">
          <image
            mode="widthFix"
            :src="getImgPath('/wap/first/zsff/images/empty-box.png')"
          />
          <view>暂无数据</view>
        </view>
      </view>
    </view>
  </BaseContainer>
</template>

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

      uni.showLoading({ mask: true });

      try {
        const { data } = await getTestPaper({
          page: this.page++,
          limit: this.limit,
          type: this.type,
        });

        uni.hideLoading();
        this.questions = this.questions.concat(data);
        this.finished = this.limit > data.length;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
      this.loading = false;
    },
    onNav(type) {
      this.type = type;
      this.questions = [];
      this.page = 1;
      this.finished = false;
      this.getQuestions();
    },
  },
};
</script>

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

<style scoped lang="scss">
.user-question-page {
  padding: 20rpx 30rpx;
}

.user-question-page .nav {
  display: -webkit-box;
  display: flex;
  border-radius: 12rpx;
  background-color: #ffffff;
}

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

.user-question-page .nav .nav-item.on {
  color: #2c8eff;
}

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

.user-question-page .content {
  margin-top: 20rpx;
}

.user-question-page .content .item + .item {
  margin-top: 20rpx;
}

.user-question-page .problem .item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 205rpx;
  padding: 30rpx 30rpx 20rpx;
  border-radius: 12rpx;
  box-sizing: border-box;
  background-color: #ffffff;
}

.user-question-page .problem .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 30rpx;
  color: #282828;
}

.user-question-page .problem .group {
  display: flex;
  align-items: center;
  font-size: 22rpx;
  color: #ff6b00;
}

.user-question-page .problem .group view:nth-child(2) {
  flex: 1;
  margin-left: 15rpx;
}

.user-question-page .problem .group .gray {
  color: #999999;
}

.user-question-page .problem .group navigator {
  height: 38rpx;
  padding-right: 16rpx;
  padding-left: 16rpx;
  border-radius: 19rpx;
  background-color: #2c8eff;
  font-size: 22rpx;
  line-height: 38rpx;
  color: #ffffff;
}

.user-question-page .question .item {
  display: flex;
  padding: 20rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
}

.user-question-page .question image {
  display: block;
  width: 250rpx;
  height: 140rpx;
  border-radius: 10rpx;
  object-fit: contain;
}

.user-question-page .question .item > view:last-child {
  -webkit-box-flex: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 24rpx;
}

.user-question-page .question .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 30rpx;
  color: #333;
}

.user-question-page .question .group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #ff6b00;
}

.user-question-page .question .gray {
  color: #999999;
}

.user-question-page .question .group navigator {
  height: 38rpx;
  padding-right: 16rpx;
  padding-left: 16rpx;
  border-radius: 19rpx;
  background-color: #2c8eff;
  font-size: 22rpx;
  line-height: 38rpx;
  color: #ffffff;
}

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

.empty image {
  width: 414rpx;
  vertical-align: middle;
  pointer-events: none;
}

.user-question-page .problem .group navigator ~ navigator {
  margin-left: 20rpx;
}
</style>