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