feat bmi

pages/classes/select.vue

@@ -69,7 +69,7 @@ export default {
     },
     studentList() {
       let activeGrade = this.totalList.find(item => item.active == true)
-      if (activeGrade.class) {
+      if (activeGrade && activeGrade.class) {
         let activeClass = activeGrade.class.find(item => item.active == true)
         return activeClass ? activeClass.student : null
       }

pages/test/bmi.vue

@@ -4,17 +4,17 @@
         <view class="info-box">
             <view class="student-card">
                 <view class="student-box1">
-                    <image class="head-img" src="/static/image/bmi/test_img_head_gril.png">
+                    <image class="head-img" :src="student_info.sex == 1 ? '/static/image/bmi/test_img_head_boy.png' : '/static/image/bmi/test_img_head_gril.png'">
                     </image>
                     <view class="student-info1">
                         <view class="student-info11">
                             <view class="student-info111">
-                                <view>张珊珊</view>
-                                <image class="sex-img" src="/static/image/bmi/test_icon_gril.png"></image>
+                                <view>{{student_info.name}}</view>
+                                <image class="sex-img" :src="student_info.sex == 1 ? '/static/image/bmi/test_icon_boy.png' : '/static/image/bmi/test_icon_gril.png'"></image>
                             </view>
-                            <view class="student-num">编号：1212456</view>
+                            <view class="student-num">编号：{{ student_info.number }}</view>
                         </view>
-                        <view class="student-info12">一年3班</view>
+                        <view class="student-info12">{{ student_info.class }}</view>
                     </view>
                 </view>
                 <view class="student-info2">
@@ -32,20 +32,41 @@
             </view>
             <view class="">
                 <view class="adron-box">
-                    <image src="/static/image/bmi/test_img_adron.png" alt="" class="adron" @click="goBcak()">
+                    <image src="/static/image/bmi/test_img_adron.png" class="adron">
                     </image>
-                    <image src="/static/image/bmi/test_img_adron.png" alt="" class="adron" @click="goBcak()">
+                    <image src="/static/image/bmi/test_img_adron.png" class="adron">
                     </image>
                 </view>
-                <view class="bmi-info">
-                    <view class="bmi-title">测量结果展示</view>
+                <view class="test-box">
+                    <view class="test-title">测量结果展示</view>
+                    <view class="test-info">
+                        <view class="test-item">
+                            <view class="test-item1">
+                                <image src="/static/image/bmi/test_icon_hight.png" class="test-item-img"></image>
+                                <text>身高（cm）</text>
+                            </view>
+                            <view v-if="isFinish" class="test-item2">160</view>
+                            <view v-else class="wait-test-item2">待检测</view>
+                        </view>
+                        <view class="test-item">
+                            <view class="test-item1">
+                                <image src="/static/image/bmi/test_icon_kg.png" class="test-item-img"></image>
+                                <text>体重（kg）</text>
+                            </view>
+                            <view v-if="isFinish" class="test-item2">160</view>
+                            <view v-else class="wait-test-item2">待检测</view>
+                        </view>
+                    </view>
                 </view>
             </view>
         </view>
-        <view class="btn-box">
+        <view class="btn-box" v-if="isFinish">
             <view class="btn1">重新检测</view>
             <view class="btn2">完成</view>
         </view>
+        <view class="btn-box2" v-else>
+            <view class="btn3">去检测</view>
+        </view>
     </view>
 </template>
 
@@ -54,6 +75,17 @@ import { navTo, showToast } from "@/utils/app";
 
 export default {
     name: "bmi",
+    data() {
+        return {
+            student_info:{
+                name: '张珊珊',
+                sex: 2,
+                number: 123456,
+                class: '一年三班'
+            },
+            isFinish: false
+        }
+    },
     methods: {
         goBcak() {
             navTo('pages/classes/select', {
@@ -89,7 +121,7 @@ export default {
 .student-card {
     width: 680upx;
     height: 28vh;
-    padding: 3vh 30upx ;
+    padding: 2vh 30upx;
     background: #F1F7FF;
     box-shadow: 0upx 5upx 5upx 0upx rgba(12, 88, 183, 0.35);
     border-radius: 28upx;
@@ -97,89 +129,107 @@ export default {
     box-sizing: border-box;
 }
 
-.student-box1{
+.student-box1 {
     width: 600upx;
     height: 14vh;
     display: flex;
 }
-.student-info1{
+
+.student-info1 {
     flex: 1;
     padding: 20upx 0 20upx 20upx;
 }
-.student-info11{
+
+.student-info11 {
     display: flex;
     justify-content: space-between;
     width: 100%;
 }
-.student-info111{
+
+.student-info111 {
     display: flex;
     justify-content: space-between;
 }
-.student-info111 view{
+
+.student-info111 view {
     font-weight: bold;
-font-size: 35rpx;
-color: #2F3C42;
+    font-size: 35rpx;
+    color: #2F3C42;
 }
-.student-num{
+
+.student-num {
     width: 168upx;
-height: 45upx;
-line-height: 45upx;
-background: #E2EBFF;
-border-radius: 28upx;
-font-weight: 400;
-font-size: 21rpx;
-color: #0369E8;
-text-align: center;
-}
-.student-info12{
+    height: 45upx;
+    line-height: 45upx;
+    background: #E2EBFF;
+    border-radius: 28upx;
+    font-weight: 400;
+    font-size: 21rpx;
+    color: #0369E8;
+    text-align: center;
+    padding: 0 5upx;
+    box-sizing: border-box;
+}
+
+.student-info12 {
     font-size: 21upx;
-color: #0369E8;
+    color: #0369E8;
+    padding-top: 10upx;
 }
-.head-img{
+
+.head-img {
     width: 125upx;
     height: 125upx;
     border-radius: 50%;
     border: #E2EBFF solid 5upx;
 }
-.sex-img{
-    width: 37.5upx;
-    height: 37.5upx;
-    border-radius: 50%; 
+
+.sex-img {
+    width: 35upx;
+    height: 35upx;
+    margin-top: 5upx;
+    margin-left: 10upx;
+    border-radius: 50%;
 }
-.student-info2{
+
+.student-info2 {
     width: 100%;
     height: 108upx;
     display: flex;
     justify-content: space-between;
 
 }
-.student-info2 view{
+
+.student-info2 view {
     width: 290upx;
     background: #E2EBFF;
     border-radius: 28upx;
     height: 108upx;
     display: flex;
-    padding:20upx 25upx;
+    padding: 20upx 25upx;
     box-sizing: border-box;
 }
-.student-info2 image{
+
+.student-info2 image {
     width: 68upx;
     height: 68upx;
 }
-.student-info2 text{
+
+.student-info2 text {
     font-weight: bold;
-font-size: 21rpx;
-color: #0369E8;
-line-height: 7vh;
+    font-size: 21rpx;
+    color: #0369E8;
+    line-height: 68upx;
 }
-.bmi-info {
+
+.test-box {
     width: 100%;
     height: 50vh;
     background: #FFFFFF;
     border-radius: 28upx;
 }
 
-.bmi-title {
+.test-title {
     width: 100%;
     height: 106upx;
     line-height: 106upx;
@@ -191,6 +241,54 @@ line-height: 7vh;
     border-radius: 28upx;
 }
 
+.test-info {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    height: calc(50vh - 106upx);
+}
+
+.test-item {
+    width: 600upx;
+    height: 150upx;
+    line-height: 150upx;
+    background: #F1F7FF;
+    border-radius: 10upx;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 28upx;
+    box-sizing: border-box;
+    padding: 0 46upx;
+}
+
+.test-item1 {
+    display: flex;
+    font-size: 35rpx;
+    color: #4D5652;
+}
+
+.test-item1 image {
+    width: 42upx;
+    height: 42upx;
+    margin-top: 54upx;
+    margin-right: 16upx;
+}
+
+.test-item2 {
+    font-weight: bold;
+    font-size: 63upx;
+    color: #4D5652;
+}
+
+.wait-test-item2{
+    font-weight: bold;
+    font-size: 63upx;
+    color: #EA6433;
+}
+
+
 .adron-box {
     display: flex;
     justify-content: space-between;
@@ -204,34 +302,54 @@ line-height: 7vh;
     margin: 0 80upx -30upx;
 }
 
-.btn-box{
+.btn-box {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
+    width: 680upx;
+    margin: 20upx auto 0;
+}
 
+.btn-box2 {
+    display: flex;
+    justify-content: center;
     width: 680upx;
     margin: 20upx auto 0;
 }
-.btn1{
+
+.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{
+    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;
+    height: 97upx;
+    line-height: 97upx;
+    background: #0369E8;
+    border-radius: 21upx;
+    font-weight: bold;
+    font-size: 35rpx;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+.btn3 {
+    width: 388upx;
+    height: 97upx;
+    line-height: 97upx;
+    background: #0369E8;
+    border-radius: 21upx;
+    font-weight: bold;
+    font-size: 35rpx;
+    color: #FFFFFF;
+    text-align: center;
 }
 </style>