android-uniapp/pages/classes/select.vue

<template>
  <view class="container-box">
    <image alt="" class="back-class" src="/static/image/bmi/manual_icon_arrow.png" @click="goBcak()"></image>
    <text class="countdown">倒计时{{ countdown }}s</text>
    <view class="select-box">
      <view class="select-tab">
        <view v-for="(item, index) in tabs" :key="index" :class="item.type == activeTab ? `tab-active-item${index}` : `tab-item${index}`"
              class="tab-item" @click="changeTab(item)">
          <image :src="item.type == activeTab ? item.actImg : item.img" alt="" class="tab-img"></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
      <view v-if="activeTab == 'grade'" class="select-info">
        <view v-for="(item, index) in totalList" :class="item.active == true ? `info-active-item0` : `info-item0`" class="info-item"
              @click="changeGrade(item)">{{ item.name }}
        </view>
      </view>
      <view v-else-if="activeTab == 'class'" class="select-info">
        <view v-for="(item, index) in classList" :class="item.active == true ? `info-active-item1` : `info-item1`" class="info-item"
              @click="changeClass(item)">{{ item.class_name }}
        </view>
      </view>
      <view v-else-if="activeTab == 'student'" class="select-info">
        <view v-for="(item, index) in studentList" :class="item.active == true ? `info-active-item2` : `info-item2`" class="info-item"
              @click="changeStudent(item)">{{ item.jname }}
        </view>
      </view>
    </view>
    <view class="selected-box">
      <view>已选择：</view>
      <view class="selected-info">
        <view v-for="(item, index) in curSelected" :key="index">
          <text v-if="index != 0" class="selected-line">|</text>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    <view :class="curSelected.length == 3 ? 'next-btn' : 'ban-btn'" @click="navToTest">进入检测页</view>
  </view>
</template>

<script setup>
import {onActivated, onUnmounted, watch, ref, computed} from "vue";
import {onLoad, onUnload, onHide} from '@dcloudio/uni-app';
import {navTo, showToast} from "@/utils/app";
import {getTaskClassList, getTaskStudentList} from "@/api/student";

const title = ref('学生未激活')
const select = ref(0)
const selectMax = ref(1)
const totalList = ref([])
const activeTab = ref('grade')
const countdown = ref(60)
const interval = ref()
const queryForm = ref({
  student_id: 0,
})
const tabs = ref([
  {
    title: '选择年级',
    type: 'grade',
    img: '/static/image/bmi/manual_icon_grade.png',
    actImg: '/static/image/bmi/manual_icon_grade_selected.png'
  },
  {
    title: '选择班级',
    type: 'class',
    img: '/static/image/bmi/manual_icon_class.png',
    actImg: '/static/image/bmi/manual_icon_class_selected.png'
  },
  {
    title: '选择学生',
    type: 'student',
    img: '/static/image/bmi/manual_icon_student.png',
    actImg: '/static/image/bmi/manual_icon_student_selected.png'
  }
])
const selectedArr = ref([
  {name: '三年级', id: 1},
  {name: '1班', id: 2},
  {name: '11', id: 3},
])

const setCountdown = () => {
  interval.value = setInterval(() => {
    countdown.value -= 1
  }, 1000);
  if (countdown.value == 0) {
    clearInterval(interval)
    goBcak()
  }
}

watch(countdown, (newVal, oldVal) => {
  if (newVal <= 0) {
    clearInterval(interval.value)
    goBcak()
  }
})

const classList = computed(() => {
  let activeGrade = totalList.value.find(item => item.active == true)
  return activeGrade ? activeGrade.class : null
})

const studentList = computed(() => {
  let activeGrade = totalList.value.find(item => item.active == true)
  if (activeGrade && activeGrade.class) {
    let activeClass = activeGrade.class.find(item => item.active == true)
    return activeClass ? activeClass.student : null
  }
  return null
})

const curSelected = computed(() => {
  let arr = []
  let activeGrade = totalList.value.find(item => item.active == true)
  if (activeGrade) {
    arr.push(activeGrade)
    let activeClass = classList.value.find(item => item.active == true)
    if (activeClass) {
      arr.push(activeClass)
      if (studentList.value && studentList.value.length > 0) {
        let activeStudent = studentList.value.find(item => item.active == true)
        if (activeStudent) arr.push(activeStudent)
      }
    }
  }
  return arr
})

const getGradeList = async () => {
  const res = await getTaskClassList()
  const list = []
  if (res.code == 1) {
    res.data.grades.forEach(el => {
      if (!list.some(e => e.id == el.id)) {
        list.push(el);
      }
    });
  }
  totalList.value = list

  const classList = []
  for (let item of res.data.list) {
    for (let task of item.task) {
      classList.push({
        ...item,
        ...task,
        name: item.class_name
      })
    }
  }

  for (let gradeItem of totalList.value) {

    let arr = []
    for (let classItem of classList) {
      if (gradeItem.id == classItem.grade) {
        arr.push(classItem)
      }
    }
    if (arr.length > 0) gradeItem.class = arr
  }
}

const getStudent = async (item) => {
  const res = await getTaskStudentList({
    task_id: item.task_id
  })
  if (res.code == 1) {
    let list = res.data.list.map(i => {
      return {...i, name: i.jname}
    })
    totalList.value.find(item => item.active == true).class
      .find(item => item.active == true).student = list
  }


}

const changeTab = (item) => {
  activeTab.value = item.type
}

const changeGrade = (item) => {
  activeTab.value = 'class'
  for (let i of totalList.value) {
    i.active = false
  }
  item.active = true
  let classList = totalList.value.find(i => i.active == true).class
  for (let i of classList) {
    i.active = false
  }
  // getClassList()
}

const changeClass = (item) => {
  activeTab.value = 'student'
  let classList = totalList.value.find(i => i.active == true).class
  for (let i of classList) {
    i.active = false
  }
  item.active = true
  getStudent(item)
}

const changeStudent = (item) => {
  let classList = totalList.value.find(i => i.active == true).class
  let studentList = classList.find(i => i.active == true).student
  for (let i of studentList) {
    i.active = false
  }
  item.active = true
}

const goBcak = () => {
  navTo('pages/index/index', {})
}

const navToTest = () => {
  if (curSelected.value.length == 3) {
    navTo('pages/test/bmi', {
      student_id: curSelected.value[2].id,
      task_id: curSelected.value[1].task_id,
    })
  }
}


onLoad(() => {
  getGradeList()
  setCountdown()
})

onHide(() => {
  clearInterval(interval.value)
})
onUnload(() => {
  clearInterval(interval.value)
})
</script>

<style scoped>
.container-box {
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom left, rgb(218, 233, 253), #fff, rgb(218, 233, 253));
  position: relative;
  overflow: auto;
}

.back-class {
  position: absolute;
  top: 40upx;
  left: 46upx;
  width: 70upx;
  height: 70upx;
}

.countdown {
  position: absolute;
  top: 40upx;
  right: 46upx;
  font-weight: bold;
  font-size: 35upx;
  color: #2F3C42;
  line-height: 41upx;
}

.select-box {
  margin: 125upx auto 0;
  width: 680upx;
  height: 55vh;
  border-radius: 14upx;
  background: #fff;
  box-shadow: 0 0px 5px 1px #ccc;
}

.selected-box {
  margin: 25upx auto 0;
  width: 680upx;
  height: 15vh;
  line-height: 6vh;
  border-radius: 14upx;
  background: #fff;
  box-shadow: 0 0px 5px 1px #ccc;
  font-weight: bold;
  font-size: 28rpx;
  padding: 1.5vh 27upx;
  box-sizing: border-box;
  color: #0369E8;
}

.selected-info {
  display: flex;
  font-weight: 400;
  font-size: 28rpx;
  color: #2F3C42;
}

.selected-line {
  color: #ccc;
  padding: 0 10upx;
}

.next-btn {
  margin: 25upx auto 0;
  width: 389upx;
  height: 9vh;
  line-height: 9vh;
  border-radius: 14upx;
  background: #0369E8;
  color: #fff;
  font-weight: bold;
  font-size: 35rpx;
  text-align: center;
}

.ban-btn {
  margin: 25upx auto 0;
  width: 389upx;
  height: 9vh;
  line-height: 9vh;
  border-radius: 14upx;
  background: #ccc;
  color: #666;
  font-weight: bold;
  font-size: 35rpx;
  text-align: center;
}

.select-tab {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-img {
  width: 42upx;
  height: 42upx;
  margin-top: 34upx;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  text-align: center;
  height: 10vh;
  line-height: 110upx;
  font-weight: bold;
  font-size: 28rpx;
  border-top-left-radius: 14upx;
  border-top-right-radius: 14upx;
}

.tab-item0 {
  color: rgb(3, 105, 232);
  background: #fff;
}

.tab-item1 {
  color: rgb(2, 193, 124);
  background: #fff;
}

.tab-item2 {
  color: rgb(211, 121, 13);
  background: #fff;
}

.tab-active-item0 {
  background: rgb(3, 105, 232);
  color: #fff;
}

.tab-active-item1 {
  background: rgb(2, 193, 124);
  color: #fff;
}

.tab-active-item2 {
  background: rgb(211, 121, 13);
  color: #fff;
}

.select-info {
  padding: 20upx 10upx 20upx 20upx;
  display: flex;
  flex-wrap: wrap;
  height: 40vh;
  overflow: auto;
}

.info-item {
  height: 69upx;
  width: 139upx;
  border-radius: 10upx;
  font-weight: bold;
  font-size: 21upx;
  text-align: center;
  line-height: 69upx;
  margin-right: 18upx;
  margin-bottom: 18upx;
}

.info-item0 {
  background: #F1F7FF;
  color: #0369E8;
}

.info-active-item0 {
  color: #fff;
  background: #0369E8;
}

.info-item1 {
  background: #EFFFF8;
  color: rgb(2, 193, 124);
}

.info-active-item1 {
  color: #EFFFF8;
  background: rgb(2, 193, 124);
}

.info-item2 {
  background: #FFFCF5;
  color: #D3790D;
}

.info-active-item2 {
  color: #FFFCF5;
  background: #D3790D;
}
</style>