YNUtdPlatform/pages/YNEduApp/exam/exam.vue

<template>
  <view>
    <u-navbar title="考试" @leftClick="leftClick" placeholder />
    <div class="tab-wrapper">
      <div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="handleTab(item, index)">
        <div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
          {{ item.name }}
        </div>
        <div :class="{ 'tab-line': activeIndex === index }"></div>
      </div>
    </div>
    <div class="content">
      <div v-for="(item, index) in list" :key="index" class="item-wrapper">
        <div class="title">{{ item.name }}</div>
        <div class="name-status">
          <div class="name">
            {{ item.userName }}
            <div class="name-sub">指派</div>
          </div>
          <div class="status">{{ item.status == 2 ? '已考试' : '未考试' }}</div>
        </div>
        <div class="time">{{ item.validityDate }}</div>
        <div class="count-total">
          <div class="count">考试{{ item.examNum }}次</div>
          <div class="total">总分：{{ item.passScore }}</div>
        </div>
        <div class="bt-wrapper">
          <div class="score">得分：{{ item.examScore }}</div>
          <div v-if="item.examNum == 0" class="btn" @click="handleExamination(item)">开始考试</div>
          <div v-else class="btn-wrapper">
            <div class="btn" @click="handleExamDataList(item)">考试数据</div>
            <div class="btn" @click="handleExamination(item)">重新考试</div>
          </div>
        </div>
      </div>

      <!-- 暂无数据 -->
      <div class="no-data" v-if="list.length == 0">
        <image src="/static/images/zanwuneirong.png" mode="aspectFit" />
        <view class="no-data-text">暂无内容</view>
      </div>
    </div>
  </view>
</template>

<script>
import { getStudentExamList } from '@/api/eduApp/index'

export default {
  data() {
    return {
      tabList: [{ name: '全部' }, { name: '待考' }, { name: '已考' }, { name: '缺考' }],
      activeIndex: 0,
      list: [],
      // 全部列表
      allList: [],
      // 待考列表
      waitList: [],
      // 已考列表
      alreadyList: [],
      // 缺考列表
      absentList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        userId: 31,
        source: 1
      }
      const res = await getStudentExamList(params)
      // 根据 status 区分
      this.list = this.allList
      this.allList = this.list = res.data
      this.waitList = res.data.filter(item => item.status === 1)
      this.alreadyList = res.data.filter(item => item.status === 2)
    },
    handleTab(item, index) {
      this.activeIndex = index
      if (index === 0) {
        this.list = this.allList
      } else if (index === 1) {
        this.list = this.waitList
      } else if (index === 2) {
        this.list = this.alreadyList
      } else if (index === 3) {
        this.list = this.absentList
      }
    },
    // 开始考试
    handleExamination(item) {
      // examCount 1: 不限次 2: 及格终止 3: 自定义
      if (item.examCount == 2 && item.results == 1) {
        uni.showToast({
          title: '此考试及格终止, 考试以及格, 无需再次考试',
          icon: 'none'
        })
        return
      } else if (item.examCount == 3 && item.examNum >= item.examCustom) {
        uni.showToast({
          title: '此考试有次数限制, 考试次数已达上限, 无法再考试了',
          icon: 'none'
        })
        return
      }
      const params = {
        id: item.id, // 试卷id
        name: item.name, // 试卷名称
        validityDate: item.validityDate, // 考试期限
        cutNum: item.cutNum, // 切屏次数
        responseTime: item.responseTime, // 考试时长
        examNum: item.examNum, // 考试次数
        examCount: item.examCount, // 考试次数类型
        examCustom: item.examCustom // 自定义考试次数
      }
      uni.navigateTo({
        url: `/pages/YNEduApp/exam/beforeExam?params=${JSON.stringify(params)}`
      })
      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/exam/exam')
    },
    leftClick() {
      uni.navigateTo({
        url: '/pages/YNEduApp/index/index'
      })
    },
    // 考试数据
    handleExamDataList(item) {
      console.log('🚀 ~ handleExamDataList ~ item:', item)
      const params = {
        examId: item.id,
      }
      uni.navigateTo({
        url: `/pages/YNEduApp/exam/examinationList?params=${JSON.stringify(params)}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-wrapper {
  display: flex;
  justify-content: space-around;
  /* background: #fff; */
  margin-bottom: 10px;

  .tab-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .tab-line {
      margin-top: 5px;
      width: 30%;
      height: 2px;
      background-color: #409eff;
      transition: width 0.3s;
    }
  }
}
.content {
  padding: 0 10px;
  .item-wrapper {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    .title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .name-status {
      display: flex;
      justify-content: space-between;
      .name {
        display: flex;
        .name-sub {
          margin-left: 5px;
          color: #999;
        }
      }
      .status {
        color: #409eff;
      }
    }
    .time {
      color: #999;
      margin-top: 10px;
    }
    .count-total {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .count {
        color: #999;
      }
      .total {
        color: #999;
      }
    }
    .bt-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      .score {
        color: #999;
      }
      .btn-wrapper {
        display: flex;
      }
      .btn {
        margin-left: 5px;
        padding: 5px 10px;
        background: #409eff;
        color: #fff;
        border-radius: 5px;
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
    .no-data-text {
      margin-top: 10px;
      color: #999;
    }
  }
}
</style>