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