YNUtdPlatform/pages/YNEduApp/prac/prac.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="status">{{ item.alreadyNum > 0 ? '已练习' : '未练习' }}</div>
        </div>
        <div class="time">练习时长 {{ item.practiceDuration }}</div>
        <div class="count-total">
          <div class="count">共{{ item.allQuestionNum || 0 }}题, 已练习{{ item.alreadyNum || 0 }}题</div>
        </div>
        <div class="bt-wrapper">
          <div class="score">完成率：{{ item.completionRate }}</div>
          <div class="btn-wrapper">
            <div class="btn" @click="handleExercise(item)">开始练习</div>
            <div class="btn" @click="handleError(item)">错题消除({{ item.missNum }})</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 { getStudentPracticeList } from '@/api/eduApp'

export default {
  data() {
    return {
      tabList: [{ name: '全部' }, { name: '待练习' }, { name: '已练习' }],
      activeIndex: 0,
      list: [],
      // 全部列表
      allList: [],
      // 待练习列表
      waitList: [],
      // 已练习列表
      alreadyList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const params = {
        userId: 31,
        source: 1
      }
      const res = await getStudentPracticeList(params)
      this.list = this.allList = res.data
      // 根据 alreadyNum 字段判断待练习和已练习
      this.waitList = res.data.filter(item => item.alreadyNum === 0)
      this.alreadyList = res.data.filter(item => item.alreadyNum > 0)
      // console.log('🚀 ~ getList ~ res:', res)
    },
    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
      }
    },
    // 开始练习
    handleExercise(item) {
      const params = {
        practiceId: item.id,
        title: item.name,
      }
      uni.navigateTo({
        url: '/pages/YNEduApp/prac/pracDetail?params=' + JSON.stringify(params)
      })
      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/prac/prac')
    },
    leftClick() {
      uni.navigateTo({
        url: '/pages/YNEduApp/index/index'
      })
    },
    // 错题消除
    handleError(item) {
      const params = {
        practiceId: item.id,
        recordId: item.recordId,
        isError: true
      }
      uni.navigateTo({
        url: '/pages/YNEduApp/prac/exercises?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>