feat bmi

pages.json

@@ -33,6 +33,12 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/test/bmi",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/task/kgAndCm",
       "style": {

pages/auth/index.vue

@@ -8,6 +8,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

pages/classes/select.vue

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

pages/index/index.vue

@@ -20,7 +20,11 @@
       <!--      </view>-->
       <!--      <view class="btn btn-primary" @click="search">扫码</view>-->
       <!--      <view class="btn btn-primary" @click="next">下一页</view>-->
-      <view class="btn btn-primary" @click="toSelect">手动选择</view>
+      <view class="img-saoma-box">
+        <text class="img-saoma-text">请将卡片放进感应区</text>
+        <img src="@/static/image/bmi/img_saoma.png" alt="" class="img-saoma">
+      </view>
+      <view class="btn btn-primary hand-select" @click="toSelect">手动选择</view>
     </view>
   </view>
 </template>
@@ -150,4 +154,25 @@ onActivated(async () => {
     margin-right: 50rpx;
   }
 }
+
+.img-saoma-box{
+  display: flex;
+  flex-direction: column;
+}
+.img-saoma-text{
+  text-align: center;
+  font-weight: bold;
+  font-size: 35upx;
+  color: #2F3C42;
+  line-height: 41upx;
+  margin-bottom: 40upx;
+}
+.img-saoma{
+  width: 520upx;
+  height: 400upx;
+}
+.hand-select{
+  width: 480upx;
+  border-radius: 21upx;
+}
 </style>

pages/test/bmi.vue

@@ -0,0 +1,133 @@
+<template>
+    <view class="container-box">
+        <image src="/static/image/bmi/manual_icon_arrow.png" alt="" class="back-class" @click="goBcak()"></image>
+        <view class="info-box">
+            <view class="student-info"></view>
+            <view class="">
+                <view class="adron-box">
+                    <image src="/static/image/bmi/test_img_adron.png" alt="" class="adron" @click="goBcak()">
+                    </image>
+                    <image src="/static/image/bmi/test_img_adron.png" alt="" class="adron" @click="goBcak()">
+                    </image>
+                </view>
+                <view class="bmi-info">
+                    <view class="bmi-title">测量结果展示</view>
+                </view>
+            </view>
+        </view>
+        <view class="btn-box">
+            <view class="btn1">重新检测</view>
+            <view class="btn2">完成</view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { navTo, showToast } from "@/utils/app";
+
+export default {
+    name: "bmi",
+    methods: {
+        goBcak() {
+            navTo('pages/classes/select', {
+
+            })
+        },
+    }
+}
+</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;
+}
+
+.info-box {
+    margin: 75upx auto 0;
+    width: 680upx;
+}
+
+.student-info {
+    width: 681upx;
+    height: 25vh;
+    background: #F1F7FF;
+    box-shadow: 0upx 5upx 5upx 0upx rgba(12, 88, 183, 0.35);
+    border-radius: 28upx;
+    border: 4upx solid #FFFFFF;
+}
+
+.bmi-info {
+    width: 100%;
+    height: 50vh;
+    background: #FFFFFF;
+    border-radius: 28upx;
+}
+
+.bmi-title {
+    width: 100%;
+    height: 106upx;
+    line-height: 106upx;
+    font-weight: bold;
+    font-size: 35upx;
+    text-align: center;
+    color: #FFFFFF;
+    background: #0369E8;
+    border-radius: 28upx;
+}
+
+.adron-box {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    top: -10upx;
+}
+
+.adron {
+    width: 20upx;
+    height: 60upx;
+    margin: 0 80upx -30upx;
+}
+
+.btn-box{
+    display: flex;
+    justify-content: space-between;
+
+    width: 680upx;
+    margin: 20upx auto 0;
+}
+.btn1{
+    width: 305upx;
+height: 97upx;
+line-height: 97upx;
+background: #F1F7FF;
+border-radius: 21upx;
+border: 3upx solid #0369E8;
+font-weight: bold;
+font-size: 35rpx;
+color: #0369E8;
+text-align: center;
+}
+.btn2{
+    width: 305upx;
+height: 97upx;
+line-height: 97upx;
+background: #0369E8;
+border-radius: 21upx;
+font-weight: bold;
+font-size: 35rpx;
+color: #FFFFFF;
+text-align: center;
+}
+</style>