integrated_traffic_uniapp/pages/application/onlinexxks/exam_details.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">考试详情</block>
    </cu-custom>
    <view class="container">
      <view class="top">
        <view class="suject line_b">
          <text class="line-2">考试科目：{{ info.EXAMNAME }}</text>
        </view>
        <view class="questions">
          <text>当前试题{{ current + 1 }}/{{ info.QUESTIONLIST.length }}</text>
        </view>
      </view>
      <view class="topic">
        <view class="title">
        <text>
          {{ current + 1 }}.{{ info.QUESTIONLIST[current].QUESTIONDRY }}
        </text>
          <text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '1'">
          (单选)
        </text>
          <text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '2'">
          (多选)
        </text>
          <text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '3'">
          (判断)
        </text>
          <text v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '4'">
          (填空)
        </text>
        </view>
        <view
            class="options"
            v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '1'"
        >
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'A' }"
          >
            <text class="option">A</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
          </view>
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'B' }"
          >
            <text class="option">B</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
          </view>
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'C' }"
          >
            <text class="option">C</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONC }}</text>
          </view>
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'D' }"
          >
            <text class="option">D</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIOND }}</text>
          </view>
        </view>
        <view
            class="options"
            v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '2'"
        >
          <view
              class="item"
              :class="{
            active:
              info.QUESTIONLIST[current].ANSWER &&
              info.QUESTIONLIST[current].ANSWER.indexOf('A') !== -1,
          }"
          >
            <text class="option">A</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
          </view>
          <view
              class="item"
              :class="{
            active:
              info.QUESTIONLIST[current].ANSWER &&
              info.QUESTIONLIST[current].ANSWER.indexOf('B') !== -1,
          }"
          >
            <text class="option">B</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
          </view>
          <view
              class="item"
              :class="{
            active:
              info.QUESTIONLIST[current].ANSWER &&
              info.QUESTIONLIST[current].ANSWER.indexOf('C') !== -1,
          }"
          >
            <text class="option">C</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIONC }}</text>
          </view>
          <view
              class="item"
              :class="{
            active:
              info.QUESTIONLIST[current].ANSWER &&
              info.QUESTIONLIST[current].ANSWER.indexOf('D') !== -1,
          }"
          >
            <text class="option">D</text>
            <text class="text">{{ info.QUESTIONLIST[current].OPTIOND }}</text>
          </view>
        </view>
        <view
            class="options"
            v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '3'"
        >
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'A' }"
          >
            <text class="option">{{ info.QUESTIONLIST[current].OPTIONA }}</text>
            <text class="text"></text>
          </view>
          <view
              class="item"
              :class="{ active: info.QUESTIONLIST[current].ANSWER === 'B' }"
          >
            <text class="option">{{ info.QUESTIONLIST[current].OPTIONB }}</text>
            <text class="text"></text>
          </view>
        </view>
        <view
            class="options"
            v-show="info.QUESTIONLIST[current].QUESTIONTYPE === '4'"
        >
          <view class="item">
            <view class="textarea">{{info.QUESTIONLIST[current].ANSWER}}</view>
          </view>
        </view>
        <view class="correct-answer">
          <text>正确答案</text>
          <view v-if="info.QUESTIONLIST[current].QUESTIONTYPE === '3'">
            {{ info.QUESTIONLIST[current].ANSWERRIGHT === "A" ? "对" : "错" }}
          </view>
          <view v-else>{{ info.QUESTIONLIST[current].ANSWERRIGHT || "无" }}</view>
          <text>权威解读</text>
          <view>{{ info.QUESTIONLIST[current].DESCR || "无" }}</view>
        </view>
      </view>
      <view class="footer">
        <button
            class="cu-btn"
            :style="{
              width: current === info.QUESTIONLIST.length - 1 ? '100%' : '45%',
            }"
            v-show="current !== 0"
            @click="current--"
        >
          上一题
        </button>
        <button
            class="cu-btn bg-blue"
            :style="{ width: current === 0 ? '100%' : '45%' }"
            v-show="current !== info.QUESTIONLIST.length - 1"
            @click="current++"
        >
          下一题
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {basePath, loginUser} from "@/common/tool";
export default {
  data() {
    return {
      info: {
        QUESTIONLIST:[{}]
      },
      current: 0,
    }
  },
  onLoad(options) {
    this.getData(options.STAGESTUDENTRELATION_ID, options.CLASS_ID)
  },
  methods: {
    getData(STAGESTUDENTRELATION_ID, CLASS_ID) {
      uni.showLoading({
        title: '请稍候'
      })
      uni.request({
        url: basePath + '/app/stageexam/findResult',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          CORPINFO_ID:loginUser.CORPINFO_ID,
          USER_ID:loginUser.USER_ID,
          STAGESTUDENTRELATION_ID,
          CLASS_ID,
        },
        success: (res) => {
          uni.hideLoading(); //结束加载中动画
          var resData = res.data;
          if ("success" == resData.result) {
            this.info = resData.pd;
          }
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">
.container {
  padding: 0 20upx 20upx;
  background-color: #fff;
  min-height: 100vh;
}

.top {
  background: url("/static/study/bgimg1.png") no-repeat top center;
  background-size: 100% 100%;
  margin-top: 20upx;
  border-radius: 20upx;
  padding: 40upx;
  text-align: center;
  box-sizing: border-box;

  .suject {
    color: #fff;
    font-weight: bold;
    font-size: 32upx;
  }

  .questions {
    color: #eeecec;
    font-size: 30upx;
    padding-top: 20upx;
  }
}

.topic {
  margin-top: 20upx;
  margin-bottom: 80upx;
  padding: 20upx;
  box-sizing: border-box;

  .title {
    font-size: 32upx;
    font-weight: 600;

    .question-type {
      border-radius: 40upx;
      padding: 4upx 14upx;
      border: 1upx solid #3c9cff;
      font-size: 28upx;
      color: #3c9cff;
    }
  }

  .options {
    margin-top: 40upx;

    .item {
      position: relative;
      margin-top: 40upx;
      color: #696868;

      &.active {
        color: #3c9cff;

        .option {
          background-color: #3c9cff;
          color: #fff;
        }
      }

      .option {
        background-color: #eee;
        border-radius: 80upx;
        width: 65upx;
        height: 65upx;
        line-height: 65upx;
        text-align: center;
        font-size: 30upx;
        display: inline-block;
      }

      .text {
        margin-left: 30upx;
        height: 60upx;
        line-height: 60upx;
      }

      .textarea{
        min-height: 200upx;
        border-radius: 6upx;
        border: 1px solid #ccc;
        padding: 10upx;
        word-break: break-all;
      }
    }
  }

  .correct-answer {
    margin-top: 40upx;

    text {
      display: inline-block;
      margin-top: 40upx;
      color: #696868;
      font-size: 30upx;
      font-weight: bold;
    }

    view {
      margin-top: 20upx;
      color: #333;
      padding: 20upx;
      background-color: #eee;
      border-radius: 10upx;
      font-size: 30upx;
    }
  }
}

.footer {
  display: flex;
  position: fixed;
  bottom: 0;
  justify-content: space-between;
  width: 100%;
  left: 0;
  padding: 20upx;
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid #eee;

  button {
    border-radius: 10upx;
  }
}

.line_b {
  width: 100%;
  border-bottom: 1upx solid rgba(255, 255, 255, 0.3);
  padding-bottom: 20upx;
}
</style>