mn-h5/src/views/aprilExam/test.vue

<template>
  <div>
    <div class="container" @touchmove="slideTopics" ref="container">
      <div class="tab">
        <div
          v-for="(item, index) in tabItemList"
          :key="index"
          class="tab-item"
          @click="
            () => {
              tabItemListIndex = index;
              listIndex = listIndexList[tabItemListIndex];
              getPage(index);
            }
          "
          :class="{
            'tab-item_select': tabItemListIndex == index,
          }"
        >
          <img class="tab-img" v-if="tabItemListIndex !== index" :src="item.whiteImg" />
          <img class="tab-img" v-if="tabItemListIndex === index" :src="item.blueImg" />
          <span class="tabItem-title">{{ item.title }}</span>
        </div>
      </div>
      <div class="topics">
        <div class="topics-title">{{ list[listIndex].type == 1 ? '判断' : '选择' }}</div>
        <div class="topics-content">
          {{ list[listIndex].name }}
        </div>
      </div>
      <div class="options">
        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 1)"
          v-if="list[listIndex].an1"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 1 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 1
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 1 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 1
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">A</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 1 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 1,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 1 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 1,
              }"
            >
              {{ list[listIndex].an1 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>
        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 2)"
          v-if="list[listIndex].an2"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 2 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 2
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 2 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 2
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">B</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 2 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 2,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 2 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 2,
              }"
            >
              {{ list[listIndex].an2 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>
        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 3)"
          v-if="list[listIndex].an3"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 3 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 3
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 3 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 3
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">C</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 3 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 3,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 3 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 3,
              }"
            >
              {{ list[listIndex].an3 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>

        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 4)"
          v-if="list[listIndex].an4"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 4 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 4
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 4 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 4
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">D</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 4 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 4,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 4 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 4,
              }"
            >
              {{ list[listIndex].an4 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>

        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 5)"
          v-if="list[listIndex].an5"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 5 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 5
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 5 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 5
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">E</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 5 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 5,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 5 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 5,
              }"
            >
              {{ list[listIndex].an5 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>

        <div
          class="options-select"
          @click="selectAnswer(list[listIndex], 6)"
          v-if="list[listIndex].an6"
        >
          <div class="options-selectText">
            <img
              src="@/assets/img/okimg.png"
              v-if="
                list[listIndex].userAnswer == 6 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer == 6
              "
              class="options-selectText-okimg"
            />
            <img
              src="@/assets/img/noimg.png"
              v-if="
                list[listIndex].userAnswer == 6 &&
                list[listIndex].isExplainJs &&
                list[listIndex].rightAnswer !== 6
              "
              class="options-selectText-noimg"
            />
            <div class="options-selectText-header">F</div>
            <div
              class="options-selectText-mid"
              :class="{
                'options-selectText-mid_selectOk':
                  list[listIndex].userAnswer == 6 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer == 6,
                'options-selectText-mid_selectNo':
                  list[listIndex].userAnswer == 6 &&
                  list[listIndex].isExplainJs &&
                  list[listIndex].rightAnswer !== 6,
              }"
            >
              {{ list[listIndex].an6 }}
            </div>
          </div>
          <div class="options-bg"></div>
        </div>
      </div>
      <div class="explain" v-opacity="list[listIndex].isExplainJs">
        <div class="explain-answer">
          <div class="explain-answerText">
            <span>正确答案：</span>
            <span style="color: #12af85">{{ answerIndexMap[list[listIndex].rightAnswer] }}</span>
          </div>
        </div>
        <div class="explain-header">题目解析</div>
        <div class="explain-content">
          {{ list[listIndex].explainJs }}
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-container">
          <img @click="backTopics" src="@/assets/img/beforeTopics.png" />
          <span>
            <span style="color: #ffac4d">{{ listIndex + 1 }}</span
            >/{{ list.length }}
          </span>
          <img @click="nextTopics" src="@/assets/img/nextTopics.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onUnmounted } from 'vue';
import { Toast } from 'vant';
import api from '@/api/api';
import blueTabItemImg0 from '@/assets/img/blueCar.png';
import blueTabItemImg1 from '@/assets/img/blueBus.png';
import blueTabItemImg2 from '@/assets/img/blueTruck.png';
import blueTabItemImg3 from '@/assets/img/blueMoto.png';

import whiteTabItemImg0 from '@/assets/img/whiteCar.png';
import whiteTabItemImg1 from '@/assets/img/whiteBus.png';
import whiteTabItemImg2 from '@/assets/img/whiteTruck.png';
import whiteTabItemImg3 from '@/assets/img/whiteMoto.png';
const tabItemListIndex = ref(0);
const answerIndexMap = ['!', 'A', 'B', 'C', 'D', 'E', 'F', 'G'];
const tabItemList = [
  {
    blueImg: blueTabItemImg0,
    whiteImg: whiteTabItemImg0,
    title: '小车',
  },
  {
    blueImg: blueTabItemImg1,
    whiteImg: whiteTabItemImg1,
    title: '客车',
  },
  {
    blueImg: blueTabItemImg2,
    whiteImg: whiteTabItemImg2,
    title: '货车',
  },
  {
    blueImg: blueTabItemImg3,
    whiteImg: whiteTabItemImg3,
    title: '摩托车',
  },
];
let list = ref<questionTwoList.row[]>([
  {
    an1: '正确',
    an2: '错误',
    an3: '',
    an4: '',
    an5: '',
    an6: '',
    an7: '',
    cartype: '',
    name: '机动车驾驶人在实习期内有记满12分记录的，注销其实习的准驾车型驾驶资格。',
    explainJs:
      '《机动车驾驶证申请和使用规定》第八十条：机动车驾驶人在实习期内发生的道路交通安全违法行为被记满12分的，注销其实习的准驾车型驾驶资格',
    id: 0,
    image: '',
    kemu: 0,
    name: '',
    num: 0,
    rightAnswer: 0,
    type: 0,
  },
]);
let listIndexList = [0, 0, 0, 0];
let timer = window.setInterval(() => {
  listIndexList[tabItemListIndex.value] = listIndex.value;
}, 400);
onUnmounted(() => {
  window.clearInterval(timer);
});
let listIndex = ref(0);
let list0 = ref<questionTwoList.row[]>([]);
let list1 = ref<questionTwoList.row[]>([]);
let list2 = ref<questionTwoList.row[]>([]);
let list3 = ref<questionTwoList.row[]>([]);
let container = ref(null);
const query = {
  pageNum: 1,
  pageSize: 1000,
  cartype: '0' as '0' | '1' | '2' | '3',
  kemu: 1,
};
let getPage = (index: number) => {
  let indexStr = String(index);
  query.cartype = indexStr as '0' | '1' | '2' | '3';
  switch (index) {
    case 0:
      if (list0.value.length == 0) {
        api.questionTwoList(query).then((res) => {
          list0.value = res.data.rows;
          list.value = res.data.rows;
        });
      } else {
        list.value = list0.value;
      }

      break;
    case 1:
      if (list1.value.length == 0) {
        api.questionTwoList(query).then((res) => {
          list1.value = res.data.rows;
          list.value = res.data.rows;
        });
      } else {
        list.value = list1.value;
      }

      break;
    case 2:
      if (list2.value.length == 0) {
        api.questionTwoList(query).then((res) => {
          list2.value = res.data.rows;
          list.value = res.data.rows;
        });
      } else {
        list.value = list2.value;
      }

      break;
    case 3:
      if (list3.value.length == 0) {
        api.questionTwoList(query).then((res) => {
          list3.value = res.data.rows;
          list.value = res.data.rows;
        });
      } else {
        list.value = list3.value;
      }

      break;
  }
};
let nextTopics = () => {
  if (listIndex.value == list.value.length - 1) {
    Toast('到底了');
    return;
  } else {
    listIndex.value = listIndex.value + 1;
  }
  container.value.scrollTo(0, 0);
  // container.scrollTo(0, 0);
};
let backTopics = () => {
  if (listIndex.value == 0) {
    Toast('到底了');
    return;
  } else {
    listIndex.value = listIndex.value - 1;
  }
  container.value.scrollTo(0, 0);
};
let selectAnswer = (item: questionTwoList.row, index: number) => {
  if (!item.isExplainJs) {
    item.isExplainJs = true;
    item.userAnswer = index;
    if (item.userAnswer == item.rightAnswer) {
      window.setTimeout(() => {
        listIndex.value = listIndex.value + 1;
      }, 1200);
    }
  }
};

let slideTopics = (() => {
  let touchList0: TouchList;
  let beginTimeStrap: number = 0;

  return (e: TouchEvent) => {
    let currentTimeStrap: number = +new Date();
    let touchList1: TouchList;
    if (currentTimeStrap - beginTimeStrap < 1500) {
      touchList1 = e.changedTouches;
      //单点触摸的时候
      if (touchList0.length == 1 && touchList1.length == 1) {
        console.log(touchList1[0].clientX - touchList0[0].clientX);
        if (touchList1[0].clientX - touchList0[0].clientX > 160) {
          nextTopics();
          touchList0 = e.changedTouches;
        } else if (touchList1[0].clientX - touchList0[0].clientX < -160) {
          backTopics();
          touchList0 = e.changedTouches;
        }
      }
    } else {
      beginTimeStrap = currentTimeStrap;
      touchList0 = e.changedTouches;
    }
  };
})();
//初始获取题目
getPage(0);

//truck
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('./../../assets/img/aprilExam.png');
  background-size: 100%;
  padding-bottom: 136px;
  overflow-y: scroll;
}
.tab {
  padding: 0px 60px;
  padding-top: 32px;
  display: flex;
  justify-content: space-around;

  .tab-item {
    display: flex;

    align-content: center;
    align-items: center;
    width: 140px;
    height: 60px;
    padding: 0px 15px;
    padding-left: 10px;
    justify-content: space-between;
    white-space: nowrap;
    color: #fff;
    .tabItem-title {
      font-size: 26px;
    }
  }
  .tab-item_select {
    background: #fff;
    border: 4px solid #2d2d2d;
    border-radius: 35px;
    color: #498ef5;
  }
  .tab-img {
    width: 40px;
    height: 24px;
  }
}
.topics {
  width: 690px;
  margin: 0 auto;
  margin-top: 154px;
  border: 5px solid #2d2d2d;
  padding: 26px 0;
  position: relative;
  background: #fff;
  border-radius: 8px;
  .topics-title::before {
    color: white;
  }
  .topics-title {
    position: absolute;
    top: 26px;
    width: 88px;
    height: 44px;
    left: -5px;
    background: #01c18d;
    border: 5px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .topics-content {
    text-align: left;
    font-size: 30px;
    text-indent: 3em;
    font-weight: 600;
  }
}
.options {
  width: 100%;
  margin-top: 30px;
  padding-left: 60px;
  .options-select {
    width: 644px;
    height: 98px;
    position: relative;
    margin-bottom: 26px;
  }
  .options-selectText {
    border: 5px solid #2d2d2d;
    height: 84px;
    text-align: left;
    display: flex;
    align-content: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    position: absolute;
    left: 0;
    top: 0;
    width: 630px;
    z-index: 10;
  }
  .options-selectText-header {
    background: #ffac4d;
    width: 56px;
    height: 56px;
    border: 3px solid #2d2d2d;
    position: relative;
    left: -3px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    color: white;
    border-radius: 8px;
    flex-basis: 1;
    flex-shrink: 0;
  }

  .options-selectText-mid {
    margin-left: 20px;
  }
  .options-selectText-mid_selectOk {
    color: #12af85;
  }
  .options-selectText-mid_selectNo {
    color: #ff4d53;
  }
  .options-selectText-okimg {
    position: absolute;
    right: 28px;
    width: 28px;
    height: 28px;
  }
  .options-selectText-noimg {
    position: absolute;
    right: 28px;
    width: 28px;
    height: 28px;
  }
  .options-bg {
    width: 630px;
    height: 84px;
    background: #d6b352;
    border: 5px solid #2d2d2d;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    overflow: hidden;
  }
}
.explain {
  margin-top: 60px;
  width: 690px;
  border: 4px solid #2d2d2d;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 20px;
  .explain-answer {
    height: 86px;
    display: flex;
    align-items: flex-end;
    font-size: 32px;
    font-weight: 700;
    .explain-answerText {
      width: 630px;
      margin: 0 auto;
      text-align: left;
      border-bottom: 2px solid #cccccc;
    }
  }
  .explain-header {
    margin-top: 32px;
    text-align: left;
    padding-left: 30px;
    font-weight: 600;
  }
  .explain-content {
    font-size: 24px;
    text-align: left;
    padding: 8px 30px;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 136px;
  background: #fff;
  display: flex;
  align-content: center;
  align-items: center;
  padding: 0 60px;
  .bottom-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    font-weight: 700;
    img {
      width: 60px;
      height: 60px;
    }
  }
}
</style>