nxdt-uniapp/pages/component/TrainingExam.vue

<template>
  <div>
    <div class="content">
      <ProSelect v-if="this.userType != '00'" @selectPro="selectPro" />
    </div>
    <div class="title">
      <div class="title-text">
        <div class="item" :class="{ active: active == 1 }" @click="handleTitle(1)">{{ title[0] }}</div>
        <div :class="{ active: active == 2 }" @click="handleTitle(2)">{{ title[1] }}</div>
      </div>
    </div>
    <div class="content">
      <div v-if="list.length > 0">
        <div class="list" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
          <u-icon class="list-icon" :name="icon" size="28" />
          <div>
            <div class="item">
              {{ item.name }}
              <span v-if="active == 2 && !isTraining" style="margin-left: 20px">{{ item.score }}分</span>
            </div>
            <div class="item">{{ item.time }}</div>
          </div>
        </div>
      </div>
      <u-divider text="暂无数据" v-else></u-divider>
    </div>
  </div>
</template>

<script>
import { getTrainingList, getExamList } from '@/api/educationTraining'
import ProSelect from 'pages/component/Proselect'

export default {
  props: {
    title: {
      type: Array,
      default: () => []
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    isTraining: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: 'scan'
    }
  },
  components: { ProSelect },
  data() {
    return {
      active: 1,
      userId: uni.getStorageSync('userInfo').userId,
      list: [],
      userType: uni.getStorageSync('userInfo').userType, // 用户类型
      proId: ''
    }
  },
  methods: {
    // 点击标题
    handleTitle(index) {
      this.active = index
      this.getList()
      if (this.active == 1) {
        console.log('待培训')
      } else {
        console.log('培训记录')
      }
    },
    // 点击列表项
    handleItem(item) {
      console.log('item', item)
      const startDate = item.time.split(' ~ ')[0]
      const endDate = item.time.split(' ~ ')[1]
      const now = new Date().getTime()
      if (this.isTraining) {
        if (this.active == 1) {
          if (now < new Date(startDate).getTime() || now > new Date(endDate).getTime()) {
            uni.showToast({
              title: '不在培训期限内',
              icon: 'none'
            })
            return
          }
          // 培训详情
          uni.navigateTo({
            url: '/pages/myTraining/trainingDetails?id=' + item.id
          })
        } else {
          // 培训详情
          uni.navigateTo({
            url: '/pages/myTraining/trainingDetails?id=' + item.id
          })
        }
      } else {
        if (this.active == 1) {
          if (now < new Date(startDate).getTime() || now > new Date(endDate).getTime()) {
            uni.showToast({
              title: '不在考试期限内',
              icon: 'none'
            })
            return
          }
          const params = { ...item, isStudyTask: false }
          // 考试详情
          uni.navigateTo({
            url: '/pages/myExam/beforeExamExplain?params=' + JSON.stringify(params)
          })
        }
      }
    },
    // 获取列表数据
    async getList() {
      this.list = []
      if (this.isTraining) {
        console.log('培训-数据')
        const params = {
          userId: this.userId,
          type: this.active,
          userType: this.userType || '',
          proId: this.proId || ''
        }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await getTrainingList(params)
        console.log('🚀 ~ getList ~ res-培训数据:', res)
        this.list = res.data
      } else {
        console.log('考试-数据')
        const params = {
          type: this.active,
          practiceType: 3,
          proId: this.proId || '',
          userType: this.userType || ''
        }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await getExamList(params)
        console.log('🚀 ~ getList ~ res-考试数据:', res)
        this.list = res.data
      }
    },
    // 选择工程
    selectPro(pro) {
      console.log('🚀 ~ selectPro ~ 选择工程:', pro)
      this.proId = pro.proId
      this.getList()
      // this.getLearningTaskList({ proId: pro.proId, userType: pro.userType })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  font-size: 12px;
  .list {
    margin: 10px 0;
    height: 75px;
    background: #f4f9fe;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .list-icon {
      margin: 0 10px;
    }

    .item {
      margin: 10px 0;
      // 第一个item
      &:first-child {
        font-size: 13px;
        font-weight: bold;
        color: #333;
      }
      &:last-child {
        font-size: 12px;
        color: #555;
      }
    }
  }
}
.title {
  height: 80px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: linear-gradient(96deg, #E0F1F7 0%, #F2FDF0 100%); */
  .title-text {
    font-size: 16px;
    font-weight: bold;
    color: #9ea2ac;
    display: flex;
    align-items: center;

    .item {
      margin-right: 30px;
    }
  }
}
.active {
  color: #333;
  font-size: 25px;
  font-weight: bold;
}
</style>