YNUtdPlatform/pages/YNEduApp/exam/examinationResultDetails.vue

<template>
  <view>
    <div class="content">
      <div class="top-content">
        <div class="top-wrapper">
          <div class="all" :class="{ isAllActive: isActive !== 1 }" @click="handleTab(1)">全部</div>
          <div :class="{ isTopActive: isActive == 2 }" @click="handleTab(2)">正确（{{ rightCount }}）</div>
          <div :class="{ isTopActive: isActive == 3 }" @click="handleTab(3)">错误（{{ wrongCount }}）</div>
          <div :class="{ isTopActive: isActive == 4 }" @click="handleTab(4)">未答（{{ unAnsweredCount }}）</div>
          <div>
            第
            <span style="color: #1989fa">{{ currentIndex + 1 }}</span>
            /{{ list.length }}题
          </div>
        </div>

        <div class="center-wrapper">
          <div class="answer-wrapper">
            <div
              class="item-wrapper"
              v-for="(item, index) in list"
              :key="index"
              v-show="item.isShow"
              @click="handleQuestionNumber(item, index)"
            >
              <div
                class="answer-item"
                :class="{ currentBg: currentIndex == index, rightBg: item.isRight, wrongBg: item.isWrong }"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
          <div class="unfold" @click="handleUnfold">
            {{ isRotating ? '收起' : '展开' }}
            <u-icon v-if="!this.isRotating" name="arrow-down-fill" size="10" />
            <u-icon v-else name="arrow-up-fill" size="10" />
          </div>
        </div>
      </div>

      <!-- 题目 -->
      <div class="question-wrapper" v-for="(item, index) in list" :key="index" v-show="index == currentIndex">
        <div class="question-type-wrapper">
          <div class="line" />
          <div class="question-type">
            <div v-if="item.examType == 1">单选题（{{ item.questionScore }}分）</div>
            <div v-if="item.examType == 2">多选题（{{ item.questionScore }}分）</div>
            <div v-if="item.examType == 3">判断题（{{ item.questionScore }}分）</div>
          </div>
        </div>
        <div class="question">{{ currentIndex + 1 }}. {{ item.examTopic }}</div>

        <div class="options">
          <div
            class="option"
            v-for="(option, optionIndex) in item.listOption"
            :key="optionIndex"
            :class="{ isRight: option.isRight, isError: option.isError }"
          >
            <div class="option-item">{{ option.optionIdent }}.</div>
            <div class="option-content">
              <div>{{ option.optionContent }}</div>
              <u-icon v-if="option.isRight" name="/static/images/correct.png" />
              <u-icon v-if="option.isError" name="/static/images/error.png" />
            </div>
          </div>
        </div>
      </div>

      <div v-for="(item, index) in list" v-show="index == currentIndex" style="margin-top: 30px; font-size: 12px">
        <div v-if="item.isRight" style="color: #48d66b">回答正确</div>
        <div v-else-if="item.isWrong" style="color: #fa4f19">回答错误</div>
        <div v-else-if="item.isUnAnswered" style="color: #656565">未选择</div>

        <div class="select-wrapper">
          <div class="select-item">
            <div>正确选择</div>
            <div v-if="item.examType == 1 || item.examType == 3" style="color: #48d66b">
              {{ item.correctGrade || '' }}
            </div>
            <div v-else style="color: #48d66b" class="grade">
              <div v-for="(grade, gradeIndex) in item.correctGrade.split('')" :key="gradeIndex">
                {{ grade }}{{ gradeIndex + 1 == item.correctGrade.split('').length ? '' : ',&nbsp;' }}
              </div>
            </div>
          </div>
          <div class="select-item" v-show="!item.isUnAnswered">
            <div>你的选择</div>
            <div
              v-if="item.examType == 1 || item.examType == 3"
              :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }"
            >
              {{ item.selectAnswer || '' }}
            </div>
            <div v-else :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }" class="grade">
              <div v-if="item.selectAnswer">
                <div v-for="(grade, gradeIndex) in item.selectAnswer.split('')" :key="gradeIndex">
                  {{ grade }}{{ gradeIndex + 1 == item.selectAnswer.split('').length ? '' : ',&nbsp;' }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="analysis">
          <u-icon name="/static/images/analysis.png" style="margin-right: 5px" />
          解析
        </div>
        <div class="analysis-item">{{ item.examAnaly }}</div>
      </div>

      <!-- 底部按钮 -->
      <div class="bottom-btn">
        <div class="btn" v-show="currentIndex != 0">
          <u-button size="small" shape="circle" text="上一题" @click="currentIndex--" />
        </div>
        <div class="btn" v-if="currentIndex !== questionList.length - 1">
          <u-button type="primary" size="small" shape="circle" text="下一题" @click="currentIndex++" />
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import { getExamRecordAnswer } from '@/api/eduApp'
import config from '@/config'

export default {
  data() {
    return {
      examId: '', // 考试id
      recordId: '', // 考试记录id
      isActive: 1,
      isRotating: false,
      currentIndex: 0,
      // 正确
      rightCount: 0,
      // 错误
      wrongCount: 0,
      // 未答
      unAnsweredCount: 0,
      // 问题列表
      questionList: [],
      // questionList: [
      //   {
      //     type: 1,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     correctGrade: 'A',
      //     selectAnswer: 'B',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 2,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     correctGrade: ['B', 'D'],
      //     selectAnswer: ['B', 'C'],
      //     analysis: '解析'
      //   },
      //   {
      //     type: 3,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '对',
      //         value: 'A'
      //       },
      //       {
      //         label: '错',
      //         value: 'B'
      //       }
      //     ],
      //     correctGrade: 'A',
      //     selectAnswer: 'A',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 1,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     correctGrade: 'A',
      //     userAnswer: 'A',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 2,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     correctGrade: ['B', 'D'],
      //     userAnswer: ['B', 'C'],
      //     analysis: '解析'
      //   },
      //   {
      //     type: 2,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     correctGrade: ['B', 'D'],
      //     userAnswer: ['B', 'D'],
      //     analysis: '解析'
      //   },
      //   {
      //     type: 3,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '对',
      //         value: 'A'
      //       },
      //       {
      //         label: '错',
      //         value: 'B'
      //       }
      //     ],
      //     correctGrade: 'A',
      //     userAnswer: 'A',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 1,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     rightAnswer: 'A',
      //     userAnswer: 'B',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 2,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     rightAnswer: ['B', 'D'],
      //     userAnswer: ['B', 'C'],
      //     analysis: '解析'
      //   },
      //   {
      //     type: 3,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '对',
      //         value: 'A'
      //       },
      //       {
      //         label: '错',
      //         value: 'B'
      //       }
      //     ],
      //     rightAnswer: 'A',
      //     userAnswer: 'A',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 1,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     rightAnswer: 'A',
      //     userAnswer: 'B',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 2,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '正常工作电压作用下的电气设备',
      //         value: 'A'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'B'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'C'
      //       },
      //       {
      //         label: '电气设备的绝缘电阻',
      //         value: 'D'
      //       }
      //     ],
      //     rightAnswer: ['B', 'D'],
      //     userAnswer: ['B', 'C'],
      //     analysis: '解析'
      //   },
      //   {
      //     type: 3,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '对',
      //         value: 'A'
      //       },
      //       {
      //         label: '错',
      //         value: 'B'
      //       }
      //     ],
      //     rightAnswer: 'A',
      //     userAnswer: 'A',
      //     analysis: '解析'
      //   },
      //   {
      //     type: 3,
      //     question: '送配电线路架设工模拟考试',
      //     options: [
      //       {
      //         label: '对',
      //         value: 'A'
      //       },
      //       {
      //         label: '错',
      //         value: 'B'
      //       }
      //     ],
      //     correctGrade: 'A',
      //     userAnswer: '',
      //     analysis: '解析'
      //   }
      // ],
      // 正确列表
      rightList: [],
      // 错误列表
      wrongList: [],
      // 未答列表
      unAnsweredList: [],
      list: []
    }
  },
  onLoad(opt) {
    opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt-结果详情:', opt)
    this.examId = opt.examId
    this.recordId = opt.recordId
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const params = {
        examId: this.examId,
        recordId: this.recordId
      }
      // const res = await getExamRecordAnswer(params)
      // this.questionList = res.data.examPaperData
      uni.request({
        url: config.baseUrl + '/exam-student/studentExam/getExamRecordAnswer',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: uni.getStorageSync('access_token')
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getList ~ res:', res.data.examPaperData)
          if (res.code != 200) {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
          this.questionList = res.data.examPaperData
          this.list = this.questionList
          this.list.forEach((item, index) => {
            if (index < 7) {
              item.isShow = true
            } else {
              item.isShow = false
            }
          })
          console.log('🚀 ~ getList ~ res:', res)
          this.questionList.forEach((item, index) => {
            if (item.examType === 1 || item.examType === 3) {
              if (!item.selectAnswer) {
                this.unAnsweredCount++
                item.isUnAnswered = true
                // 添加正确背景色
                item.listOption.forEach(option => {
                  option.isRight = option.optionIdent === item.correctGrade
                })
              } else {
                if (item.correctGrade === item.selectAnswer) {
                  this.rightCount++
                  // 添加正确背景色
                  item.isRight = true
                  item.listOption.forEach(option => {
                    option.isRight = option.optionIdent === item.correctGrade
                  })
                } else {
                  this.wrongCount++
                  // 添加错误背景色
                  item.isWrong = true
                  item.listOption.forEach(option => {
                    option.isError = option.optionIdent === item.selectAnswer
                    if (option.optionIdent === item.correctGrade) {
                      option.isRight = true
                    }
                  })
                }
              }
            } else {
              if (!item.selectAnswer) {
                this.unAnsweredCount++
                item.isUnAnswered = true
                // 添加正确背景色
                item.listOption.forEach(option => {
                  option.isRight = item.correctGrade.includes(option.optionIdent)
                })
              } else {
                if (item.correctGrade.toString() === item.selectAnswer.toString()) {
                  this.rightCount++
                  // 添加正确背景色
                  item.isRight = true
                } else {
                  this.wrongCount++
                  // 添加错误背景色
                  item.isWrong = true
                }
                item.listOption.forEach(option => {
                  if (item.correctGrade.includes(option.optionIdent)) {
                    option.isRight = true
                  }
                  if (item.selectAnswer.includes(option.optionIdent)) {
                    option.isError = true
                  }
                  if (option.isRight && option.isError) {
                    option.isError = false
                  }
                })
              }
            }
          })
          this.rightList = this.questionList.filter(item => item.isRight)
          this.wrongList = this.questionList.filter(item => item.isWrong)
          this.unAnsweredList = this.questionList.filter(item => item.isUnAnswered)
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    handleTab(index) {
      console.log('🚀 ~ handleTab ~ index:', index)
      this.isActive = index
      this.currentIndex = 0
      if (index === 1) {
        this.list = this.questionList
      } else if (index === 2) {
        this.list = this.rightList
      } else if (index === 3) {
        this.list = this.wrongList
      } else if (index === 4) {
        this.list = this.unAnsweredList
      }
      this.list.forEach((item, index) => {
        if (index < 7) {
          item.isShow = true
        } else {
          item.isShow = false
        }
      })
    },
    handleUnfold() {
      this.isRotating = !this.isRotating
      this.list.forEach((item, index) => {
        if (index >= 7) {
          item.isShow = this.isRotating
        }
      })
    },
    handleQuestionNumber(item, index) {
      this.currentIndex = index
      this.list.forEach(element => {
        element.isActive = false
      })
      item.isActive = true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;

  .top-content {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
  }

  .top-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #333;
    .isTopActive {
      color: #1989fa;
    }
    .all {
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      background: #1989fa;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 40px;
      &.isAllActive {
        background: #fff;
        color: #333;
        border: 1px solid #1989fa;
      }
    }
  }

  .center-wrapper {
    display: flex;
    justify-content: space-between;

    .unfold {
      height: 50px;
      line-height: 50px;
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .answer-wrapper {
      width: 86%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .item-wrapper {
        padding: 5px 5px 0 0;
        width: 12%;
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;

        .answer-item {
          width: 33px;
          height: 33px;
          line-height: 33px;
          text-align: center;
          border-radius: 5px;
          background: #f4f9fe;
          color: #333;
        }
        // 正确背景色
        .rightBg {
          background: #eaf8ed;
        }
        // 错误背景色
        .wrongBg {
          background: #fcefe9;
        }
        .currentBg {
          background: #1989fa;
        }
      }
    }
  }

  .question-wrapper {
    .question-type-wrapper {
      margin: 20px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .line {
        width: 2px;
        height: 11px;
        background: #1989fa;
        margin-right: 3px;
      }
      .question-type {
        color: #8a8a8a;
      }
    }

    .question {
      font-weight: 800;
      font-size: 15px;
      color: #333333;
    }
  }

  .options {
    margin-top: 10px;
    .option {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 10px;
      background: #f4f9fe;
      border-radius: 5px;

      &.isRight {
        background: #eaf8ed;
      }
      &.isError {
        background: #fcefe9;
      }
      .option-item {
        width: 33px;
        height: 33px;
        line-height: 33px;
        text-align: center;
        color: #333;
      }
      .option-content {
        width: calc(100% - 60px);
        margin-left: 10px;
        color: #333;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .select-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    .select-item {
      width: 48%;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #646464;
      background: #edf2f7;
      border-radius: 5px;

      .grade {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        margin-right: 3px;
      }
    }
  }

  .analysis {
    margin: 10px 0;
    font-size: 14px;
    color: #333333;
    font-weight: 800;
    display: flex;
    justify-content: flex-start;
  }
  .analysis-item {
    margin-bottom: 100px;
    height: 80px;
    background: #edf2f7;
    border-radius: 5px;
    padding: 10px;
    font-size: 12px;
    color: #656565;
    overflow: auto;
  }

  .bottom-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 15px 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .btn {
      width: 100px;
      margin-right: 10px;
    }
  }
}
</style>