|
|
@@ -1,8 +1,43 @@
|
|
|
<template>
|
|
|
- <view class=""></view>
|
|
|
+ <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 {
|
|
|
@@ -12,15 +47,312 @@ export default {
|
|
|
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: {}
|
|
|
+ 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 lang="scss" scoped>
|
|
|
+<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>
|
