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.type == 1">单选题（{{ item.score }}分）</div>
            <div v-if="item.type == 2">多选题（{{ item.score }}分）</div>
            <div v-if="item.type == 3">判断题（{{ item.score }}分）</div>
          </div>
        </div>
        <div class="question">{{ currentIndex + 1 }}. {{ item.question }}</div>

        <div class="options">
          <div
            class="option"
            v-for="(option, optionIndex) in item.options"
            :key="optionIndex"
            :class="{ isRight: option.isRight, isError: option.isError }"
          >
            <div class="option-item">{{ option.value }}.</div>
            <div class="option-content">
              <div>{{ option.label }}</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.type == 1 || item.type == 3" style="color: #48d66b">{{ item.rightAnswer }}</div>
            <div v-else style="color: #48d66b">{{ item.rightAnswer.join(', ') }}</div>
          </div>
          <div class="select-item" v-show="!item.isUnAnswered">
            <div>你的选择</div>
            <div v-if="item.type == 1 || item.type == 3" :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">
              {{ item.userAnswer }}
            </div>
            <div v-else :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">{{ item.userAnswer.join(', ') }}</div>
          </div>
        </div>

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

<script>
export default {
  data() {
    return {
      isActive: 1,
      isRotating: false,
      currentIndex: 0,
      // 正确
      rightCount: 0,
      // 错误
      wrongCount: 0,
      // 未答
      unAnsweredCount: 0,
      // 问题列表
      questionList: [
        {
          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: 'A',
          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: 2,
          question: '送配电线路架设工模拟考试',
          options: [
            {
              label: '正常工作电压作用下的电气设备',
              value: 'A'
            },
            {
              label: '电气设备的绝缘电阻',
              value: 'B'
            },
            {
              label: '电气设备的绝缘电阻',
              value: 'C'
            },
            {
              label: '电气设备的绝缘电阻',
              value: 'D'
            }
          ],
          rightAnswer: ['B', 'D'],
          userAnswer: ['B', 'D'],
          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: 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'
            }
          ],
          rightAnswer: 'A',
          userAnswer: '',
          analysis: '解析'
        }
      ],
      // 正确列表
      rightList: [],
      // 错误列表
      wrongList: [],
      // 未答列表
      unAnsweredList: [],
      list: []
    }
  },
  mounted() {
    this.getList()
    this.list = this.questionList
    this.list.forEach((item, index) => {
      if (index < 7) {
        item.isShow = true
      } else {
        item.isShow = false
      }
    })
  },
  methods: {
    getList() {
      this.questionList.forEach((item, index) => {
        if (item.type === 1 || item.type === 3) {
          if (!item.userAnswer) {
            this.unAnsweredCount++
            item.isUnAnswered = true
            // 添加正确背景色
            item.options.forEach(option => {
              option.isRight = option.value === item.rightAnswer
            })
          } else {
            if (item.rightAnswer === item.userAnswer) {
              this.rightCount++
              // 添加正确背景色
              item.isRight = true
              item.options.forEach(option => {
                option.isRight = option.value === item.rightAnswer
              })
            } else {
              this.wrongCount++
              // 添加错误背景色
              item.isWrong = true
              item.options.forEach(option => {
                option.isError = option.value === item.userAnswer
                if (option.value === item.rightAnswer) {
                  option.isRight = true
                }
              })
            }
          }
        } else {
          if (!item.userAnswer) {
            this.unAnsweredCount++
            item.isUnAnswered = true
            // 添加正确背景色
            item.options.forEach(option => {
              option.isRight = item.rightAnswer.includes(option.value)
            })
          } else {
            if (item.rightAnswer.toString() === item.userAnswer.toString()) {
              this.rightCount++
              // 添加正确背景色
              item.isRight = true
            } else {
              this.wrongCount++
              // 添加错误背景色
              item.isWrong = true
            }
          }
          // 对比用户答案和正确答案 ,如果用户当前选项与正确答案相同则添加正确背景色, 不同则添加错误背景色, 并将正确答案添加正确背景色, 需要确保每个选项只有一种状态背景色
          item.options.forEach(option => {
            if (item.rightAnswer.includes(option.value)) {
              option.isRight = true
            }
            if (item.userAnswer.includes(option.value)) {
              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)
    },
    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;
    }
  }

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