|
|
@@ -0,0 +1,327 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+ <view class="container">
|
|
|
+ <view class="navigation-bar">燃脂功能训练帮手</view>
|
|
|
+ <view class="back" @click="onBack(0, $event)">
|
|
|
+ <image src="/static/backArrow.png" mode="aspectFit" style="width:100%"></image>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="row">
|
|
|
+ <view class="block" style="background-color: #EBF3F2;">
|
|
|
+ <view class="item-bg" style="background-color: #B6D4CF ;">
|
|
|
+ <view class="item" style="background-color: #B6D4CF ;" @click="onClick(0, $event)">
|
|
|
+ <image class="item-logo" src="/static/home/basalMetabolismLogo.png" mode="aspectFit"></image>
|
|
|
+ <view class="item-title" style="color: #4D857C;">基础代谢率</view>
|
|
|
+ <image class="item-unlock-logo" src="/static/home/basalMetabolismUnlock.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="label" style="background-color: #D8E8E5 ; color: #4D857C;">基础代谢: {{bmr}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="block" style="background-color: #FEECEC;">
|
|
|
+ <view class="item-bg" style="background-color: #FABAB9;">
|
|
|
+ <view class="item" style="background-color: #FABAB9;" @click="onClick(1, $event)">
|
|
|
+ <image class="item-logo" src="/static/home/dayCalorieLogo.png" mode="aspectFit"></image>
|
|
|
+ <view class="item-title" style="color: #C65E5C;">每天消耗总热量</view>
|
|
|
+ <image class="item-unlock-logo" src="/static/home/dayCalorieUnlock.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="label" style="background-color: #FCD9D9 ; color: #C65E5C;">每日消耗总热量: {{calorie}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="block" style="background-color: #FCF1EB;">
|
|
|
+ <view class="item-bg" style="background-color: #F2CDB7;">
|
|
|
+ <view class="item" style="background-color: #F2CDB7;" @click="onClick(2, $event)">
|
|
|
+ <image class="item-logo" src="/static/home/heartRhythmsLogo.png" mode="aspectFit"></image>
|
|
|
+ <view class="item-title" style="color: #BE7F59;">有氧运动心律</view>
|
|
|
+ <image class="item-unlock-logo" src="/static/home/heartRhythmsUnlock.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="label" style="background-color: #F8E3D8; color: #BE7F59;">最低有氧心率:{{lowestHeartRate}}</view>
|
|
|
+ <view class="label" style="background-color: #F8E3D8; color: #BE7F59;">最高有氧心率:{{highestHeartRate}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="block" style="background-color: #F0F0E9;">
|
|
|
+ <view class="item-bg" style="background-color: #C9C7AF;">
|
|
|
+ <view class="item" style="background-color: #C9C7AF;" @click="onClick(3, $event)">
|
|
|
+ <image class="item-logo" src="/static/home/bodyFatRatioLogo.png" mode="aspectFit"></image>
|
|
|
+ <view class="item-title" style="color: #7B784E;">体脂率</view>
|
|
|
+ <image class="item-unlock-logo" src="/static/home/bodyFatRatioUnlock.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="label" style="background-color: #E2E1D3; color: #7B784E;">脂肪总重量:{{fatWeight}}</view>
|
|
|
+ <view class="label" style="background-color: #E2E1D3; color: #7B784E;">体脂率:{{fatRate}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ gender:0,
|
|
|
+ weight:0,
|
|
|
+ high:0,
|
|
|
+ age:0,
|
|
|
+ waist:0,
|
|
|
+ bmr:0,
|
|
|
+ calorie:0,
|
|
|
+ heartRate:0,
|
|
|
+ lowestHeartRate:0,
|
|
|
+ highestHeartRate:0,
|
|
|
+ fatWeight:0,
|
|
|
+ fatRate:0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if(getApp().globalData.bmr != undefined)
|
|
|
+ {
|
|
|
+ this.bmr = Math.round(getApp().globalData.bmr);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(getApp().globalData.calorie != undefined)
|
|
|
+ {
|
|
|
+ this.calorie = Math.round(getApp().globalData.calorie);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(getApp().globalData.lowestHeartRate != undefined)
|
|
|
+ {
|
|
|
+ this.lowestHeartRate = Math.round(getApp().globalData.lowestHeartRate);
|
|
|
+ }
|
|
|
+ if(getApp().globalData.highestHeartRate != undefined)
|
|
|
+ {
|
|
|
+ this.highestHeartRate = Math.round(getApp().globalData.highestHeartRate);
|
|
|
+ }
|
|
|
+
|
|
|
+ if(getApp().globalData.fatWeight != undefined)
|
|
|
+ {
|
|
|
+ this.fatWeight = Math.round(getApp().globalData.fatWeight);
|
|
|
+ }
|
|
|
+ if(getApp().globalData.fatRate != undefined)
|
|
|
+ {
|
|
|
+ this.fatRate = Math.round(getApp().globalData.fatRate);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onBack: function(id,e) {
|
|
|
+ //uni.navigateBack()//默认delta:1
|
|
|
+ uni.navigateBack({
|
|
|
+ delta:1,//返回层数,2则上上页
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onClick: function(id,e) {
|
|
|
+ // console.log(id); // 1
|
|
|
+ // console.log(e); // 事件对象
|
|
|
+
|
|
|
+ switch (id){
|
|
|
+ case 0:
|
|
|
+ {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/basalMetabolism/basalMetabolism",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/dayCalorie/dayCalorie",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/heartRhythms/heartRhythms",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages/bodyFatRatio/bodyFatRatio",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ break;
|
|
|
+
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:100%;
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ // 测试
|
|
|
+ // border: 1px solid rgb(255,0,0);
|
|
|
+ // box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 1);
|
|
|
+ // border-bottom: 1px solid #DDDDDD;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navigation-bar
|
|
|
+ {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:100%;
|
|
|
+ height: 6%;
|
|
|
+
|
|
|
+ font-weight: 700;
|
|
|
+ color: black;
|
|
|
+ font-size: 75rpx;
|
|
|
+
|
|
|
+ background-color: white;
|
|
|
+ // testing
|
|
|
+ // border: 1px solid rgb(255,0,0);
|
|
|
+ // background-color: rgb(253,222,157);
|
|
|
+ }
|
|
|
+
|
|
|
+ .back{
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width: 2%;
|
|
|
+ height: 2%;
|
|
|
+ top: 2.5%;
|
|
|
+ left: 3%;
|
|
|
+ //testing
|
|
|
+ // border: 1px solid rgb(255,0,0);
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ // border: 3px solid rgb(144,238,144);
|
|
|
+ }
|
|
|
+
|
|
|
+ .row{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:100%;
|
|
|
+ height: 50%;
|
|
|
+
|
|
|
+ // 测试
|
|
|
+ // margin: 10rpx;
|
|
|
+ // border: 3px solid rgb(144,238,144);
|
|
|
+ }
|
|
|
+
|
|
|
+ .block{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-bg{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ width:90%;
|
|
|
+ height:70%;
|
|
|
+ margin: 5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ height: 80%;
|
|
|
+ width: 80%;
|
|
|
+
|
|
|
+ border: 3px solid #FFFFFF;
|
|
|
+ // 测试
|
|
|
+ // margin: 10rpx;
|
|
|
+ // border: 1px solid rgb(0,0,255);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-logo
|
|
|
+ {
|
|
|
+ z-index: 4;
|
|
|
+ height: 30%;
|
|
|
+ width: 30%;
|
|
|
+ // margin: 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title
|
|
|
+ {
|
|
|
+ font-size: 100rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin: 2%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-unlock-logo
|
|
|
+ {
|
|
|
+ height: 40%;
|
|
|
+ width: 40%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label
|
|
|
+ {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ font-size: 80rpx;
|
|
|
+ font-weight: 700;
|
|
|
+
|
|
|
+ width:90%;
|
|
|
+ height:10%;
|
|
|
+ margin: 5%;
|
|
|
+
|
|
|
+ // 测试
|
|
|
+ // margin: 10rpx;
|
|
|
+ // border: 1px solid rgb(0,0,255);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 解决⼩程序和app滚动条的问题 */
|
|
|
+ /* #ifdef MP-WEIXIN || APP-PLUS */
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ width: 0 !important;
|
|
|
+ height: 0 !important;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ background: transparent;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+ /* 解决H5 的问题 */
|
|
|
+ /* #ifdef H5 */
|
|
|
+ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
|
|
+ /* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
|
|
+ display: none;
|
|
|
+ width: 0 !important;
|
|
|
+ height: 0 !important;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ background: transparent;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ /* #endif */
|
|
|
+</style>
|