YNUtdPlatform/pages/YNEduApp/exam/examinationDetails.vue

<template>
  <view class="wrapper">
    <div class="arrow-left">
      <u-icon name="arrow-left" size="20" color="#fff" @click="handleArrow" />
    </div>
    <div class="result">
      <div class="result-item">{{ result }}</div>
      <div class="result-tip">最新记录</div>
    </div>

    <div class="center-container">
      <div class="top-wrapper">
        <div class="item">
          <div>{{ scoreRate }}</div>
          <div class="tip">得分</div>
        </div>
        <div class="item">
          <div>{{ rightRate }}%</div>
          <div class="tip">正确率</div>
        </div>
        <div class="item">
          <div>{{ answerTime }}分钟</div>
          <div class="tip">作答用时</div>
        </div>
      </div>
      <div class="bottom-wrapper">
        <div class="item">总分：{{ totalScore }}</div>
        <div class="item">及格分：{{ passScore }}</div>
        <div class="item">考试时长：{{ duration }}分钟</div>
        <div class="item">试题：{{ questionCount }}</div>
      </div>
    </div>

    <div class="bottom-container">
      <h2 class="title">榜上有名</h2>
      <div class="title-tab">
        <div>排名</div>
        <div>姓名/部门</div>
        <div>得分</div>
        <div>得分率</div>
      </div>

      <div v-for="(item, index) in rankList" :key="index" class="rank-list">
        <div class="icon">
          <u-icon :name="iconLit[index]" size="30" />
          <u-avatar src="/static/images/user.png" size="40" />
        </div>
        <div>{{ `${item.userName}/${item.orgName}` }}</div>
        <div>{{ item.examGrade }}</div>
        <div>{{ item.gradeAverage }}</div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-btn">
      <!-- <div class="btn">
        <u-button
          size="small"
          shape="circle"
          text="考试记录"
          style="color: #1989fa; border-color: #1989fa"
          @click="handleExamination"
        />
      </div> -->
      <div class="btn">
        <u-button type="primary" size="small" shape="circle" text="重新考试" @click="handleResetExamination" />
      </div>
    </div>
  </view>
</template>

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

export default {
  data() {
    return {
      examId: '',
      result: '不及格',
      // 得分
      scoreRate: '',
      // 正确率
      rightRate: '60%',
      // 作答用时
      answerTime: '',
      // 总分
      totalScore: 100,
      // 及格分
      passScore: 60,
      // 考试时长
      duration: 0,
      // 试题
      questionCount: 0,
      // 考试次数
      examNum: 0,
      examCount: '', // 考试次数 1: 不限次 2: 及格终止 3: 自定义
      examCustom: 0, // 自定义次数
      results: 0, // 考试结果
      studyId: '',
      iconLit: ['/static/images/top-one.png', '/static/images/top-two.png', '/static/images/top-three.png'],
      // 榜上有名 - 列表
      rankList: []
    }
  },
  onLoad(opt) {
    opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ opt:', opt)
    this.examId = opt.examId
    this.result = opt.examResult == 1 ? '及格' : '不及格'
    this.scoreRate = opt.examGrade
    this.rightRate = opt.gradeAverage
    this.answerTime = opt.answerTime
    this.duration = opt.examTime
    this.questionCount = opt.questionCount
    this.examNum = opt.examNum
    this.examCount = opt.examCount
    this.examCustom = opt.examCustom
    this.results = opt.results
    this.studyId = opt.studyId || ''
    this.totalScore = opt.score || 100
    this.passScore = opt.passScore || 60
  },
  mounted() {
    this.getExamRankById()
  },
  methods: {
    // handleExamination() {
    //   uni.navigateTo({
    //     url: '/pages/YNEduApp/exam/examinationList'
    //   })
    // },
    // 重新考试
    handleResetExamination() {
      let from = ''
      if (this.studyId) {
        from = '/pages/YNEduApp/learnProj/learnProjDetail?id=' + this.studyId
      } else {
        from = '/pages/YNEduApp/exam/exam'
      }

      // examCount 1: 不限次 2: 及格终止 3: 自定义
      if (this.examCount == 2 && this.results == 1) {
        uni.showToast({
          title: '此考试及格终止, 考试以及格, 无需再次考试',
          icon: 'none'
        })
        setTimeout(() => {
          uni.reLaunch({
            url: from
          })
        }, 1000)
      } else if (this.examCount == 3 && this.examNum >= this.examCustom) {
        uni.showToast({
          title: '此考试有次数限制, 考试次数已达上限, 无法再考试了',
          icon: 'none'
        })
        setTimeout(() => {
          uni.reLaunch({
            url: from
          })
        }, 1000)
      } else {
        const params = {
          examId: this.examId,
          examNum: this.examNum,
          examCount: this.examCount,
          examCustom: this.examCustom,
          switchCount: this.switchCount,
          studyId: this.studyId
        }
        console.log('🚀 ~ handleResetExamination ~ params:', params)
        uni.navigateTo({
          url: `/pages/YNEduApp/exam/examination?params=${JSON.stringify(params)}`
        })
      }
    },
    handleArrow() {
      let from = ''
      if (this.studyId) {
        from = '/pages/YNEduApp/learnProj/learnProjDetail?id=' + this.studyId
      } else {
        from = '/pages/YNEduApp/exam/exam'
      }
      console.log('🚀 ~ handleArrow ~ from:', from)
      uni.navigateTo({
        url: from
      })
    },
    // 获取考试排名
    async getExamRankById() {
      const params = {
        examId: this.examId
      }
      // const res = await getExamRankById(params)
      // this.rankList = res.data
      uni.request({
        url: config.baseUrl + '/exam-student/studentExam/getExamRankById',
        method: 'post',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: uni.getStorageSync('access_token')
        },
        success: res => {
          console.log('🚀 ~ getExamRankById ~ res:', res)
          res = res.data
          this.rankList = res.data.slice(0, 3)
        },
        fail: err => {
          console.log(err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  background: url('/static/images/examine-detail-bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .arrow-left {
    position: fixed;
    top: 50px;
    left: 20px;
    z-index: 99;
  }

  .result {
    overflow: hidden;
    width: 180.5px;
    height: 118.6px;
    background: url('/static/images/result-bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 9;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    transform: translateY(40px);

    .result-item {
      font-size: 24px;
      font-weight: bold;
    }

    .result-tip {
      font-size: 12px;
      margin-top: 5px;
    }
  }

  .center-container {
    margin: 0 10px;
    width: calc(100% - 20px);
    height: 250px;
    background: #e8f2fe;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .top-wrapper {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      margin: 0 10px;

      .item {
        margin-top: 25px;
        width: 142px;
        height: 73px;
        background: #fff;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 800;
        font-size: 20px;
        color: #08428d;

        .tip {
          font-weight: 400;
          font-size: 12px;
        }
      }
    }

    .bottom-wrapper {
      font-size: 12px;
      color: #a1a1a1;
      display: flex;
      justify-content: space-between;
      .item {
        margin: 0 5px;
      }
    }
  }

  .bottom-container {
    margin-top: 10px;
    width: calc(100% - 20px);
    height: 285px;
    background: #e8f2fe;
    border-radius: 20px;

    .title {
      font-weight: 800;
      font-size: 20px;
      color: #08428d;
      margin: 15px auto;
      text-align: center;
    }

    .title-tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #a1a1a1;
      margin: 0 10px;
      > div {
        width: 25%;
        text-align: center;
      }
    }

    .rank-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #333;
      margin: 20px 10px;
      > div {
        width: 25%;
        text-align: center;
      }

      .icon {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

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

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