recycle-mobile/src/pages/learn/components/exam.vue

<template>
  <view class="page">
    <!-- <view class="aaa" style=""> -->
    <u-sticky>
      <view class="top">
        <view class="top_left">
          考生： {{$store.getters.username}}({{$store.getters.usercode}})
        </view>
        <view class="top_right">
          考生须知
        </view>
      </view>
    </u-sticky>

    <view class="content">
      <view class="list" v-for="(v,i) in dataList.titleInfos" :key="i">
        <view class="list_title">
          <view class="list_title_left">
            ({{v.titleType===0? '单选题':v.titleType===1?'多选题':'判断题'}}) {{i+1}}.{{v.titleName}}({{v.score}}分)
          </view>
          <!--  <view class="list_title_right">
            （3分）
          </view> -->
        </view>
        <!-- 单选题 -->
        <view v-if="v.titleType===0" class="">
          <u-radio-group v-model="v.answer" style='flex-wrap: wrap;'>
            <u-radio :customStyle=" {marginBottom: '8px',width: '50%' }" v-for="(value,i) in v.options" :key="i"
              :name="value.sequence" :label="value.sequence+'：'+value.option">
            </u-radio>
          </u-radio-group>
        </view>
        <!-- 多选题 -->
        <view v-if="v.titleType===1" class="">
          <u-checkbox-group v-model="v.answer" style='flex-wrap: wrap;'>
            <u-checkbox :customStyle="{marginBottom: '8px',width: '50%'}" v-for="(value,i) in v.options" :key="i"
              :name="value.sequence" :label="value.sequence+'：'+value.option">
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <!-- 判断提 -->
        <view v-if="v.titleType ===  2" class="">
          <u-radio-group v-model="v.answer" style='flex-wrap: wrap;'>
            <u-radio :customStyle=" {marginBottom: '8px',width: '50%' }" v-for="(value,i) in v.options" :key="i"
              :name="value.sequence" :label="value.sequence+'：'+value.option">
            </u-radio>
          </u-radio-group>

        </view>


      </view>
    </view>
    <u-button @click='answersFn' style='width: 160rpx;position: fixed;left: 20rpx;bottom: 20rpx;' type='primary'
      text="答题情况"></u-button>
    <u-button @click='submitFn' style='width: 500rpx;position: fixed;right: 20rpx;bottom: 20rpx;' type='primary'
      text="提交">
    </u-button>
    <!-- 答题情况 -->
    <u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
      <view class="answers">
        <view class="">
          <u-cell-group>
            <u-cell title="试题列表">
              <text @click="close" slot="value">X</text>
            </u-cell>
          </u-cell-group>
        </view>
        <view class="list">
          <view :class="v.answer=='' || v.answer == [] ? 'ball_no' : 'ball'" v-for="(v,i) in dataList.titleInfos"
            :key="i">
            {{i+1}}
          </view>
        </view>
        <u-divider :text="`本券共${titleInfos.length}题`"></u-divider>
        <view class="all">
          <view class="all_ball">
            {{titleInfos.length-unanswered}}
          </view>
          <view class="all_ok">
            已答
          </view>
          <view class="all_ball_no">
            {{titleInfos.length}}
          </view>
          <view class="all_no">
            未答
          </view>
        </view>
        <!-- <view style="margin-top: 40rpx;">
          <u-button @click='submitFn' shape='circle' style='width: 700rpx' type='primary' text="提交考试"></u-button>
        </view> -->
      </view>
    </u-popup>
    <!-- 模态框 -->
    <u-modal @confirm='confirmFn' @cancel='cancelFn' :show="showModal" :title="title" :content='content'
      showCancelButton></u-modal>
    <!-- 遮罩层 -->
    <u-overlay :show="showOverlay" :opacity='1' style='background-color: #c1c1c1;'>
      <view class="warp">
        <u-modal @confirm='confirmOverlayFn' @cancel='cancelOverlayFn' :show="showModalOverlay" title="考生须知"
          showCancelButton>
          <view class="slot-content">
            <rich-text :nodes="contentSlot"></rich-text>
          </view>
        </u-modal>
      </view>
    </u-overlay>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        options: {},
        dataList: {},
        titleInfos: [],
        showOverlay: false,
        showModalOverlay: false,
        showModal: false,
        title: '提示',
        content: '请确认作答全部完成再提交，提交后将不可 修改作答结果！',
        contentSlot: `
        <div style="font-size: 12px; color: #666666">
            <p>考生须诚信考试，端正考试态度，实事求是</p>
            <p>一、考试环境要求</p>
            <p>&emsp;1.PC端要求：谷歌浏览器（建议使用6.0版本以上）、IE9以上浏览器、火狐浏览器50版本以上。</p>
            <p>&emsp;2.移动端要求：登录嘉讯茂-学习平台进行考试，请勿在移动设备使用浏览器登录考试。</p>
            <p>二、考生答题要求</p>
            <p>&emsp;1.如果当前考试设置了切屏，当达到本次考试设置的切屏次数时，系统将自动交卷。</p>
            <p>&emsp;2.考试过程中如意外退出考试系统（如死机、断电等情况），系统不会自动交卷，考生需尽快再次登录系统进入考试，之前的答卷信息会保留。如在考试倒计时截止前进入考试，可继续答题；考试倒计时截止后进入，系统将提示交卷，不可继续答题。</p>
            <p>&emsp;3.考试过程中，可在答题卡中快速查看已答题目、未答题目和待检查的题目。</p>
            <p>&emsp;4.考生在使用移动设备答题时，需要注意右下角答题数量，如果在已经答题的情况下，已答题数依然显示为0，则需要马上更换设备进行作答。</p>
            <p>&emsp;5. 答题完毕后，一定要点击交卷按钮进行交卷，请勿直接关闭浏览器。</p>
            <p>三、其他</p>
            <p>&emsp;1.如果当前考试允许多次考试，最终成绩取最高分。</p>
            <p>&emsp;2.交卷后，考生在考试记录中查看考试得分和答卷详情。</p>
            <p>&emsp;3.考试过程中如遇特殊情况，可与考试组织方联系。</p>
        </div>`,
        show: false,
        value: null,
        checkboxValue1: [],
        checkboxList1: [{
            name: '苹果',
            disabled: false
          },
          {
            name: '香蕉',
            disabled: false
          },
          {
            name: '橙子',
            disabled: false
          },
          {
            name: '11',
            disabled: false
          }
        ],
      };
    },
    computed: {

      unanswered() {
        let num = 0
        this.titleInfos.forEach(v => {
          if (v.answer === '' || v.answer === []) {
            num = num + 1
          }
        })
        return num
      }
    },
    onLoad(options) {
      this.showOverlay = true
      this.showModalOverlay = true
      this.options = options

    },
    onShow() {
      this.getData(this.options)
    },
    methods: {
      //提交
      async submit() {
        let dataList = JSON.parse(JSON.stringify(this.dataList)).titleInfos;
        // 遍历试题
        for (let i = 0; i < dataList.length; i++) {
          // 遍历选项
          for (let j = 0; j < dataList[i].options.length; j++) {
            if (dataList[i].answer.indexOf(dataList[i].options[j].sequence) > -1) {
              dataList[i].options[j].answer = true;
            }
          }
        }
        let params = {

          "disciplineId": this.options.disciplineId,
          "projectDisciplineFlag": this.options.projectDisciplineId ? true : false,
          "projectDisciplineId": this.options.projectDisciplineId ? this.options.projectDisciplineId : '',
          "titles": dataList
        }
        await this.$api.post('/homepage/confirm', params)
        uni.navigateBack({
          delta: 1
        });

      },

      //获取数据
      async getData(options) {

        let params = {
          "accountCode": this.$store.getters.usercode,
          "disciplineId": options.disciplineId,
          "projectDisciplineFlag": options.projectDisciplineId === '' ? false : true,
          "projectDisciplineId": options.projectDisciplineId === '' ? '' : options.projectDisciplineId,
        }
        let {
          data
        } = await this.$api.post('/homepage/gettitle', params)
        data.titleInfos.forEach((v, i) => {
          if (v.titleType === 1) {
            v.answer = []
          } else {
            v.answer = ''
          }

        })
        this.dataList = data
        this.titleInfos = data.titleInfos

      },
      // 遮罩层模态框确认
      confirmOverlayFn() {
        this.showOverlay = false
        this.showModalOverlay = false

      },
      // 遮罩层模态框取消
      cancelOverlayFn() {
        this.$router.go(-1)
      },
      // 模态框确认
      confirmFn() {
        this.submit()
        this.cancelFn()

      },
      // 模态框取消
      cancelFn() {
        this.showModal = false
      },
      // 提交考试
      submitFn() {
        this.showModal = true
      },
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
        // console.log('close');
      },
      answersFn() {
        this.show = true
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
    background-color: #fff;
  }

  .warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .answers {
    .list {
      display: flex;
      flex-wrap: wrap;
      // margin-bottom: 20rpx;
    }

    .ball {
      margin: 20rpx 54rpx;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      background: #00b226;
      border-radius: 40rpx;
    }

    .ball_no {
      margin: 20rpx 54rpx;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      background: #FF8519;
      border-radius: 40rpx;
    }

    .all {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;

      .all_ball {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        background: #00b226;
        border-radius: 40rpx;
      }

      .all_ball_no {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        color: #fff;
        font-size: 28rpx;
        background: #FF8519;
        border-radius: 40rpx;
      }

      .all_ok {
        padding: 0 30rpx;
      }

      .all_no {
        padding: 0 30rpx;
      }
    }
  }

  .page {
    // height: 93vh;
    // position: relative;
    padding-bottom: 76rpx;
  }

  .content {
    padding: 20rpx;
  }

  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120rpx;
    background-color: #6DA7FF;
    color: #fff;

    .top_left {
      font-size: 28rpx;
    }

    .top_right {
      font-size: 24rpx;

    }
  }

  .list {
    margin-bottom: 20rpx;

    .list_title {
      display: flex;
      font-size: 28rpx;
      margin-bottom: 20rpx;

      .list_title_left {
        line-height: 40rpx;
        flex: 1;
      }

      .list_title_right {
        width: 150rpx;
      }

    }
  }
</style>