zhishifufei_uniapp/pages/topic/question_sheet.vue

<template>
  
  <BaseContainer>
    <NavBar title="答题卡" />
    <view class="answer-sheet-page">
      <view class="header">
        <navigator
          open-type="redirect"
          :url="`/pages/topic/question_detail?test_id=${test_id}&e_id=${record_id}&is_analysis=${is_analysis}&index=${index}&txamination_time=${txamination_time}&exam_time=${duration}`"
          >{{ is_analysis ? "返回试题" : "返回答题" }}</navigator
        >
        <navigator v-if="!is_analysis" class="time">{{
          duration | formatTime
        }}</navigator>
      </view>
      <view class="main">
        <view class="main-hd">
          <view>答题情况</view>
          <view class="list">
            <view class="item">已答</view>
            <view class="item">未答</view>
          </view>
        </view>
        <view v-if="questions.length" class="main-bd">
          <navigator
            open-type="redirect"
            v-for="(item, index) in questions"
            :class="{ blue: item.is_correct }"
            :url="`/pages/topic/question_detail?test_id=${test_id}&e_id=${record_id}&is_analysis=${is_analysis}&index=${index}&txamination_time=${txamination_time}&exam_time=${duration}`"
            >{{ index + 1 }}</navigator
          >
        </view>
      </view>
      <view class="footer">
        <view class="btn" @click="submit">提交考试</view>
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { getAnswerSheet, submitTestPaper } from "@/api/topic";

export default {
  filters: {
    formatTime(time) {
      let hour = Math.floor(time / 3600000);
      let minute = Math.floor((time - hour * 3600000) / 60000);
      let second = Math.floor((time - hour * 3600000 - minute * 60000) / 1000);

      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }

      return hour + ":" + minute + ":" + second;
    },
  },
  data() {
    return {
      startTime: new Date(),
      duration: 0,
      test_id: "",
      record_id: "",
      index: 0,
      questions: [],
      loading: false,
      is_analysis: 0,
      txamination_time: 0,
    };
  },
  onLoad({ test_id, record_id, is_analysis, index, txamination_time }) {
    const exam_time = this.$util.getStorage(`exam_time${test_id}`);
    if (exam_time) {
      this.exam_time = parseInt(exam_time);
    }
    this.test_id = test_id;
    this.record_id = record_id;
    this.is_analysis = parseInt(is_analysis);
    if (index) {
      this.index = parseInt(index);
    }
    if (is_analysis && parseInt(is_analysis)) {
    } else {
      this.setTimer();
      this.txamination_time = parseInt(txamination_time);
    }
    this.getSheet();
  },
  onHide(){
    // 清除定时器
    clearTimeout(this.timer);
  },
  onUnload(){
    // 清除定时器
    clearTimeout(this.timer);
  },
  methods: {
    getSheet() {
      getAnswerSheet({
        test_id: this.test_id,
        type: 2,
        record_id: this.record_id,
      })
        .then(({ data: questions }) => {
          for (let i = questions.length; i--; ) {
            if (!Array.isArray(questions[i].userAnswer)) {
              Object.assign(questions[i], questions[i].userAnswer);
            }
          }

          this.questions = questions;
        })
        .catch((err) => {
          uni.redirectTo({
            url: "/pages/topic/question_user",
          });
        });
    },
    setTimer() {
      this.timer = setInterval(() => {
        this.duration = new Date() - this.startTime + this.exam_time;
        this.$util.setStorage(`exam_time${this.test_id}`, this.duration);
        if (this.duration >= this.txamination_time * 60000) {
          clearInterval(timer);
          this.$util.pushMsg("考试时间已到");
          this.submit();
        }
      }, 1000);
    },
    async submit() {
      uni.showLoading({ mask: true });

      try {
        const { data, code, msg } = await submitTestPaper({
          examination_id: this.record_id,
          type: 2,
          duration: this.duration,
        });
        uni.hideLoading();

        if (200 === code) {
          this.$util.removeStorage("e_id");
          this.$util.removeStorage("exam_time");
          this.is_analysis = 1;
          uni.redirectTo({
            url: "/pages/topic/question_result?test_id=" + this.test_id,
          });
        } else {
          this.$util.showMsg(msg);
        }
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
  },
};
</script>

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

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