前端考试答题，下一题，上一题

<template>
  <div class="box">
    <div class="wrap">
      <p class="title">教育培训</p>
      <el-row class="top">
        <el-col :span="3" :offset="1">
          <img
            src="@/assets/img/fh.png"
            alt=""
            class="fh"
            @click="$router.go(-1)"
          />
        </el-col>
        <el-col :span="16">
          <el-row style="width: 35%; margin: 0 auto">
            <el-col :span="5">
              <img
                src="../../../assets/img/timryes.png"
                alt=""
                class="timrIoc"
              />
            </el-col>
            <el-col :span="15">
              <span :class="[timeState ? 'redcolor' : '']"
                ><van-count-down
                  :time="time"
                  ref="countDown"
                  format="mm:ss"
                  @finish="finish"
                  @change="timeChange(time)"
              /></span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="3">
          <!-- <span class="submitCss" @click="submitFn()">交卷</span> -->
        </el-col>
      </el-row>
      <div class="tabContentPage">
        <div class="topicList">
          <p>
            <em>{{ numValue + 1 }}/20</em><span>{{ stem }}</span>
          </p>
          <ul>
            <li>
              <el-radio
                v-model="answerValue[numValue]"
                label="A"
                class="radioCss"
                :disabled="radioShow.radioShow"
                @change="radioChange"
                >{{ optionA }}</el-radio
              >
            </li>
            <li>
              <el-radio
                v-model="answerValue[numValue]"
                label="B"
                class="radioCss"
                :disabled="radioShow.radioShow"
                >{{ optionB }}</el-radio
              >
            </li>
            <li>
              <el-radio
                v-model="answerValue[numValue]"
                label="C"
                class="radioCss"
                :disabled="radioShow.radioShow"
                >{{ optionC }}</el-radio
              >
            </li>
            <li>
              <el-radio
                v-model="answerValue[numValue]"
                label="D"
                class="radioCss"
                :disabled="radioShow.radioShow"
                >{{ optionD }}</el-radio
              >
            </li>
          </ul>
        </div>
        <el-row>
          <el-col :span="12" style="text-align: center">
            <span class="submitCss" @click="prev">上一题</span>
          </el-col>
          <el-col :span="12" style="text-align: center">
            <span class="submitCss" @click="next">下一题</span>
          </el-col>
          <el-col :span="24" style="text-align: center" v-if="numValue == 19">
            <span class="submitCss" @click="submitFn()"
              >交卷</span
            >
          </el-col>
        </el-row>

        <div class="topicAnswer">
          <el-row type="flex" justify="space-between" class="topicSort">
            <el-col :span="12">
              <h5>试题讲解</h5>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="8">
                  <img src="../../../assets/img/yes.png" alt="" /><span>{{
                    45
                  }}</span>
                </el-col>
                <el-col :span="8">
                  <img src="../../../assets/img/no.png" alt="" /><span>{{
                    45
                  }}</span>
                </el-col>
                <el-col :span="8">
                  <img src="../../../assets/img/fail.png" alt="" /><span>{{
                    45
                  }}</span>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col :span="8">4545644646466</el-col> -->
          </el-row>
          <p>
            {{ notes }}
          </p>
        </div>
        <el-dialog
          :visible.sync="dialogVisible"
          width="80%"
          :show-close="false"
          :close-on-click-modal="false"
        >
          <div class="upTitle">
            <h5>当前成绩不合格</h5>
            <img src="../../../assets/img/grade.png" alt="" />
            <el-row style="margin-top: 1rem">
              <el-col :span="8">
                <div class="borderCss">
                  <p style="color: #fe6c6c">12</p>
                  <p>错题数</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="borderCss">
                  <p>8</p>
                  <p>未做题数</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <p>40</p>
                  <p>考试得分</p>
                </div>
              </el-col>
            </el-row>
            <el-row class="bottomCss" type="flex" justify="space-between">
              <el-col :span="12">
                <el-button size="small" @click="open">继续答题</el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" type="primary" @click="submitPaperFn"
                  >现在交卷</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { FlashPayment } from "@icon-park/vue";
export default {
  data() {
    return {
      radioShow:{radioShow:false},
      answerValue: [],
      stem: "",
      optionA: "",
      optionB: "",
      optionC: "",
      optionD: "",
      correctAnswer: "",
      numValue: 0,
      notes: "",
      topicId: "",
      dialogVisible: false,
      timeState: false,
      time: 20 * 60 * 1000,
      topicName: "",
      listData: [],
      listData2: [],
    };
  },
  //  请求违法代码接口
  created() {
    this.topicName = this.$route.query.item.selectedQuestionBank;
    this.topicId = this.$route.query.item.id;
    this.getData();
   
  },
  methods: {
    // 考试倒计时
    finish() {
      this.$message({
        message: "考试时间结束",
        type: "error",
      });
      this.submitFn();
    },
    // 倒计时提示
    timeChange() {
      let that = this;
      if (that.$refs.countDown.formattedTime < "01:00") {
        that.timeState = true;
      }
    },
    选择题目方法
    radioChange(val) {  
      console.log(32232321,this.answerValue)
      console.log(321,this.numValue)
      选过的题禁止重选
		if(this.numValue < this.answerValue.length){
		     this.radioShow.radioShow = true
		}
    },
    上一题
    prev() {
      if (this.numValue >= 1) {
        var num = this.numValue;
        this.numValue = --num;
       **numValue  是题目下标  this.answerValu 是答案长度   题目下标小于答案长度 证明题目已经解答 打过的题 禁止选**  
        if(this.numValue < this.answerValue.length){
            this.radioShow.radioShow = true
        }
        ***调用题目方法***
        this.topicList()
      } else {
        return;
      }
    },
    // 下一步
    next(item) {
      if (this.numValue <= 18) {
       
        var num = this.numValue;
        this.numValue = ++num;
  **numValue  是题目下标   this.answerValu 是答案长度   题目下标小于答案长度 证明题目已经解答 打过的题 禁止重新答题
**
        if(this.numValue >= this.answerValue.length){
            this.$set(this.radioShow,"radioShow",false)
          }
        this.topicList()
      }
    },
    // 操作题目列表
    topicList(){
      this.$nextTick(()=>{
           var arrData = this.listData
           var numValue = this.numValue
            this.stem = arrData[numValue].stem;
            this.optionA = arrData[numValue].optionA;
            this.optionB = arrData[numValue].optionB;
            this.optionC = arrData[numValue].optionC;
            this.optionD = arrData[numValue].optionD;
            this.notes = arrData[numValue].notes;
            // this.radioShow = arrData[numValue].radioShow;
            this.correctAnswer = arrData[numValue].correctAnswer;
            this.topicId = arrData[numValue].id; 
      })
     
    },
    // 获取答题列表
    getData(num) {
      var then = this;
      this.$axios
        .get(
          this.GLOBAL.myhf +
            `/selectQuestionBan?selectedQuestionBankType=${then.topicName}&id=${then.topicId}`,
          { withCredentials: true }
        )
        .then((res) => {
        
          if (res.data.info == "success") {
            then.listData = res.data.data.questionBankNewList;
              then.topicList();
          } else {
            // this.$message({
            //   message: res.data.msg,
            //   type: "warning",
            // });
          }
        });
    },
    // 答题未通过
    open() {
      let that = this;
      that
        .$confirm("此次答题不会记录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    // 现在交卷
    submitPaperFn() {
      this.$router.push("/submitPaper");
      //  this.$router.push({path:'/home',query: {id:'1'}})
    },
    // 提交
    submitFn() {
      this.$router.push({
        path: "/submitPaper",
        query: { dtTime: this.$refs.countDown.formattedTime },
      });
    },
  },
};