exam_mp/pages/learn/index.vue

<template>
  <Container
    title="学习本"
    bgColor="#f8f8f8"
    :scrollStyle="{
      padding: 0,
    }"
    :showBack="false"
    headerColor="#fff"
  >
    <div class="top">
      <div
        class="item col left"
        :class="currentIndex === 0 && 'select'"
        @click="currentIndex = 0"
      >
        <span>
          <span class="primary">{{ info.answer_total }}</span
          >/{{ info.topic_total }}
        </span>
        <span
          >正确率<span class="primary">{{ info.accuracy }}</span></span
        >
      </div>
      <div
        class="item"
        :class="currentIndex === 1 && 'select'"
        @click="currentIndex = 1"
      >
        考试记录(<span class="primary">{{ info.real_paper_total }}</span
        >)
      </div>
      <div
        class="item right"
        :class="currentIndex === 2 && 'select'"
        @click="currentIndex = 2"
      >
        题目收藏(<span class="primary">{{ info.favorite_total }}</span
        >)
      </div>
    </div>
    <div class="tab">
      <scroll-view class="scroll" scroll-x>
        <div class="box">
          <div
            v-for="(item, index) in info.chapter_infos"
            class="item"
            :class="{
              select: item.id === currentTab,
            }"
            :key="item.id"
            @click="
              () => {
                currentTab = item.id;
              }
            "
          >
            {{ item.name }}
          </div>
        </div>
      </scroll-view>
      <div class="select-line" v-if="currentIndex === 0">
        <div class="item" :class="{ select: isRight }" @click="isRight = 1">
          答案正确({{ rightTotal }})
        </div>
        <div class="item" :class="{ select: !isRight }" @click="isRight = 0">
          答案错误({{ errorTotal }})
        </div>
      </div>
    </div>
    <div class="context">
      <template v-if="currentIndex === 0 && dataList.length">
        <QuestionsItem :data="dataList" :isRight="isRight" :catalogue_id="currentTab" />
      </template>
      <template v-else-if="currentIndex === 1 && examList.length">
        <div class="card" v-for="item in examList" :key="item.catalogue_id">
          <div class="card-header">
            <span class="title">{{ item.year }}年真题</span>
            <span class="exam-count">已考试{{ item.exam_count }}次</span>
          </div>
          <div class="card-body">
            <span>最低分：{{ item.min_score }}分</span>
            <span>最高分：{{ item.max_score }}分</span>
          </div>
          <div class="footer">
            <div class="c-primary" @click="toHistory(item)">再考一次</div>
          </div>
        </div>
      </template>
      <template v-else-if="currentIndex === 2 && favoriteList.length">
        <QuestionsItem
          :data="favoriteList"
          isRight
          :onClick="toFavorite"
        />
      </template>
      <Empty v-else text="暂无数据"></Empty>
    </div>
  </Container>
</template>

<script setup>
import Container from "@/components/Container/Container.vue";
import Empty from "@/components/Empty/Empty.vue";
import { ref, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { request } from "../../utils/request";
import QuestionsItem from "../../components/Topic/QuestionsItem.vue";
import { router } from "../../utils/router";

const currentIndex = ref(0);
const currentTab = ref(0);
const isRight = ref(1);
const info = ref({});
const rightTotal = ref(0);
const errorTotal = ref(0);
const dataList = ref([]);
const examList = ref([]);
const favoriteList = ref([]);
const toHistory = (item) => {
  router.push({
    url: "/pages/real/history",
    params: {
      id: item.catalogue_id,
    },
  });
};

const requestTopic = (is_correct, onSucess) => {
  request(
    "api/question_bank/question_reception/study_book/get_answer_topic_record",
    {
      chapter_id: currentTab.value,
      is_correct,
    }
  ).then((res) => {
    if (onSucess) {
      onSucess(res.data.data);
      return;
    }
    if (is_correct) {
      rightTotal.value = res.data.total;
      dataList.value = res.data.data;
    } else {
      errorTotal.value = res.data.total;
    }
  });
};
const requestExamList = () => {
  request("api/question_bank/question_reception/real_topic/get_exam_record", {
    chapter_id: currentTab.value,
  }).then((res) => {
    examList.value = res.data;
  });
};
const requestFavo = () => {
  request(
    "api/question_bank/question_reception/favorite/get_user_favorite_list",
    {
      chapter_id: currentTab.value,
    }
  ).then((res) => {
    favoriteList.value = res.data.data;
  });
};
const toFavorite = () => {
  router.redirectTo({
    url: "/pages/learn/favorite",
    params: {
      chapter_id: currentTab.value,
      title: '收藏'
    },
  });
};
watch(currentIndex, () => {
  switch (currentIndex.value) {
    case 1:
      requestExamList();
      break;
    case 2:
      requestFavo();
      break;
    default:
      break;
  }
});

watch(currentTab, () => {
  switch (currentIndex.value) {
    case 0:
      isRight.value = 1;
      requestTopic(isRight.value);
      requestTopic(Number(!isRight.value));
      break;
    case 1:
      requestExamList();
      break;
    case 2:
      requestFavo();
      break;
    default:
      break;
  }
});
watch(isRight, () => {
  dataList.value = [];
  requestTopic(isRight.value, (data) => {
    dataList.value = data;
  });
});

onShow(() => {
  request(
    "api/question_bank/question_reception/study_book/get_study_record_title"
  ).then((res) => {
    info.value = res.data;
    currentTab.value = res.data.chapter_infos[0].id;
  });
});
// 示例数据
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.primary {
  color: $primary;
}
.top {
  margin: 24rpx 32rpx 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  .item {
    border: 1px solid $primary;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 113rpx;
    background-color: #fff;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
  }
  .item.col {
    flex-direction: column;
    gap: 12rpx;
  }
  .item.left {
    border-top-left-radius: 24rpx;
  }
  .item.right {
    border-top-right-radius: 24rpx;
  }
  .select {
    border-color: #fff;
  }
}

.tab {
  background-color: #fff;

  .select-line {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28rpx;
      border-bottom: 1px solid #fff;
      font-weight: 500;
      font-size: 32rpx;
    }
    .item.select {
      color: $primary;
      border-color: $primary;
    }
  }
}

.scroll {
  white-space: nowrap;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  .box {
    padding: 30rpx;
  }

  .item {
    display: inline-flex;
    padding: 8rpx 36rpx;
  }

  .item.select {
    border-radius: 200rpx;
    background-color: $primary;
    color: #fff;
  }
}

.context {
  padding: 20rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;

  .card {
    border-radius: 16rpx;
    padding: 16rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .question-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12rpx;
      color: #999;
      .question-type {
        font-weight: 500;
        font-size: 32rpx;
        color: #999999;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 1rpx solid #dddddd;
        padding: 0 10rpx;
      }
      .question-date {
        color: #999;
        font-size: 24rpx;
      }
    }
    .question-text {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }
    .options {
      margin-top: 8rpx;
      .option {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        gap: 14rpx;

        .option-select {
          width: 51rpx;
          height: 51rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1rpx solid #dddddd;
          border-radius: 50%;
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12rpx;
      .title {
        font-weight: bold;
        font-size: 28rpx;
        color: #333;
      }
      .exam-count {
        color: #999;
        font-size: 24rpx;
      }
    }

    .card-body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.c-primary {
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  border: 1rpx solid $primary;
  color: $primary;
  font-size: 24rpx;
}

.c-error {
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  border: 1rpx solid $error;
  color: $error;
  font-size: 24rpx;
}
</style>