jpcj-pc/src/views/reviewThreeError/index.vue

<template>
  <div class="bg-gray w-full min-h-screen">
    <div class="pt30 pr30 pl30 pb30 w-full">
      <div class="w-full gray-border flex flex-wrap">
        <div class="pt30 pl30 text-left font26 pb50 bg-white flex-1">
          <span
            >{{ listIndex + 1 }}.<span v-html="list[listIndex].question"></span
          ></span>
          <div v-if="list[listIndex].type !== 1" class="mt30 text-left pl20">
            <div class="" v-if="list[listIndex]['an1']">
              A.&nbsp;&nbsp;{{ list[listIndex]["an1"] }}
            </div>
            <div class="" v-if="list[listIndex]['an2']">
              B.&nbsp;&nbsp;{{ list[listIndex]["an2"] }}
            </div>
            <div class="" v-if="list[listIndex]['an3']">
              C.&nbsp;&nbsp;{{ list[listIndex]["an3"] }}
            </div>
            <div class="" v-if="list[listIndex]['an4']">
              D.&nbsp;&nbsp;{{ list[listIndex]["an4"] }}
            </div>
          </div>

          <div
            v-if="list[listIndex].isComplete && !list[listIndex].isError"
            class="inline-block pl15 pr5 mt15"
            style="background-color: #d9ffeb"
          >
            <img
              class="inline-block w42 h42 align-middle"
              src="@/assets/img/studySkill/smile_express.png"
            />
            <span style="color: #21a65f" class="lh60 align-middle"> 恭喜！回答正确！</span>
          </div>
          <div
            v-if="list[listIndex].isComplete && list[listIndex].isError"
            class="inline-block pl15 pr15 mt15"
            style="background-color: rgba(255, 220, 217, 1)"
          >
            <img
              class="inline-block w42 h42 align-middle"
              src="@/assets/img/studySkill/cry_express.png"
            />
            <span
              v-if="list[listIndex].type !== 3"
              style="color: rgba(239, 54, 41, 1)"
              class="lh60 align-middle"
            >
              正确答案是:{{
                switchPageNumBySelect(list[listIndex].answertrue)
              }}</span
            >
          </div>
          <div>
            <div
              @click="playIssueAudio"
              class="mt30 w88 items-center bottom-button flex h40 justify-center"
            >
              <img
                class="w18 h18 inline-block mr10"
                src="@/assets/img/studySkill/voice_icon.png"
              />
              <span class="font16">读题</span>
            </div>
          </div>
          <div class="flex cursor-pointer mt20">
            <div
              v-if="list[listIndex]['an1']"
              @click="
                list[listIndex].isComplete
                  ? ''
                  : setUserAnswerAndRes(list[listIndex]['an1'])
              "
              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
            >
              <span v-if="list[listIndex].type == 1">{{ "√" }}</span>
              <span v-if="list[listIndex].type !== 1">{{
                switchIndexBySelect(0)
              }}</span>
            </div>

            <div
              v-if="list[listIndex]['an2']"
              @click="
                list[listIndex].isComplete
                  ? ''
                  : setUserAnswerAndRes(list[listIndex]['an2'])
              "
              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
            >
              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
              <span v-if="list[listIndex].type !== 1">{{
                switchIndexBySelect(1)
              }}</span>
            </div>
            <div
              v-if="list[listIndex]['an3']"
              @click="
                list[listIndex].isComplete
                  ? ''
                  : setUserAnswerAndRes(list[listIndex]['an3'])
              "
              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
            >
              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
              <span v-if="list[listIndex].type !== 1">{{
                switchIndexBySelect(2)
              }}</span>
            </div>

            <div
              v-if="list[listIndex]['an4']"
              @click="
                list[listIndex].isComplete
                  ? ''
                  : setUserAnswerAndRes(list[listIndex]['an4'])
              "
              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
            >
              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
              <span v-if="list[listIndex].type !== 1">{{
                switchIndexBySelect(3)
              }}</span>
            </div>
          </div>
          <div v-if="list[listIndex].questionType === 1" class="flex mt15">
            <div
              @click="setUserAnswerAndRes(item)"
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="w57 lh46 bottom-button mr15"
            >
              {{ item }}
            </div>
          </div>
          <div v-if="list[listIndex].questionType !== 1" class="flex mt15">
            <div
              @click="setUserAnswerAndRes(item)"
              v-for="(item, index) in list[listIndex].optsArr"
              :key="index"
              class="w57 lh46 bottom-button mr15"
            >
              {{ switchIndexBySelect(index) }}
            </div>
          </div>
        </div>
        <div class="w430 pr30 flex items-center bg-white">
          <img
            class="w400"
            v-if="isImageUrl(list[listIndex].mediaUrl)"
            :src="list[listIndex].mediaUrl"
          />
          <video
            class="w400"
            autoplay
            loop
            v-if="isVideoUrl(list[listIndex].mediaUrl)"
            :src="list[listIndex].mediaUrl"
          ></video>
        </div>
      </div>
      <div class="w-full pt30">
        <div class="w1200 flex justify-between mr-auto ml-auto">
          <div
            @click="preProblem()"
            @keydown.up="preProblem()"
            class="w120 lh46 bottom-button lh46"
          >
            上一题
          </div>
          <div
            @click="nextProblem()"
            @keydown.down="nextProblem()"
            class="w120 lh46 bottom-button lh46"
          >
            下一题
          </div>
          <div
            @click="
              () => {
                alertVisible = true;
              }
            "
            class="w120 lh46 bottom-button lh46"
          >
            本题解析
          </div>
          <div @click="playIssueAudio()" class="w120 lh46 bottom-button lh46">
            语音播报
          </div>
          <div class="w120 lh46 bottom-button lh46">不设为错题</div>
          <div
            @click="
              () => {
                dialogVisible = true;
              }
            "
            class="w120 lh46 bottom-button lh46"
          >
            交卷
          </div>
        </div>
      </div>
      <div class="w-full mt20">
        <div
          class="flex w1200 mr-auto ml-auto h30 items-center content-center justify-around"
        >
          <div class="flex items-center">
            <div class="pr2 pl2">转到</div>
            <input
              @keydown.enter="setPageToListIndex(listPageNum)"
              class="outline-none input-border w35 h30 text-center"
              type="text"
              v-model.number="listPageNum"
            />
            <div class="pr2 pl2">题(请按回车)</div>
          </div>

          <div>
            共 <span class="font-semibold">{{ list.length }}</span> 题
          </div>
          <div class="align-baseline">
            <input
              v-model="sysConfig.autoNext"
              class=""
              @change="changeSysConfig"
              type="checkbox"
            />
            <span>答对自动跳转到下一题</span>
          </div>
          <div>
            <div class="mr15 inline-block tracking5">
              答对<span style="color: #21a65f">{{ trueNum }}</span
              >题
            </div>
            <div class="inline-block tracking5">
              答错<span style="color: #ef3629">{{ falseNum }}</span
              >题
            </div>
          </div>
          <div class=""><span class="text-black font16">正确率100%</span></div>
          <div class="">
            <span class="text-black font16"
              >进度{{
                fixedNumber(((trueNum + falseNum) * 100) / list.length, 2)
              }}%</span
            >
          </div>
          <div class="flex items-center content-center">
            <!-- <div class="mr15">
              <input
                class=""
                v-model="sysConfig.autoRead"
                type="checkbox"
                @change="changeSysConfig"
              />
              <span>自动播放</span>
            </div> -->
            <!-- <div>
              <input
                class=""
                v-model="sysConfig.autoRed"
                type="checkbox"
                @change="changeSysConfig"
              />
              <span>提示红字</span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      :content="list[listIndex].explainJs"
      title="题目解析"
    ></mProblemAlert>
    <mProblemDialog
      @confirm="submitThreeExam()"
      v-model:visible="dialogVisible"
      title="提示"
      content="是否真的要交卷（按确定键交卷，按取消键继续答题）"
    ></mProblemDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import api from "@/api";
import { useRoute } from "vue-router";
import { useDriverExam } from "@/hooks/exam/driverExam";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
import mProblemDialog from "@/components/mProblemDialog/index.vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
import { useThreeExam } from "@/hooks/exam/threeExam";
export default defineComponent({
  name: "studySkill",
  setup() {
    let route = useRoute();
    let store = useStore();
    let sysConfig = ref({
      autoRed: store.state.sysConfig.autoRed,
      autoRead: store.state.sysConfig.autoRead,
      autoNext: store.state.sysConfig.autoNext,
    });
    const changeSysConfig = (event: any) => {
      console.log(sysConfig.value);
      store.commit("SET_SYSCONFIG", sysConfig.value);
    };
    const fixedNumber = (decimal: number, digit: number) => {
      return decimal.toFixed(digit);
    };
    const isImageUrl = (url: string) => {
      var reg = /\.(png|jpg|gif|jpeg|webp)$/;
      return reg.test(url);
    };
    const isVideoUrl = (url: string) => {
      var reg = /\.(mp4|rmvb|3gp|flv|avi)$/;
      return reg.test(url);
    };
    let wrongList: { id: number; timestamp: number }[] = [];
    wrongList = JSON.parse(
      window.localStorage.getItem("threeExam_local_wrong_list") || "[]"
    ) as { id: number; timestamp: number }[];
    return {
      sysConfig,
      alertVisible: ref(false),
      dialogVisible: ref(false),
      ...useThreeExam(
        api.three.threeForceGetThreeForceListIds({
          ids: wrongList.map((item) => item.id).join(","),
        }),
        {
          autoAnswer: false,
          countDown: false,
          recordUncomplete: false,
        }
      ),
      changeSysConfig,
      fixedNumber,
      isImageUrl,
      isVideoUrl,
    };
  },
  components: {
    mProblemAlert,
    mProblemDialog,
  },
});
</script>

<style scoped>
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
input[type="checkbox"] {
  margin-right: 5px;

  cursor: pointer;

  font-size: 14px;

  width: 15px;

  height: 12px;

  position: relative;
}

input[type="checkbox"]:after {
  position: absolute;

  width: 16px;

  height: 16px;

  top: 0;
  left: 0px;

  content: " ";

  background-color: #f9de5b;

  color: #fff;

  display: inline-block;

  visibility: visible;

  border-radius: 3px;
}

input[type="checkbox"]:checked:after {
  width: 16px;
  height: 16px;
  background-size: 100%;
  background-image: url("./../../assets/img/login/checked_icon.png");
}
.input-border {
  border: 1px solid #707070;
}
.bg-gray {
  background: #f5f5f5;
}
.gray-border {
  border: 1px solid #d8d8d8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
.bottom-button {
  text-align: center;
  border: 1px solid #f9de5b;
  cursor: pointer;
}
.bottom-button:focus {
  background: #f9de5b;
  border: 1px solid #f9de5b;
  outline: none;
}
.bottom-button:hover {
  background: #fff7cc;
}
.w1200 {
  width: 1200px;
}
</style>