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.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.name }}</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, onMounted, reactive, ref, computed } from "vue";
import { onLoad } from '@dcloudio/uni-app';
import { navTo, showToast } from "@/utils/app";

const title = ref('学生未激活')
const select = ref(0)
const selectMax = ref(1)
const totalList = ref([])
const activeTab = ref('grade')
const countdown = ref(60)
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 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)
      let activeStudent = studentList.value.find(item => item.active == true)
      if (activeStudent) arr.push(activeStudent)
    }
  }
  return arr
})

const getGradeList = () => {
  totalList.value = [
    { name: '一年级', id: 1 },
    { name: '二年级', id: 2 },
    { name: '二年级', id: 3 },
    { name: '二年级', id: 4 },
    { name: '二年级', id: 5 },
    { name: '二年级', id: 6 },
    { name: '二年级', id: 7 },
  ]
}

const getClassList = () => {
  totalList.value.find(item => item.active == true).class = [
    { name: '一班', id: 1 },
    { name: '二班', id: 3 },
    { name: '三班', id: 4 },
    { name: '四班', id: 5 },
    { name: '五班', id: 6 },
    { name: '六班', id: 7 },
  ]
}

const getStudent = () => {
  totalList.value.find(item => item.active == true).class
    .find(item => item.active == true).student = [
      { name: '11', id: 1 },
      { name: '22', id: 3 },
      { name: '33', id: 4 },
      { name: '44', id: 5 },
      { name: '55', id: 6 },
      { name: '66', id: 7 },
    ]
}

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
  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()
}

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', {

    })
  }
}


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

// 挂载完成之后
onMounted(() => {
})
</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: 110upx;
  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;
  display: flex;
  flex-wrap: wrap;
}

.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>