218 lines
8.3 KiB
Vue
218 lines
8.3 KiB
Vue
<template>
|
||
<view class="common homePage">
|
||
<!-- 头部 -->
|
||
<headTop :token="token"></headTop>
|
||
<!-- 健康报告 -->
|
||
<view class="myinfo myinfoPage">
|
||
<view class="mt-15" v-show="MeasureResult&&MeasureResult.muscle==0">
|
||
<view class="unusual">体脂测量异常，请重新测量</view>
|
||
</view>
|
||
<view v-if="infoList.length">
|
||
<view class="box">
|
||
<view class="left">
|
||
<text class="text">本次健康评分</text>
|
||
<view class="circleprogress">
|
||
<view class="wrapper">
|
||
<view class="leftprogress" :style="{ width: MeasureResult.cmi + '%'}">
|
||
</view>
|
||
</view>
|
||
<view class="fen">
|
||
<view>{{MeasureResult.cmi}}</view>分
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="item">
|
||
<view><text>{{MeasureResult.height}}</text>cm</view>
|
||
<view class="tivon">身高</image>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
<view><text>{{MeasureResult.weight}}</text>kg</view>
|
||
<view>体重</view>
|
||
</view>
|
||
<!-- <view class="item">
|
||
<view><text>{{MeasureResult.lbm}}</text>kg</view>
|
||
<view class="tivon">去脂体重</image>
|
||
</view>
|
||
</view> -->
|
||
<view class="item">
|
||
<view><text>{{MeasureResult.bodyage}}</text>岁</view>
|
||
<view>体龄</view>
|
||
</view>
|
||
<view class="item">
|
||
<view><text class="f-14">{{MeasureResult.body}}</text></view>
|
||
<view>体型</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box1">
|
||
<view class="h2">
|
||
<icon class="yuanxing"></icon>其他人体成分分析
|
||
</view>
|
||
<view class="list" v-for="(item,index) in infoList" :key="index" @click="handleToggle(index)">
|
||
<view class="block">
|
||
<view class="name">
|
||
<icon class="t-icon iconfont" :class="'t-icon-'+item.key"></icon>
|
||
{{item.title}}
|
||
</view>
|
||
<view class="val" v-if="item.title!='肥胖等级'">
|
||
{{item.fvalue?item.fvalue:'0'}}{{item.dw}}
|
||
</view>
|
||
<view class="val0" v-else>{{item.fevaluation}}</view>
|
||
<view class="level" v-if="item.title!='肥胖等级'">
|
||
<view class="btnf" :style="{backgroundColor:item.color}">{{item.fevaluation}}</view>
|
||
</view>
|
||
<view class="icon">
|
||
<icon class="iconfont icon-arrow-down" v-if="item.desc"></icon>
|
||
</view>
|
||
</view>
|
||
<view class="desc" v-if="item.showCon">
|
||
<view v-if="item.desc">{{item.desc}}</view>
|
||
<view class="statuevue" v-if="item.slist">
|
||
<view class="bi" v-if="item.title!='基础代谢'">
|
||
<view class="item" v-for="(ite , ind) in item.slist" :key="ind"
|
||
:style="{backgroundColor:ite.color}">
|
||
<view class="span1">{{ite.text}}</view>
|
||
<view v-if="ite.text==item.fevaluation&&item.fvalue>ite.maxvalue"
|
||
style="right: 10px" class="peobox">
|
||
<view class="xx"></view>
|
||
</view>
|
||
<view v-if="ite.text==item.fevaluation&&item.fvalue<=ite.maxvalue"
|
||
:style="'left:'+item.leftval+'rem'" class="peobox">
|
||
<view class="xx"></view>
|
||
</view>
|
||
<view class="span" v-if="ind<item.slist.length-1">{{ite.maxvalue}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="kcalClass">
|
||
标准值:{{item.slist[0].maxvalue}}kcal
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="introction">
|
||
<icon class="t-icon t-icon-tishi"></icon>
|
||
<span>此测量数据仅供参考，不可代替医学专业测试！</span>
|
||
</view>
|
||
</view>
|
||
<view v-else class="nolist">
|
||
<icon class="iconfont icon-zanwu"></icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
import headTop from "@/components/header/head.vue"
|
||
export default {
|
||
components: {
|
||
headTop
|
||
},
|
||
data() {
|
||
return {
|
||
token: null,
|
||
devtype: 0,
|
||
infoList: [],
|
||
deviceId: null,
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState(["user", "MeasureResult"]),
|
||
},
|
||
onUnload: function() {
|
||
let that = this
|
||
uni.switchTab({
|
||
url: "/pages/index/index"
|
||
})
|
||
},
|
||
onShow() {
|
||
let that = this;
|
||
that.token = uni.getStorageSync('token')
|
||
uni.onBluetoothAdapterStateChange(function(res) {
|
||
that.$store.commit("changeBluetooth", res.available);
|
||
console.log("报告页监听蓝牙状态openBluetoothAdapter", res.available)
|
||
})
|
||
},
|
||
onLoad(options) {
|
||
let that = this;
|
||
console.log("options", options)
|
||
if (options) {
|
||
that.devtype = options.t
|
||
that.deviceId = options.sn
|
||
}
|
||
this.$nextTick(() => {
|
||
that.handleToggle(0)
|
||
})
|
||
},
|
||
watch: {
|
||
MeasureResult() {
|
||
this.handleToggle(0)
|
||
}
|
||
},
|
||
methods: {
|
||
// 切换
|
||
handleToggle(index) {
|
||
let that = this
|
||
if (!that.MeasureResult) return
|
||
let str = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
|
||
for (var i = 0; i < str.length; i++) {
|
||
if (i == index) {
|
||
str[i].showCon = !str[i].showCon
|
||
} else {
|
||
str[i].showCon = false
|
||
}
|
||
}
|
||
that.infoList = this.weightInfo.infoList(that.MeasureResult).slice(1, 14)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.myinfo {
|
||
margin-top: 105px;
|
||
}
|
||
|
||
.val0 {
|
||
position: absolute;
|
||
left: 40%;
|
||
margin-left: 3px;
|
||
}
|
||
|
||
.wrapper {
|
||
z-index: 9 !important;
|
||
}
|
||
|
||
.unusual {
|
||
font-size: 14px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
color: #e83a1e;
|
||
margin: 15px;
|
||
background: #f7e4c8;
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.introction {
|
||
display: flex;
|
||
margin-left: 15px;
|
||
margin-bottom: 20px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
|
||
.t-icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-right: 5px;
|
||
|
||
}
|
||
}
|
||
</style>
|