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">
      <image
        v-if="isQualified == 1"
        src="/static/Pass.png"
        class="resultImg"
      ></image>
      <image v-else src="/static/noPass.png" class="resultImg"></image>
      <div class="score">{{ score }}分</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 scoped>
.tips {
  font-size: 14px;
  color: red;
  margin: 10px 0;
  text-align: center;
}
.blockBox {
  box-shadow: 0 4px 24px 0px rgba(212, 220, 236, 0.69);
  border-radius: 8px;
  margin: 15px;
  padding: 15px;
  position: relative;
}
.optionItem {
  /* padding-left: 20px; */
  margin-top: 10px;
  font-size: 14px;
  display: block;
}
.desc {
  margin-left: 5px;
}
.checkbox {
  transform: scale(0.8);
}
.submitBtn {
  /* margin: 15px 20px; */
  /* position: fixed;
	bottom: 20px;
	left: 20px; */
  width: calc(100% - 40px);
  margin: 20px;
  height: 44px;
  border-radius: 20px;
  background: #4181fe;
  color: #fff;
  border: none;
  font-size: 20px;
}
.testResultBox {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
}
.resultImg {
  width: 100%;
  height: 100%;
}
.score {
  position: fixed;
  left: 50%;
  top: 55%;
  font-size: 70px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 8px solid #fdcb05;
  color: #fdcb05;
  text-align: center;
  line-height: 200px;
  transform: translate(-50%, -50%);
}
.headers {
  border-bottom: 1px solid #f3f3f3;
  height: 50px;
  color: #3d4490;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
}
</style>