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>
import { navTo, showToast } from "@/utils/app";
export default {
  data() {
    return {
      title: '学生未激活',
      select: 0,
      selectMax: 1,
      queryForm: {
        student_id: 0,
      },
      totalList: [],
      activeTab: 'grade',
      tabs: [
        { 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' }
      ],
      countdown: 60,
      selectedArr: [
        { name: '三年级', id: 1 },
        { name: '1班', id: 2 },
        { name: '11', id: 3 },
      ]
    }
  },
  computed: {
    classList() {
      let activeGrade = this.totalList.find(item => item.active == true)
      return activeGrade ? activeGrade.class : null
    },
    studentList() {
      let activeGrade = this.totalList.find(item => item.active == true)
      if (activeGrade.class) {
        let activeClass = activeGrade.class.find(item => item.active == true)
        return activeClass ? activeClass.student : null
      }
      return null
    },
    curSelected() {
      let arr = []
      let activeGrade = this.totalList.find(item => item.active == true)
      if (activeGrade) {
        arr.push(activeGrade)
        let activeClass = this.classList.find(item => item.active == true)
        if (activeClass) {
          arr.push(activeClass)
          let activeStudent = this.studentList.find(item => item.active == true)
          if (activeStudent) arr.push(activeStudent)
        }
      }
      return arr
    },
  },
  onLoad() {
    this.getGradeList()
  },
  methods: {
    getGradeList() {
      this.totalList = [
        { name: '一年级', id: 1 },
        { name: '二年级', id: 2 },
        { name: '二年级', id: 3 },
        { name: '二年级', id: 4 },
        { name: '二年级', id: 5 },
        { name: '二年级', id: 6 },
        { name: '二年级', id: 7 },
      ]
      console.log(this.totalList[0])
    },
    getClassList() {
      this.totalList.find(item => item.active == true).class = [
        { name: '一班', id: 1 },
        { name: '二班', id: 3 },
        { name: '三班', id: 4 },
        { name: '四班', id: 5 },
        { name: '五班', id: 6 },
        { name: '六班', id: 7 },
      ]
    },
    getStudent() {
      this.totalList.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 },
        ]
    },
    changeTab(item) {
      this.activeTab = item.type
    },
    changeGrade(item) {
      this.activeTab = 'class'
      for (let i of this.totalList) { i.active = false }
      item.active = true
      this.getClassList()
    },
    changeClass(item) {
      this.activeTab = 'student'
      let classList = this.totalList.find(i => i.active == true).class
      for (let i of classList) { i.active = false }
      item.active = true
      this.getStudent()
    },
    changeStudent(item) {
      let classList = this.totalList.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
    },
    goBcak() {
      navTo('pages/index/index', {

      })
    },
    navToTest() {
      if (this.curSelected.length == 3) {
        navTo('pages/test/bmi', {

        })
      }
    },
  }
}
</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>