zhgdyun/src/views/projectFront/examination/test.vue

<template>
  <div class="fullHeight">
    <div class="headers">
      <div class="headerName">考试</div>
    </div>
    <div class="pageContent">
      <div class="tips">交卷之前离开当前页面会导致本次考试作废！</div>
      <div
        class="blockBox"
        v-for="(item, index) in courseDetail.questionList"
        :key="index"
      >
        <div class="testTilte">
          {{ index + 1 }}、{{ item.questionName }}（{{ item.questionScore }}分）
        </div>

        <el-checkbox-group
          class="optionsBox"
          v-if="item.questionType == 2"
          v-model="radioList"
          @change="
            (e) => {
              changeChecked(e, item.questionId, index)
            }
          "
        >
          <el-checkbox
            v-for="(data, index) in item.optionList"
            :label="data.optionId"
            :key="index"
            >{{ indexList[index] }}、{{ data.optionName }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- <label
            class="optionItem"
            v-for="(data, index2) in item.optionList"
            :key="index2"
          >
            <checkbox class="checkbox" :value="data.optionId + ''" /><text
              class="desc"
              >{{ indexList[index2] }}、{{ data.optionName }}</text
            >
          </label> -->
        <el-radio-group class="optionsBox" v-model="radio" v-else>
          <!-- <label
            class="optionItem"
            v-for="(data, index2) in item.optionList"
            :key="index2"
          >
            <radio
              class="checkbox"
              :value="data.optionId + ''"
              :checked="data.optionId === item.optionId"
            /><text class="desc"
              >{{ indexList[index2] }}、{{ data.optionName }}</text
            >
          </label> -->

          <el-radio
            @change="
              (e) => {
                changeChecked(e, item.questionId, index)
              }
            "
            v-for="(data, index2) in item.optionList"
            :key="index2"
            :label="data.optionId"
            >{{ indexList[index2] }}、{{ data.optionName }}</el-radio
          >
        </el-radio-group>
      </div>
      <button type="primary" class="btn submitBtn big" @click="submitData()">
        交卷
      </button>
    </div>
    <dialogs ref="dialogs">
      <!-- <template v-slot:title>
				{{isAdd?'添加':'编辑'}}
			 </template> -->
      <template v-slot:content>
        <div class="formBox2">
          <form @submit="submitData">
            <div class="uni-form-item">
              <div class="uni-form-label">
                <text class="star">*</text>身份证号码
              </div>
              <div class="uni-form-input">
                <input
                  class="uni-input"
                  placeholder-class="cl"
                  name="idCard"
                  v-model="idCard"
                  placeholder="请输入"
                />
              </div>
            </div>
            <button form-type="submit" type="primary" class="btn submitBtn">
              提交
            </button>
          </form>
        </div>
      </template>
    </dialogs>
    <div class="testResultBox" v-if="showResult">
      <img
        v-if="isQualified == 1"
        src="@/assets/images/Pass.png"
        class="resultImg"
      />
      <img v-else src="@/assets/images/noPass.png" class="resultImg" />
      <div class="score">
        <span>{{ score }}分</span>
      </div>
    </div>
  </div>
</template>

<script>
import dialogs from '@/views/projectFront/examination/dialog.vue'
import {
  getSelectSafeEducationQuestionInfoList,
  addSafeEducationQuestionAnswer
} from '@/assets/js/api/safeManage.js'

export default {
  components: { dialogs },
  data() {
    return {
      radio: 3,
      radioList: [],
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'N',
        'M',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      courseDetail: {
        eduAddr: '',
        eduClasshour: '',
        eduContent: '',
        eduCourseName: '',
        eduPhoto: '',
        eduTeacher: '',
        eduTime: '',
        eduType: '',
        eduVideo: '',
        passScore: '',
        projectSn: '',
        questionList: [],
        totalScore: '',
        videoType: 1
      },
      eduId: '',
      selectList: [],
      idCard: '',
      workerId: '',
      score: 0,
      showResult: false,
      isQualified: 1 //1合格，2不合格
    }
  },
  created(options) {
    console.log('获取课程详细数据1516', this.$route.query)
    this.eduId = this.$route.query.eduId
    this.workerId = this.$route.query.workerId
    this.getDetailData()
  },
  beforeDestroy() {
    // console.log('onUnload')
    // uni.showModal({
    // 	title:'提示',
    // 	content:'离开页面本次考试将作废，确认离开吗？',
    // 	success(res) {
    // 		if(res.confirm){
    // 			console.log('离开')
    // 		}else{
    // 			console.log('不离开')
    // 		}
    // 	}
    // })
  },
  methods: {
    changeChecked(e, questionId, index) {
      console.log(e, questionId)
      var arr = e
      //清除之前该问题选中的选项
      for (var i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].questionId == questionId) {
          this.selectList.splice(i--, 1)
        }
      }
      //加上新选中的选项
      if (Array.isArray(arr)) {
        for (var i = 0; i < arr.length; i++) {
          this.selectList.push({
            questionId: questionId,
            optionId: arr[i]
          })
        }
      } else {
        this.selectList.push({
          questionId: questionId,
          optionId: arr
        })
        this.courseDetail.questionList[index].optionId = arr
      }

      console.log(this.selectList)
    },
    //获取课程详细数据
    getDetailData() {
      var that = this
      getSelectSafeEducationQuestionInfoList({ eduId: this.eduId }).then(
        (result) => {
          if (result.result) {
            that.courseDetail = result.result.safeEducation
          }
        }
      )
    },
    inputIdCard() {
      this.$refs.dialogs.showFn()
    },
    submitData() {
      // if(this.idCard==''){
      // 	uni.showToast({
      // 		title:'请输入身份证号码！'
      // 	})
      // 	return
      // }
      var json = {
        eduId: this.eduId,
        workerId: this.workerId,
        // idCard:this.idCard,
        list: this.selectList
      }
      addSafeEducationQuestionAnswer(json).then((result) => {
        if (result.result) {
          this.$message.success('考试成功！')
          this.showResult = true
          this.isQualified = result.result.isQualified
          this.score = result.result.score
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tips {
  font-size: 7rem;
  color: red;
  margin: 5rem 5rem;
  text-align: center;
}
.blockBox {
  box-shadow: 0 2rem 12rem 0px rgba(212, 220, 236, 0.69);
  border-radius: 4rem;
  margin: 7.5rem;
  padding: 5rem;
  position: relative;
}
.optionItem {
  /* padding-left: 20px; */
  margin-top: 5rem;
  font-size: 7rem;
  display: block;
}
.desc {
  margin-left: 2.5rem;
}
.checkbox {
  transform: scale(0.8);
}
.submitBtn {
  margin: -70rem 5rem;
  position: fixed;
  bottom: 10rem;
  /* left: 20px; */
  width: calc(100% - 10rem);
  background: #4181fe;
  height: 15rem;
  border: none;
  color: #fff;
  font-size: 7.5rem;
  border-radius: 10rem;
}
.testResultBox {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
}
.resultImg {
  width: 90%;
  height: 180%;
  margin: -30rem 6rem;
}
.score {
  position: relative;
  left: 50%;
  top: -32%;
  width: 55rem;
  height: 55rem;
  border-radius: 50%;
  border: 4rem solid #fdcb05;
  text-align: center;
  line-height: 100rem;
  transform: translate(-50%, -50%);

  span {
    width: 55rem;
    position: absolute;
    // display: inline-block;
    color: #fdcb05;
    font-size: 20rem;
    margin-top: -22rem;
    margin-left: -28rem;
  }
}
.headers {
  /* border-bottom: 0.5rem solid #f3f3f3; */
  height: 8rem;
  color: #3d4490;
  font-size: 7.5rem;
  text-align: center;
  line-height: 6rem;
  margin-top: -55%;
  /* background-color: pink; */
}
.testTilte {
  font-size: 6rem;
}

::v-deep .el-checkbox__label {
  font-size: 4rem;
  line-height: 10rem;
}
::v-deep .el-checkbox__inner {
  margin-top: -2rem;

  width: 4rem;
  height: 4rem;
  line-height: 10rem;

  /* border: 0.5rem solid #fff; */
}
::v-deep .el-radio__inner {
  margin-top: -2rem;

  width: 4rem;
  height: 4rem;
  line-height: 10rem;
}
::v-deep .el-radio__label {
  font-size: 4rem;
  line-height: 10rem;
}
</style>