android-uniapp/pages/classes/select.vue

<template>
  <view class="container-box">
    <image src="/static/image/bmi/manual_icon_arrow.png" alt="" class="back-class" @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="tab-item"
          :class="item.type == activeTab ? `tab-active-item${index}` : `tab-item${index}`" @click="changeTab(item)">
          <image class="tab-img" :src="item.type == activeTab ? item.actImg : item.img" alt=""></image>
          <text>{{ item.title }}</text>
        </view>
      </view>
      <view class="select-info" v-if="activeTab == 'grade'">
        <view v-for="(item, index) in totalList" class="info-item" @click="changeGrade(item)"
          :class="item.active == true ? `info-active-item0` : `info-item0`">{{ item.name }}</view>
      </view>
      <view class="select-info" v-else-if="activeTab == 'class'">
        <view v-for="(item, index) in classList" class="info-item" @click="changeClass(item)"
          :class="item.active == true ? `info-active-item1` : `info-item1`">{{ item.class_name }}</view>
      </view>
      <view class="select-info" v-else-if="activeTab == 'student'">
        <view v-for="(item, index) in studentList" class="info-item" @click="changeStudent(item)"
          :class="item.active == true ? `info-active-item2` : `info-item2`">{{ 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(5)
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>