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

<template>
  <div class="">
    <img class="w-full" src="@/assets/img/login/top_bg.png" />
    <div class="pr30 pl30">
      <div
        class="flex w-full flex-col h137 justify-center content-center relative"
      >
        <div
          class="flex w72 h40 right0 round4 items-center justify-center absolute bottom16 bg-primary-yellow cursor-pointer"
        >
          <img
            class="w15 h15 mr5"
            src="@/assets/img/driverExamAnaly/close_icon.png"
          />
          <span class="font16">关闭</span>
        </div>

        <div class="font0 overflow-hidden">
          <span class="font50 text-red-500">{{ score }}</span>
          <span class="font16 text-red-500">分</span>
        </div>

        <div class="font16 w-full">你的成绩</div>
      </div>
      <div
        class="bg-red-100 h46 lh46 w-full pr20 pl20 text-left"
        style="color: #66645c"
      >
        提示：打"√"表示是正确答案；打"×"表示你答错的答案；答题是红色表示没有做。
      </div>
      <div class="pt30 pb30 pt30 pb30">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="round10 pt30 pr30 pl30 pb30 text-left round10 gray-border mb20"
        >
          <div>{{ index + 1 }}、{{ list[index].issue }}</div>
          <div
            :class="{
              'text-red-500': userAnswerList[index] == '0',
            }"
            v-for="(_item, _index) in list[index].optsArr"
            :key="_index"
          >
            <span v-if="userAnswerList[index] == _index + 1&&userAnswerList[index] != '0'">x</span>
            <span v-if="userAnswerList[index] != _index + 1&&userAnswerList[index] != '0'">√</span>
            {{ switchIndexBySelect(_index) }} . {{ _item }}
          </div>

          <div
            @click="
              () => {
                alertVisible = true;
                alertContent = list[index].explainJs;
              }
            "
            class="bg-primary-yellow font16 lh40 w110 text-center round4 mt20 cursor-pointer"
          >
            本题解析
          </div>
        </div>
      </div>
    </div>
    <mProblemAlert
      v-model:visible="alertVisible"
      :title="alertTitle"
      :content="alertContent"
    ></mProblemAlert>
  </div>
</template>

<script lang="ts">
import { openApi } from "@/api/open/type";
import { defineComponent, ref } from "vue";
import mProblemAlert from "@/components/mProblemAlert/index.vue";
// import { Button } from "ant-design-vue";
export default defineComponent({
  setup() {
    return {
      score: ref(0),
      list: ref<openApi.selectFreeQuestionInfoRes["rows"]>([]),
      userAnswerList: ref<string[]>([]),
      alertTitle: "解析",
      alertVisible: ref(false),
      alertContent: ref(""),
    };
  },
  components: {
    mProblemAlert,
    // aButton: Button,
  },
  methods: {
    switchIndexBySelect(index: number) {
      let name = "";
      const i = Number(index);
      switch (i) {
        case 0:
          name = "A";
          break;
        case 1:
          name = "B";
          break;
        case 2:
          name = "C";
          break;
        case 3:
          name = "D";
          break;
        case 4:
          name = "E";
          break;
        case 5:
          name = "F";
          break;
      }
      return name;
    },
  },
  mounted() {
    this.score = Number(this.$route.query.score);
    this.list = JSON.parse(
      window.sessionStorage.getItem("driverExam_temp_wrong_list") || "[]"
    );
    this.userAnswerList = JSON.parse(
      (this.$route.query.wrongListRes as string) || "[]"
    );
  },
});
</script>

<style scoped>
.gray-border {
  border: 1px solid #d8d8d8;
}
.bg-primary-yellow {
  background: #f9de5b;
}
</style>