JingTieXueTang.H5/src/views/home/exam/page-exam.vue

<template>
  <div class="page-exam-box">
    <div class="exam-list" v-if="examList.length > 0"  id="examBox" @scroll="scrollExamBox($event)">
      <div
        class="exam-item"
        v-for="(item, index) in examList"
        :key="index"
        @click="handleClickExamItemFun(item)"
      >
        <div class="exam-item-title-row">
          <div class="exam-item-name">{{ item.name }}</div>
          <div
            :class="{
              'exam-item-states': true,
              'exam-item-states-gray':
                item.examStatus === examStatesType.NOT_START,
              'exam-item-states-green':
                item.examStatus === examStatesType.STARTED,
              'exam-item-states-red':
                item.examStatus === examStatesType.EXAMOVER ||
                item.examStatus === examStatesType.NOTEXAM,
            }"
          >
            {{ item.examStatusTxt }}
          </div>
        </div>
        <div class="exam-item-describe">
          考试时间：{{ formateDateTimeFun(item.startTime) || item.startTime }}
        </div>
        <div class="exam-item-describe">
          考试时长：{{ item.examTimeMinsTxt }}
        </div>
        <div class="exam-item-describe">
          考试描述：<span>{{ item.description }}</span>
        </div>
      </div>
    </div>
    <div v-else class="exam-list exam-question-card">
      <div v-if="isInited" class="exam-question-card-nodata">暂无数据</div>
      <div v-else class="exam-question-card-nodata exam-question-card-loading">
        加载中...
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  name: "page-exam",
  components: {},
  data() {
    return {
      examStatesType: {
        NOT_START: 0, // 未开考
        STARTED: 1, // 已开考
        STARTEXAMING: 2, // 考试中
        EXAMOVER: 3, // 已考完
        NOTEXAM: 4 // 未参考
      },
      examList: [],
      isInited: false, // 是否已加载完毕
      examPage: 0,
      examSize: 10,
      canExamFlag: true // 加载考试标志
    };
  },
  computed: {
    ...mapState({
      exam: state => state.exam,
      chooseEngneeringWork: state => state.user.chooseEngneeringWork
    })
  },
  watch: {
    // 监听：工种
    chooseEngneeringWork(value) {
      console.log(value.value);
      if (value.value) {
        this.getExamListFun(); // 查询：考试的场次列表信息
      }
    }
  },
  created() {
    this.getExamListFun(); // 查询：考试的场次列表信息
  },
  mounted() {
  },
  destroyed () {
  },
  methods: {
    scrollExamBox(e) {
      if (this.canExamFlag && e.srcElement.scrollTop + e.srcElement.offsetHeight > e.srcElement.scrollHeight - 100) {
        this.canExamFlag = false;
        console.log("触底");
        this.examPage = this.examPage + 1;
        this.getExamListFun();
      }
    },
    // 查询：考试场次的列表信息
    getExamListFun() {
      this.isInited = false;
      this.$store.commit("toggleLoading", true);
      let params = {
        // engineertypeid: this.chooseEngneeringWork.id,
        page: this.examPage,
        size: this.examSize
      };
      this.$_http
        .get(this.$_API.GET_JTXT_GET_EXAMS, { params })
        .then(res => {
        //   console.log("--exams--" + JSON.stringify(res));
          if (res.data) {
            res.data.content.forEach(item => {
              let formateTimeDiff = this.formateTimeDiffFun(item.duration);
              item.examTimeMins = formateTimeDiff.examTimeMins;
              item.examTimeMinsTxt = formateTimeDiff.examTimeMinsTxt;
              let obj = this.formateExamStatesFun(item);
              item.examStatus = obj.status;
              item.examStatusTxt = obj.statusTxt;
            });
            // 分页到底了
            if (res.data.last) {
              this.canExamFlag = false;
            } else {
              this.canExamFlag = true;
            }
            this.$nextTick(() => {
              this.examList = [...this.examList, ...res.data.content];
            });
            this.isInited = true;
          }
          this.$store.commit("toggleLoading", false);
        })
        .catch(() => {
          this.canExamFlag = false;
          Toast("系统异常");
          this.$store.commit("toggleLoading", false);
        });
    },

    formateTimeDiffFun(secondes) {
      let hours = Math.floor(secondes / (1000 * 60 * 60));
      let minutes = Math.floor(
        (secondes - hours * 60 * 60 * 1000) / (1000 * 60)
      );
      let seconds = Math.floor(
        (secondes - hours * 60 * 60 * 1000 - minutes * 60 * 1000) / 1000
      );
      let timeDiff = zero(hours) + ":" + zero(minutes) + ":" + zero(seconds);
      let timeDiffTxt =
        zero(hours) + "小时" + zero(minutes) + "分钟" + zero(seconds) + "秒";
      // 数字补零
      function zero(num) {
        return num < 10 ? "0" + num : num;
      }
      return {
        examTimeMins: timeDiff,
        examTimeMinsTxt: timeDiffTxt
      };
    },
    // 过滤考试状态
    formateExamStatesFun(exam) {
      let startTime = exam.startTime;
      let endTime = exam.deadline;
      let curTime = Date.now();
      let startTimesCeconds = new Date(startTime).getTime();
      let endTimeCeconds = new Date(endTime).getTime();

      if (curTime >= startTimesCeconds) {
        if (curTime >= endTimeCeconds) {
          if (this.exam.examHistoryObj && this.exam.examHistoryObj[exam.id]) {
            return {
              status: this.examStatesType.EXAMOVER,
              statusTxt: "已考完"
            };
          } else {
            return {
              status: this.examStatesType.NOTEXAM,
              statusTxt: "未参考"
            };
          }
        } else {
          return {
            status: this.examStatesType.STARTED,
            statusTxt: "已开考"
          };
        }
      } else {
        return {
          status: this.examStatesType.NOT_START,
          statusTxt: "未开考"
        };
      }
    },
    // 操作：点击了某个考试
    handleClickExamItemFun(item) {
      let isCouldExam = false;
      switch (item.examStatus) {
        case this.examStatesType.NOT_START:
          Toast("考试未开考");
          break;
        case this.examStatesType.EXAMOVER:
          Toast("已考完");
          break;
        case this.examStatesType.STARTED:
          isCouldExam = true;
          break;
        case this.examStatesType.STARTEXAMING:
        case this.examStatesType.NOTEXAM:
          Toast("考试已结束");
          break;
        default:
          break;
      }
      if (!isCouldExam) {
        return;
      }
      this.$store.commit("updateExamItemStore", {
        field: "examItem",
        value: item
      });
      this.$router.push({ name: "ExamDetail" });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin";
.page-exam-box {
  width: 100%;
  height: 100%;
//   overflow-y: auto;
//   overflow-x: hidden;
  font-size: 0.6rem;
  .exam-list {
    height: 100vh;
    overflow-y: scroll;
    padding: 0.5rem 0.5rem;
    .exam-item {
      width: 100%;
      padding: 0 0.5rem 0.5rem;
      margin-bottom: 0.7rem;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      .exam-item-title-row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e4e8eb;
        .exam-item-name {
          padding: 0.5rem 0 0.25rem;
          font-size: 0.65rem;
          font-weight: bold;
          color: #000;
          word-break: break-all;
          word-wrap: break-word;
        }
        .exam-item-states {
          font-size: 0.6rem;
          border-radius: 0.2rem;
          margin-left: 1rem;
          flex-wrap: nowrap;
          white-space: nowrap;
        }
      }
      .exam-item-states-yellow {
        color: #e6a23c;
      }
      .exam-item-states-green {
        color: #67c23a;
      }
      .exam-item-states-red {
        color: #f56c6c;
      }
      .exam-item-states-gray {
        color: #909399;
      }
      .exam-item-describe {
        margin-top: 0.5rem;
        span {
          letter-spacing: 0.2rem;
        }
      }
    }
  }
  .exam-question-card-loading,
  .exam-question-card-nodata {
    width: 100%;
    height: 5rem;
    color: #333;
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>