nbjk-xcx/src/otherPages/threeExam/index.vue

<template>
  <view class="threeExam">
    <view class="topad">
      <ad
        class="wxad"
        :ad-intervals="100"
        unit-id="adunit-f9ac1a546be5b3f0"
      ></ad>
    </view>
    <view class="problem">
      <!-- <text class="problem-type"> 判断题 </text> -->
      <!-- <text class="problem-issue"
        >{{ problemListIndex + 1 }}、{{
          problemList[problemListIndex].question
        }}</text
      > -->
      <rich-text
        style="font-size: 42rpx; vertical-align: top"
        :nodes="
          createProblemTypeHtml(problemList[problemListIndex].type) +
          (problemListIndex + 1) +
          '、' +
          problemList[problemListIndex].question
        "
      ></rich-text>
      <view class="problem-radio">
        <van-radio-group
          v-if="!problemList[problemListIndex].isComplete"
          @change="changeUserAnswer"
          :value="problemList[problemListIndex].userAnswer"
        >
          <view :key="index" v-for="(item, index) in anLength">
            <van-radio
              v-if="problemList[problemListIndex]['an' + (index + 1)]"
              label-class="pl0"
              custom-class="mt40"
              use-icon-slot
              :name="index + 1"
            >
              <view class="problem-radio-flex">
                <view class="problem-radio-icon">
                  <view class="problem-radio-letter">{{
                    numberToLetter(index)
                  }}</view>
                </view>
                <text
                  style="
                    font-size: 42rpx;
                    font-weight: bold;
                    margin-left: 20rpx;
                  "
                  >{{ problemList[problemListIndex]["an" + (index + 1)] }}</text
                >
              </view>
            </van-radio>
          </view>

          <!-- <van-radio
            v-if="problemList[problemListIndex].an2"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an2"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(1)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an2 }}</text
              >
            </view>
          </van-radio>
          <van-radio
            v-if="problemList[problemListIndex].an3"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an3"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(2)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an3 }}</text
              >
            </view>
          </van-radio>
          <van-radio
            v-if="problemList[problemListIndex].an4"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an4"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(3)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an4 }}</text
              >
            </view>
          </van-radio>
          <van-radio
            v-if="problemList[problemListIndex].an5"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an5"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(4)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an5 }}</text
              >
            </view>
          </van-radio>
          <van-radio
            v-if="problemList[problemListIndex].an6"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an6"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(5)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an6 }}</text
              >
            </view>
          </van-radio>
          <van-radio
            v-if="problemList[problemListIndex].an7"
            label-class="pl0"
            custom-class="mt40"
            use-icon-slot
            :name="problemList[problemListIndex].an7"
          >
            <view class="problem-radio-flex">
              <view class="problem-radio-icon">
                <view class="problem-radio-letter">{{
                  numberToLetter(6)
                }}</view>
              </view>
              <text
                style="font-size: 42rpx; font-weight: bold; margin-left: 20rpx"
                >{{ problemList[problemListIndex].an7 }}</text
              >
            </view>
          </van-radio> -->
        </van-radio-group>
        <van-radio-group
          v-if="problemList[problemListIndex].isComplete"
          :value="problemList[problemListIndex].userAnswer"
        >
          <view :key="index" v-for="(item, index) in anLength">
            <van-radio
              v-if="problemList[problemListIndex]['an' + (index + 1)]"
              label-class="pl0"
              custom-class="mt40"
              use-icon-slot
              :name="index + 1"
            >
              <view class="problem-radio-flex">
                <view class="problem-radio-icon">
                  <icon
                    type="clear"
                    v-if="
                      index + 1 ==
                        problemList[problemListIndex].userAnswerIndex &&
                      problemList[problemListIndex].userAnswerIndex !=
                        problemList[problemListIndex].answertrue
                    "
                    class="problem-radio-letter"
                    color="red"
                    size="60rpx"
                  ></icon>
                  <icon
                    type="success"
                    v-else-if="
                      index + 1 ==
                        problemList[problemListIndex].userAnswerIndex &&
                      problemList[problemListIndex].userAnswerIndex ==
                        problemList[problemListIndex].answertrue
                    "
                    class="problem-radio-letter"
                    color="#33CDA4"
                    size="60rpx"
                  ></icon>
                  <view v-else class="problem-radio-letter">{{
                    numberToLetter(index)
                  }}</view>
                </view>
                <text
                  style="
                    font-size: 42rpx;
                    font-weight: bold;
                    margin-left: 20rpx;
                  "
                  >{{ problemList[problemListIndex]["an" + (index + 1)] }}</text
                >
              </view>
            </van-radio>
          </view>
        </van-radio-group>
      </view>
      <view class="problem-media">
        <image
          mode="widthFix"
          v-if="getFileType(problemList[problemListIndex].mediaUrl) == 'image'"
          :src="problemList[problemListIndex].mediaUrl"
        ></image>
        <video
          :controls="false"
          autoplay
          loop
          v-if="getFileType(problemList[problemListIndex].mediaUrl) == 'video'"
          :src="problemList[problemListIndex].mediaUrl"
        ></video>
      </view>
    </view>
    <view class="bottom">
      <view class="switch">
        <view @click="prePage" class="pre"> 上一题</view>
        <view @click="nextPage" class="next"> 下一题</view>
      </view>
      <view class="submit">
        <view>
          <view
            v-if="query.showSubmit == '1'"
            @click="
              () => {
                submitExamVisible = true;
              }
            "
            class="submit-button"
            ><text>交卷</text
            ><countDown
              @change="getThreeExamTime"
              @end="submitExam"
              background=""
              :time="examTime"
            ></countDown>
          </view>
        </view>

        <view class="count">
          <view class="col">
            <icon type="success" size="26rpx" color="#33CDA4"></icon>
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx">{{
              trueNum
            }}</text>
          </view>
          <view class="col">
            <icon type="clear" size="26rpx" color="#FF4D53"></icon>
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx">{{
              falseNum
            }}</text>
          </view>
          <view class="col">
            <van-icon name="description" />
            <text style="font-size: 24rpx; color: #8a9099; margin-left: 8rpx"
              >{{ problemListIndex + 1 }}/{{ problemList.length }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <van-popup :zIndex="1005" round :show="submitExamVisible">
      <view class="tip1">
        <view class="title"> 确认交卷 </view>
        <view class="score">
          <view class="score-list">
            <view class="score-dont">
              {{ problemList.length - trueNum - falseNum }}</view
            >
            <view style="font-size: 28rpx; color: #8a9099">未答题数</view>
          </view>
          <view class="score-list"
            ><view class="score-rest" style="margin: 0 auto">
              {{ restTime }}</view
            >
            <view style="font-size: 28rpx; color: #8a9099">剩余时间</view></view
          >
          <view class="score-list"
            ><view class="score-exam"> {{ score }}</view>
            <view style="font-size: 28rpx; color: #8a9099">考试得分</view></view
          >
        </view>
        <view class="bottom">
          <view
            @click="
              () => {
                submitExamVisible = false;
              }
            "
            class="left"
            >继续答题</view
          >
          <view
            @click="
              () => {
                resultExamVisible = true;
                submitExamVisible = false;
              }
            "
            class="right"
            >现在交卷</view
          >
        </view>
      </view>
    </van-popup>
    <van-popup :zIndex="1006" round :show="resultExamVisible">
      <view class="tip2">
        <view style="position: relative">
          <image
            mode="widthFix"
            style="width: 628rpx"
            src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/bg_dialog.png"
          ></image>
          <image
            mode="widthFix"
            v-if="score < 90"
            class="tip2-cry"
            style="width: 187rpx"
            src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/cry.png"
          ></image>
          <image
            mode="widthFix"
            v-if="score >= 90"
            class="tip2-cry"
            style="width: 187rpx"
            src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/laugh.png"
          ></image>
          <view class="tip2-text">
            <view>恭喜您</view>
            <view
              >您的成绩<text style="color: #01c18d" v-if="score >= 90"
                >合格</text
              ><text style="color: #ff4d53" v-if="score < 90"
                >不合格</text
              ></view
            >
            <view class="tip2-text-line3"
              >当前已答错<text style="color: #ff4d53; padding: 0 8rpx">{{
                falseNum
              }}</text>
              题</view
            >
            <view class="tip2-bottom">
              <!-- <view class="tip2-bottom-1">试试答题技巧，提分更快</view> -->
              <view
                @click="goPath('/otherPages/threeExamScore/index?score='+score)"
                class="tip2-bottom-2"
                >现在交卷</view
              >
              <view
                @click="
                  () => {
                    resultExamVisible = false;
                    submitExamVisible = false;
                  }
                "
                class="tip2-bottom-3"
                >继续答题</view
              >
            </view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
import api from "@/api";
import utils from "@/utils";
import countDown from "@/components/countDown/index";
export default {
  data() {
    return {
      query: {
        showSubmit: true,
      },
      anLength: 7,
      problemList: [
        {
          an1: "红色",
          an2: "黄色",
          an3: "紫色",
          an4: "绿色",
          an5: "",
          an6: "",
          an7: "",
          answertrue: "1",
          bestExplainNew: "图中信号灯亮的是红灯。",
          bestanswerid: "1351372021270892544",
          chapterid: 0,
          cityid: 0,
          diffDegree: 3,
          errorRate: 0,
          explain: "图中信号灯亮的是红灯。",
          gs: "test",
          id: 26852,
          intnumber: "",
          jieshiFrom: "",
          kemu: 1,
          keyword: "",
          licensetype: "",
          mediaUrl:
            "https://t1-1305573081.file.myqcloud.com/yd/app/media/26852-1606813820528.webp",
          moretypes: "",
          question: "下图中指示灯的颜色是什么？",
          questionSource: 3,
          showOptionType: 0,
          sinaimg: "26852-1606813820528.webp",
          strtppe: "87",
          strtypeL: "8701",
          type: 2,
          videoUrl: "",
        },
        {
          id: 26855,
          type: 2,
          intnumber: "",
          strtppe: "87",
          strtypeL: "8701",
          licensetype: "",
          question: "100-6-6-6＝？",
          an1: "82",
          an2: "60",
          an3: "76",
          an4: "48",
          an5: "",
          an6: "",
          an7: "",
          answertrue: "1",
          explain: "100-6-6-6＝82",
          bestanswerid: "1333679685615247360",
          kemu: 1,
          jieshiFrom: "",
          moretypes: "",
          chapterid: 0,
          sinaimg: "",
          videoUrl: "",
          diffDegree: 1,
          cityid: 0,
          gs: "test",
          keyword: "",
          errorRate: 0,
          mediaUrl: "",
          showOptionType: 0,
          questionSource: 3,
          bestExplainNew: "100-6-6-6＝82",
        },
      ],
      trueNum: 0,
      falseNum: 0,
      problemListIndex: 0,
      submitExamVisible: false,
      resultExamVisible: false,
      examTime: 1000 * 60 * 20,
      restTime: "",
      useTime: "",
    };
  },
  computed: {
    score() {
      return this.trueNum * 5;
    },
  },
  onLoad(query) {
    this.query = query;
    if (this.query.showSubmit == "1") {
      api.exam.studentThreeForceSelectTestQuestionInfoList().then((res) => {
        if (Array.isArray(res.rows) && res.rows.length > 0) {
          res.rows.forEach((element) => {
            element.userAnswerIndex = -1;
            element.isComplete = false;
          });
          this.problemList = res.rows;
        } else {
          Toast({
            type: "fail",
            message: "加载失败",
          });
        }
      });
    } else if (this.query.showSubmit == "0") {
      api.exam.studentThreeForceList().then((res) => {
        if (Array.isArray(res.rows) && res.rows.length > 0) {
          res.rows.forEach((element) => {
            element.userAnswerIndex = -1;
            element.isComplete = false;
          });
          this.problemList = res.rows;
        } else {
          Toast({
            type: "fail",
            message: "加载失败",
          });
        }
      });
    }
  },
  methods: {
    goPath(url) {
      console.log(url);

      uni.navigateTo({
        url,
      });
    },
    getThreeExamTime(a, b) {
      this.restTime = a;
      this.useTime = b;
    },
    submitExam(e) {
      let that = this;
      console.log(e);
      uni.showModal({
        title: "是否交卷",
        success(res) {
          if (res.confirm) {
            uni.navigateTo({
              url: "/otherPages/threeExamScore/index?score=" + that.score,
            });
          }
        },
      });
    },
    getFileType(src) {
      let suffix = src.substring(src.lastIndexOf(".") + 1);
      let type = "";
      switch (suffix) {
        case "mp4":
        case "WebM":
        case "Ogg":
          type = "video";
          break;
        case "png":
        case "jpg":
        case "webp":
          type = "image";
          break;
        case "pdf":
          type = "pdf";
          break;
        default:
          type = "other";
      }
      return type;
    },
    changeUserAnswer(e) {
      console.log(e);
      this.problemList[this.problemListIndex].userAnswerIndex = e.detail;
      this.problemList[this.problemListIndex].userAnswer =
        this.problemList[this.problemListIndex]["an" + e.detail];

      this.problemList[this.problemListIndex].isComplete = true;
      this.problemList[this.problemListIndex].userAnswerIndex ==
      this.problemList[this.problemListIndex].answertrue
        ? this.trueNum++
        : this.falseNum++;
    },
    prePage(e) {
      if (this.problemListIndex <= 0) {
        uni.showToast({
          icon: "none",
          title: "到底了",
        });
      } else {
        this.problemListIndex = this.problemListIndex - 1;
      }
    },
    nextPage(e) {
      if (this.problemListIndex >= this.problemList.length - 1) {
        uni.showToast({
          icon: "none",
          title: "到底了",
        });
      } else {
        this.problemListIndex = this.problemListIndex + 1;
      }
    },
    numberToLetter(index) {
      index = Number(index);
      return String.fromCharCode(index + 65);
    },
    createProblemTypeHtml(index) {
      if (index == 1) {
        return '<span style="font-size: 11px;color: #fff;background: #2878ff;padding: 3px 10px;border-radius: 4px;margin-right: 5px;vertical-align: middle;">判断题</span>';
      } else {
        return '<span style="font-size: 11px;color: #fff;background: #2878ff;padding: 3px 10px;border-radius: 4px;margin-right: 5px;vertical-align: middle;">选择题</span>';
      }
    },
  },
  components: {
    countDown,
  },
};
</script>

<style lang="scss" scoped>
.topad {
  padding: 0 30rpx;
}
.threeExam {
  background: #fff;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.wxad {
  border: none;
}
.problem {
  padding: 0 30rpx;
  height: 500rpx;
  flex-grow: 1;
  overflow-y: scroll;

  .problem-type {
    font-size: 22rpx;
    color: #fff;
    background: #2878ff;
    width: 94rpx;
    height: 40rpx;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    margin-right: 10rpx;
    vertical-align: middle;
  }
  .problem-issue {
    font-size: 42rpx;
    vertical-align: middle;
    font-weight: bold;
    color: #0a1a33;
  }
  .problem-radio {
    .problem-radio-flex {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      align-items: center;
    }
    .problem-radio-icon {
      width: 70rpx;
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .problem-radio-letter {
        width: 60rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 42rpx;
        color: #333;

        box-shadow: 0px 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.26);
        text-align: center;
        border-radius: 50%;
      }
    }
  }
  .problem-media {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 15rpx;
    > image {
      width: 100%;
    }
  }
}
.bottom {
  // position: absolute;
  // bottom: 0;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .switch {
    bottom: 48rpx;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .pre {
      width: 156rpx;
      height: 76rpx;
      line-height: 76rpx;
      background: #ffffff;
      color: #8a9099;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      text-align: center;
    }
    .next {
      width: 156rpx;
      height: 76rpx;
      line-height: 76rpx;
      color: #8a9099;
      background: #ffffff;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      text-align: center;
    }
  }
  .submit {
    margin-top: 50rpx;
    width: 100%;
    height: 98rpx;
    box-shadow: 2rpx -2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 30rpx;
    .submit-button {
      width: 180rpx;
      line-height: 68rpx;
      background: #498ef5;
      border-radius: 34rpx 34rpx 34rpx 34rpx;
      opacity: 1;
      color: #fff;
      text-align: center;
      display: flex;
      font-size: 24rpx;
      padding: 0 16rpx;
      justify-content: space-evenly;
    }
  }
  .count {
    width: 390rpx;
    display: flex;
    justify-content: space-between;
    .col {
      display: flex;
    }
  }
}
.tip1 {
  width: 580rpx;
  height: 402rpx;
  padding: 0 30rpx;
  .title {
    color: #0a1a33;
    width: 100%;
    font-size: 42rpx;
    font-weight: bold;
    margin-top: 48rpx;
    text-align: center;
  }
  .score {
    display: flex;
    justify-content: space-between;
    font-size: 0;
    width: 100%;
    .score-list {
      text-align: center;
      color: #ff4d53;
      font-size: 28rpx;
      display: inline-block;
      margin-top: 64rpx;
    }
    .score-dont {
      font-size: 42rpx;

      text-align: center;
    }
    .score-rest {
      text-align: center;
      font-size: 42rpx;
      color: #0a1a33;
    }
    .score-exam {
      text-align: center;
      font-size: 42rpx;
      color: #0a1a33;
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 48rpx;
    .left {
      width: 250rpx;
      line-height: 80rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      text-align: center;

      font-size: 30rpx;
    }
    .right {
      width: 250rpx;
      line-height: 80rpx;
      background: #498ef5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      color: #fff;
      text-align: center;
      font-size: 30rpx;
    }
  }
}
.tip2 {
  .tip2-cry {
    position: absolute;
    z-index: 1002;
    left: 50%;
    top: 48rpx;
    transform: translate(-50%, 0);
  }
  .tip2-text {
    position: absolute;
    top: 284rpx;
    width: 100%;
    color: #0a1a33;
    font-size: 42rpx;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
  }
  .tip2-text-line3 {
    color: #0a1a33;
    font-size: 30rpx;
    margin-top: 25rpx;
  }
  .tip2-bottom {
    width: 100%;
    .tip2-bottom-1 {
      width: 480rpx;
      line-height: 80rpx;
      background: #498ef5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      margin: 0 auto;
      font-size: 30rpx;
      color: #ffffff;
      margin-top: 60rpx;
    }
    .tip2-bottom-2 {
      width: 480rpx;
      line-height: 80rpx;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      opacity: 1;
      border: 2rpx solid #707070;
      margin: 0 auto;
      font-size: 30rpx;
      margin-top: 30rpx;
    }
    .tip2-bottom-3 {
      margin-top: 30rpx;
      color: #5c6066;
      font-size: 30rpx;
    }
  }
}
</style>