v3-lab-web/src/views/safetyEducationExam/securityExam/myExercise/index.vue

<!--模拟练习-->
<template>
  <div class="app-container myExercise">
    <div class="check-max-box" v-if="pageType == 1">
      <div class="check-title-box">
        <p>请选择本次模拟练习的题目类型</p>
        <p>(可多选)</p>
      </div>
      <el-checkbox-group v-model="clickCheckList">
        <el-checkbox :label="item.id" v-for="(item,index) in checkList" :key="index">{{item.title}}</el-checkbox>
      </el-checkbox-group>
      <p class="center-text">模拟练习答题可获得奖励分，可使用奖励分兑换物品。</p>
      <p class="check-button-p" @click="clickExercise">开始练习</p>
    </div>
    <play-exercise v-if="pageType == 2" :transferData="transferData"></play-exercise>
  </div>
</template>

<script>
  import { examElClassifyQueryOption,examElPractiseStart } from "@/api/safetyEducationExam/index";
  import playExercise from "./playExercise.vue";

  export default {
    name: "index",
    components: {
      playExercise,
    },
    data() {
      return {
        pageType:1,
        clickCheckList:[],
        checkList:[],
        transferData:{},
      }
    },
    created() {
      this.getQueryOption();
    },
    mounted(){

    },
    methods:{
      goPage(type){
        if(this.pageType != type){
          if(type == 1){
            this.pageType = type;
          }else if(type == 2){
            this.pageType = type;
          }
        }
      },
      //点击开始练习
      clickExercise(){
        let self = this;
        if(!this.clickCheckList[0]){
          this.msgError('请先选择题目类型');
          return
        }
        let text = "";
        for(let i=0;i<self.clickCheckList.length;i++){
          text = text + self.clickCheckList[i] + ',';
        }
        examElPractiseStart({classifyIds:text}).then( res => {
          this.transferData = res.data;
          this.pageType = 2;
        });
      },
      //获取选项列表
      getQueryOption(){
        examElClassifyQueryOption({pageSize:-1}).then( res => {
          this.checkList =  res.data.records;
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .myExercise {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    *{
      margin:0;
    }
    .check-max-box{
      flex:1;
      display: flex!important;
      flex-direction: column;
      position: relative;
      .check-title-box{
        margin:60px auto 60px;
        display: flex;
        p{
          color:#333;
          font-size:18px;
          line-height:30px;
        }
        p:nth-child(2){
          color:#999;
          font-size:14px;
          margin-left:20px;
          font-weight:500;
        }
      }
      .el-checkbox-group{
        width: 400px;
        margin:0 auto;
        .el-checkbox{
          min-width:200px;
          margin-bottom:20px;
        }
      }
      .center-text{
        width:350px;
        position: absolute;
        bottom:30px;
        right:50%;
        margin-right:-175px;
        text-align: center;
        color:#999;
        font-size:14px;
        font-weight:500;
      }
      .check-button-p{
        position: absolute;
        bottom:20px;
        right:20px;
        width:160px;
        line-height:40px;
        text-align: center;
        border-radius:4px;
        color:#fff;
        background:#0045af;
        cursor:pointer;
      }
    }
  }
</style>