JingTieXueTang.H5/src/views/home/person/exam-history.vue

<template>
  <div class="exam-history-box">
    <van-nav-bar title="考试" left-arrow @click-left="onClickLeft" />
    <div class="exam-history-div">
      <div class="exam-history-grades-div">
        <div class="exam-history-name-description">考试积分</div>
        <div class="exam-history-grades">
          {{ userExamPonits }}
        </div>
        <div class="exam-history-description" @click="clickExamRule">
          积分说明
        </div>
        <div class="exam-history-class-box">
          <div class="exam-history-class-item">
            专项考试积分：{{ specialExamPoints }}
          </div>
          <div class="exam-history-class-item">
            普通考试积分：{{ generalExamPoints }}
          </div>
        </div>
      </div>

      <div class="exam-history-list">
        <div
          v-for="(item, index) in examHistoryList"
          :key="index"
          class="exam-history-item"
        >
          <div class="exam-history-item-left">
            <div class="exam-history-item-left-title">{{ item.examName }}</div>
            <div class="exam-history-item-left-percentage">
              <div class="exam-history-item-left-schedule">
                <van-progress
                  :percentage="
                    formatePercentageFun(item.points, examFullPoints)
                  "
                  :show-pivot="false"
                />
              </div>
              <div class="exam-history-item-left-schedule-text">
                {{ item.points || 0 }} 分 / 满分 {{ examFullPoints }} 分
              </div>
            </div>
          </div>
          <div class="exam-history-item-right">
            <div class="exam-history-item-btn">{{ item.points }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "exam-history",
  components: {},
  data() {
    return {
      loading: false,
      userExamPonits: 0,
      generalExamPoints: 0,
      specialExamPoints: 0,
      examFullPoints: 100,
      userManualType: {
        ONE: 1,
        TWO: 2,
        THREE: 3
      }, // 类型
      examHistoryList: []
    };
  },
  mounted() {
    this.getExamHistory();
    this.getExamPoints();
  },
  created() { this.setLanXinNavigator(); },
  activated() {
    this.setLanXinNavigator();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    // 设置蓝信navigator
    setLanXinNavigator() {
      lx.ui.setNavigationBarTitle({
        title: "考试积分"
      });
    },
    //   查询总积分
    getExamPoints() {
      let path = {
        userName: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$pathParams(this.$_API.JTXT_GET_USER_EXAM_POINTS, path))
        .then(res => {
          if (res.data.GENERAL_EXAM) {
            this.generalExamPoints = res.data.GENERAL_EXAM;
          }
          if (res.data.SPECIAL_EXAM) {
            this.specialExamPoints = res.data.SPECIAL_EXAM;
          }
          this.userExamPonits = this.generalExamPoints + this.specialExamPoints;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 格式化已获得的积分/总积分的数
    formatePercentageFun(getPoints, totaPonits) {
      if (
        (!getPoints && getPoints !== 0) ||
        (!totaPonits && totaPonits !== 0)
      ) {
        return 0;
      }
      if (isNaN(getPoints) || isNaN(totaPonits)) {
        return 0;
      }
      return Math.round((getPoints / totaPonits) * 100);
    },
    // 操作：返回
    onClickLeft() {
      this.$router.back();
    },
    // 查询：考试记录
    getExamHistory() {
      this.$store.commit("toggleLoading", true);
      let params = {
        user: this.user.userInfo.userName
      };
      this.$_http
        .get(this.$_API.JTXT_GET_USER_EXAMS_HISTORY, { params })
        .then(res => {
          res.data.content.forEach((item, index) => {
            this.getExamDetailFun(item, index, index + 1 === res.data.length);
          });
          this.finished = true;
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 查询：某个考试的详情
    getExamDetailFun(item, index, isLast) {
      this.$_http
        .get(
          this.$pathParams(this.$_API.GET_JTXT_GET_EXAMS_ONE_DETAIL, {
            examId: item.examId
          })
        )
        .then(res => {
          console.log(item, res);
          this.examHistoryList.push({ ...item, examName: res.data.name });
          if (isLast) {
            this.$store.commit("toggleLoading", false);
          }
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    clickExamRule() {
      this.$router.push({ name: "examPointRule" });
    }
  }
};
</script>

<style lang="scss" scoped>
.exam-history-box {
  width: 100%;
  height: 100vh;
  font-size: 0.6rem;
  background-color: #fff;
  .exam-history-div {
    width: 100%;
    overflow-y: auto;
    padding: 0 1rem;
    .exam-history-grades-div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 1rem;
      .exam-history-grades {
        font-size: 1rem;
        color: #0088e9;
        margin-top: 0.5rem;
      }
      .exam-history-name-description {
        padding: 0.15rem 0.5rem;
        // border: 1px solid #7cc8ff;
        // border-radius: 0.25rem;
        color: #0088e9;
        font-size: 0.75rem;
      }
      .exam-history-description {
        margin-top: 0.5rem;
        padding: 0.15rem 0.5rem;
        border: 1px solid #7cc8ff;
        border-radius: 0.25rem;
        color: #7cc8ff;
      }
      .exam-history-class-box {
        margin-top: 0.5rem;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .exam-history-class-item {
        color: #0088e9;
        font-size: 0.65rem;
      }
    }
    .exam-history-list {
      padding: 0.5rem 0;
      .exam-history-item {
        padding: 0.5rem 0;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .exam-history-item-left {
          margin-right: 0.25rem;
          .exam-history-item-left-title {
            font-weight: bold;
            word-break: break-all;
            word-wrap: break-word;
            font-size: 0.5rem;
          }
          .exam-history-item-left-percentage {
            display: flex;
            align-items: center;
            margin-top: 0.5rem;
            .exam-history-item-left-schedule {
              width: 100px;
            }
            .exam-history-item-left-schedule-text {
              color: #999;
              font-size: 0.55rem;
              margin-left: 0.5rem;
            }
          }
        }
        .exam-history-item-right {
          .exam-history-item-btn {
            border-radius: 0.1rem;
            color: #0088e9;
            background-color: #d8e9f5;
            padding: 0.1rem 0.25rem;
          }
        }
      }
    }
  }
}
</style>