nxdt-uniapp/pages/myExercise/index.vue

<template>
  <view>
    <Navbar title="自主练习" :showHome="true" />
    <div class="content">
      <!-- 搜索 -->
      <u-search placeholder="请输入课程名称" v-model="courseName" :showAction="false" @blur="handleSearch"></u-search>
      <div class="list-wrapper" v-for="(item, index) in tabDataList" :key="index">
        <div class="list-item">题库名称: {{ item.name }}</div>
        <div class="list-item">题目数: {{ item.questionNum }}</div>
        <div v-if="Number(item.correctNum) + Number(item.errorNum) > 0">
          <div>练习结果:</div>
          <div style="display: flex; justify-content: space-between">
            <div>练习数：{{ Number(item.correctNum) + Number(item.errorNum) }}</div>
            <div>正确数：{{ item.correctNum || 0 }}</div>
            <div>错误数：{{ item.errorNum || 0 }}</div>
          </div>
          <div>上次练习用时：{{ item.practiceTime2 }}</div>
        </div>
        <!-- <div class="list-item tag-list">
          <u-tag
            v-for="(tag, tagIndex) in item.tagList"
            :text="tag"
            size="mini"
            plain
            style="margin-right: 5px"
          ></u-tag>
        </div> -->
        <!-- 按钮 -->
        <div class="btns">
          <div
            class="btn"
            v-show="Number(item.correctNum) + Number(item.errorNum) == 0 || (!item.correctNum && !item.errorNum)"
          >
            <u-button type="primary" size="small" shape="circle" plain @click="goExercises(item, '2')">
              开始练习
            </u-button>
          </div>
          <div class="btn" v-show="item.lastPracticeQuestionId">
            <u-button type="primary" size="small" shape="circle" plain @click="goExercises(item, '1')">
              继续练习
            </u-button>
          </div>
          <div class="btn" v-show="Number(item.correctNum) + Number(item.errorNum) > 0">
            <u-button type="primary" size="small" shape="circle" plain @click="goExercises(item, '2')">
              重新练习
            </u-button>
          </div>
          <div class="btn" v-show="item.errorNum && item.errorNum > 0">
            <u-button type="primary" size="small" shape="circle" plain @click="goExercises(item, '3')">
              错题练习
            </u-button>
          </div>
        </div>
      </div>
      <u-divider text="暂无数据" v-if="tabDataList.length == 0"></u-divider>
    </div>
  </view>
</template>

<script>
import { getAutoPracticeList } from '@/api/educationTraining'

export default {
  data() {
    return {
      courseName: '', // 课程名称
      // 列表数据
      tabDataList: []
    }
  },
  onShow() {
    this.$nextTick(() => {
      console.log('onShow-自主练习')
      this.getList()
    })
  },
  methods: {
    handleSearch() {
      console.log('搜索课程：', this.courseName)
      this.getList()
    },
    // 获取自主练习列表
    async getList() {
      this.tabDataList = []
      const params = {
        name: this.courseName
      }
      const res = await getAutoPracticeList(params)
      console.log('🚀 ~ getList ~ 自主练习:', res)
      if (res.code === 200) {
        this.tabDataList = res.data
        this.tabDataList.forEach(item => {
          if (item.practiceTime) {
            const time = item.practiceTime
            const hour = Math.floor(time / 3600)
              .toString()
              .padStart(2, '0')
            const minute = Math.floor((time % 3600) / 60)
              .toString()
              .padStart(2, '0')
            const second = (time % 60).toString().padStart(2, '0')
            item.practiceTime2 = `${hour}:${minute}:${second}`
          }
        })
      }
    },
    // 跳转练习
    goExercises(item, type) {
      console.log('type', item, type)
      const params = {
        ...item,
        practiceId: item.id,
        practiceType: type,
        isAutoExercises: true
      }
      console.log('🚀 ~ goExercises ~ params:', params)
      uni.navigateTo({
        url: '/pages/myExercise/exercises?params=' + JSON.stringify(params)
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 20px;
}
.list-wrapper {
  margin-top: 10px;
  padding: 10px;
  background-color: #fbfbfb;
  border-radius: 5px;
  word-wrap: break-word;
  word-break: break-all;
  .list-item {
    margin-bottom: 5px;
  }
  .tag-list {
    display: flex;
    flex-wrap: wrap;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    .btn {
      margin-left: 10px;
      width: 70px;
    }
  }
}
</style>