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.title }}</div>
        <div class="name-status">
          <div class="name">
            {{ item.name }}
            <div class="name-sub">指派</div>
          </div>
          <div class="status">{{ item.status }}</div>
        </div>
        <div class="time">{{ item.time }}</div>
        <div class="count-total">
          <div class="count">练习{{ item.count }}次</div>
          <div class="total">总分：{{ item.total }}</div>
        </div>
        <div class="bt-wrapper">
          <div class="score">得分：{{ item.score }}</div>
          <div class="btn" @click="handleExercise(item.id)">开始练习</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>
export default {
  data() {
    return {
      tabList: [{ name: '全部' }, { name: '待练习' }, { name: '已练习' }],
      activeIndex: 0,
      list: [],
      // 全部列表
      allList: [
        {
          id: 1,
          // 标题
          title: '送配电线路架设(初级)',
          // 姓名
          name: '张三',
          // 状态
          status: '待练习',
          // 练习时间
          time: '2020-12-12 12:00',
          // 练习次数
          count: 1,
          // 总分数
          total: '--',
          // 得分
          score: '暂无'
        },
        {
          id: 2,
          // 标题
          title: '送配电线路架设(初级)',
          // 姓名
          name: '张三',
          // 状态
          status: '待练习',
          // 练习时间
          time: '2020-12-12 12:00',
          // 练习次数
          count: 1,
          // 总分数
          total: '--',
          // 得分
          score: '暂无'
        }
      ],
      // 待练习列表
      waitList: [],
      // 已练习列表
      alreadyList: []
    }
  },
  mounted() {
    this.list = this.allList
  },
  methods: {
    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(id) {
      uni.navigateTo({
        url: '/pages/YNEduApp/prac/pracDetail?id=' + id
      })
      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/prac/prac')
    },
    leftClick() {
      uni.navigateTo({
        url: '/pages/YNEduApp/index/index'
      })
    }
  }
}
</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 {
        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>