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-grades">
          {{ this.user.userInfo.examPoints }}
        </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, 10)"
                  :show-pivot="false"
                />
              </div>
              <div class="exam-history-item-left-schedule-text">
                {{ item.earnedpoints }}分 / 满分10分
              </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,
      userManualType: {
        ONE: 1,
        TWO: 2,
        THREE: 3
      }, // 类型
      examHistoryList: [],
      eventList: [
        {
          name: "进入应用",
          rule: "2分/每次进入应用",
          isFinish: false,
          getPoints: 2,
          totaPonits: 6,
          type: 1
        },
        {
          name: "观看视频",
          rule: "2分/每有效观看一个视频",
          isFinish: false,
          getPoints: 0,
          totaPonits: 6,
          type: 1
        },
        {
          name: "发表观点",
          rule: "2分/每发表一个有效观点",
          isFinish: false,
          getPoints: 0,
          totaPonits: 6,
          type: 1
        },
        {
          name: "阅读文章",
          rule: "2分/每有效阅读一篇文章",
          isFinish: false,
          getPoints: 0,
          totaPonits: 6,
          type: 1
        },
        {
          name: "文章学习时长",
          rule: "2分/有效阅读文章累计1分钟",
          isFinish: false,
          getPoints: 0,
          totaPonits: 6,
          type: 2
        },
        {
          name: "基础训练",
          rule: "2分/每训练一次",
          isFinish: false,
          getPoints: 0,
          totaPonits: 6,
          type: 3
        }
      ],
      userTotalPonits: 165, // 用户的总积分
      todayEarnPoints: 6 // 今日已累计的积分
    };
  },
  mounted() {
    this.getExamHistory();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    // 格式化已获得的积分/总积分的数
    formatePercentageFun(getPoints, totaPonits) {
      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.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 => {
          this.examHistoryList.push({ ...item, examName: res.data.name });
          if (isLast) {
            this.$store.commit("toggleLoading", false);
          }
        })
        .catch(() => {
          this.$store.commit("toggleLoading", false);
        });
    },
    // 操作：点击了去看看、去学习、去训练
    toManualEarnFun(item) {
      console.log(item);
      switch (item.type) {
        case this.userManualType.ONE:
          //  TODO..
          break;
        case this.userManualType.TWO:
          //  TODO..
          break;
        case this.userManualType.THREE:
          //  TODO..
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.exam-history-box {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.6rem;
  background-color: #fff;
  .exam-history-div {
    padding: 0 0.5rem;
    .exam-history-grades-div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .exam-history-grades {
        margin-top: 1rem;
        font-size: 1rem;
        color: #0088e9;
      }
    }
    .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 {
          .exam-history-item-left-title {
            font-weight: bold;
          }
          .exam-history-item-left-percentage {
            display: flex;
            align-items: center;
            .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>