473 lines
9.7 KiB
Vue
473 lines
9.7 KiB
Vue
<template>
|
|
<view>
|
|
<view class="flx flx_sb" style="padding:40rpx;padding-bottom: 30rpx;"@click="look()" >
|
|
<view class="flx">
|
|
<view class="" v-if="bodyDataExample[key_name].icon">
|
|
<image :src="bodyDataExample[key_name].icon" style="width: 40rpx;margin-right: 10rpx;" mode="widthFix"></image>
|
|
</view>
|
|
<view class="">
|
|
{{ bodyDataExample[key_name].name}}
|
|
</view>
|
|
</view>
|
|
<view class="flx" >
|
|
<view class="" style="color: #999;">
|
|
{{ value }}{{ bodyDataExample[key_name].unit}}
|
|
</view>
|
|
<view class="" style="margin-left: 14rpx;">
|
|
<text :class="'iconfont '+getKeyInfo(value).icon_key" :style="'font-weight:bold;color:' + colorArr[getKeyInfo(value).colorIdx]"></text>
|
|
</view>
|
|
<view :class="(!open?'':'xuanzhaun')" style="width: 40rpx;height: 40rpx; text-align: center;line-height: 40rpx;">
|
|
<text style="color: #999;" :class="'iconfont icon-right ' "></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="info" v-if="open">
|
|
<view class="" style="height: 40rpx;">
|
|
</view>
|
|
<view class="flx">
|
|
<view class="tzm" v-for="(v,i) in bodyDataExample[key_name].tags" :key="i" :style="'background-color: ' + colorArr[v.colorIdx]">
|
|
<view class="info-val" v-if="v.val > 0">
|
|
{{ v.val }}{{ bodyDataExample[key_name].unit }}
|
|
</view>
|
|
<view class="info-qq">
|
|
<view class="qq" :style="'border: 8rpx solid '+ colorArr[v.colorIdx] +';margin-left:'+getKeyInfo(value,1).margin" v-if="getKeyInfo(value).idx == i">
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flx flx_sb">
|
|
<view class="flx tags_name flx_ac" v-for="(v,i) in bodyDataExample[key_name].tags" :key="i">
|
|
<view class="fk" :style="'background-color:'+ colorArr[v.colorIdx] + ' ;'">
|
|
|
|
</view>
|
|
<view class="name">
|
|
{{ v.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"body_info_components",
|
|
props:{
|
|
key_name:{
|
|
type:String,
|
|
default:"BMI"
|
|
},
|
|
value:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
open:false,
|
|
// 无标准color
|
|
colorArr : [
|
|
"#5990f5",
|
|
"#29ce70",
|
|
"#fcb041",
|
|
"#fa6820",
|
|
"#1da30f"
|
|
],
|
|
icon_info:{
|
|
|
|
},
|
|
|
|
bodyDataExample:{
|
|
BMI:{
|
|
name:"BMI",
|
|
tags:[
|
|
{
|
|
name:'偏瘦',
|
|
colorIdx:0,
|
|
val:18.5,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:1,
|
|
val:24,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'超重',
|
|
colorIdx:2,
|
|
val:28,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
{
|
|
name:'肥胖',
|
|
colorIdx:3,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
}
|
|
],
|
|
unit:'',// 计量单位
|
|
icon:'https://img.agrimedia.cn/-_BMI-tuya.png'
|
|
},
|
|
bodyFatPercentage:{
|
|
name:"体脂率",
|
|
tags:[
|
|
{
|
|
name:'偏瘦',
|
|
colorIdx:0,
|
|
val:18,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:1,
|
|
val:23,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'超重',
|
|
colorIdx:2,
|
|
val:30,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
{
|
|
name:'肥胖',
|
|
colorIdx:3,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
}
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/%E4%BD%93%E8%84%82%E7%8E%871-tuya.png'
|
|
},
|
|
leanBodyMass:{
|
|
name:"去脂体重",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:45.8,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:55.9,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-success"
|
|
},
|
|
|
|
],
|
|
unit:'千克',// 计量单位
|
|
icon:'https://img.agrimedia.cn/%E5%8E%BB%E8%84%82%E4%BD%93%E9%87%8D-tuya.png'
|
|
},
|
|
muscleRate:{
|
|
name:"肌肉率",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:68.1,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:84.8,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-success"
|
|
},
|
|
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/Surgery-tuya.png'
|
|
},
|
|
muscleMass:{
|
|
name:"肌肉量",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:40.8,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:50.8,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-success"
|
|
},
|
|
|
|
],
|
|
unit:'千克',// 计量单位
|
|
icon:'https://img.agrimedia.cn/watch-app/exercise-tuya.png'
|
|
},
|
|
subcutaneousFat:{
|
|
name:"皮下脂肪",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:8.6,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:16.7,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'高',
|
|
colorIdx:2,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/008%E7%9A%AE%E4%B8%8B%E8%84%82%E8%82%AA-tuya.png'
|
|
},
|
|
bodyMoisture:{
|
|
name:"体内水分",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:53.4,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:66.6,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/watch-app/%E6%B0%B42-tuya.png'
|
|
},
|
|
skeletalMuscleRate:{
|
|
name:"骨骼肌",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:25,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:35,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-success"
|
|
},
|
|
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/watch-app/%E9%AA%A8%E9%AA%BC%E8%82%8C%E7%8E%87-tuya.png'
|
|
},
|
|
boneMass:{
|
|
name:"骨重",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:2.9,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:3.7,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
|
|
],
|
|
unit:'千克',// 计量单位
|
|
icon:'https://img.agrimedia.cn/%E9%AA%A8%E9%87%8D.png'
|
|
},
|
|
proteinAmount:{
|
|
name:"蛋白质",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:14.1,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'标准',
|
|
colorIdx:1,
|
|
val:17.7,
|
|
icon_key:'icon-success'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-up-arrow"
|
|
},
|
|
|
|
],
|
|
unit:'%',// 计量单位
|
|
icon:'https://img.agrimedia.cn/%E8%9B%8B%E7%99%BD%E8%B4%A8-tuya.png'
|
|
},
|
|
basalMetabolicRate:{
|
|
name:"基础代谢",
|
|
tags:[
|
|
{
|
|
name:'低',
|
|
colorIdx:0,
|
|
val:1619,
|
|
icon_key:'icon-down-arrow'
|
|
},
|
|
{
|
|
name:'完美',
|
|
colorIdx:4,
|
|
val:0,
|
|
icon_key:"icon-success"
|
|
},
|
|
|
|
],
|
|
unit:'千卡',// 计量单位
|
|
icon:'https://img.agrimedia.cn/%E5%9F%BA%E7%A1%80%E4%BB%A3%E8%B0%A2.png'
|
|
},
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
// let val = this.getKeyInfo(this.value)
|
|
// let body =this.$utils.getPwd('123456')
|
|
},
|
|
methods:{
|
|
look(){
|
|
this.open = !this.open
|
|
},
|
|
getKeyInfo(val,type = 0){
|
|
let back = {}
|
|
let data = this.bodyDataExample[this.key_name].tags
|
|
data.map((v,i) => {
|
|
if(i == 0){
|
|
if(val < v.val){
|
|
back = v
|
|
back.prev_val = 0
|
|
back.idx = i
|
|
back.margin = ((val / (v.val - 0)) * 100).toString() + '%'
|
|
}
|
|
}else{
|
|
|
|
if(val >= data[i-1].val && (val < v.val || v.val == 0)){
|
|
|
|
back = v
|
|
back.prev_val = data[i-1].val
|
|
back.idx = i
|
|
if(v.val == 0){
|
|
back.margin = '20%'
|
|
}else{
|
|
back.margin = (((val - data[i-1].val) / (v.val - data[i-1].val)) * 100).toString() + '%'
|
|
}
|
|
}
|
|
}
|
|
})
|
|
return back
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.xuanzhaun{
|
|
transform: rotate(90deg);
|
|
}
|
|
.info{
|
|
background-color: #e7faf8;
|
|
padding: 20rpx;
|
|
.tags_name{
|
|
margin: 40rpx 0 20rpx 0;
|
|
.fk{
|
|
width: 15rpx;
|
|
height: 15rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
.name{
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.tzm{
|
|
height: 20rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
.info-val{
|
|
position: absolute;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
right: -50%;
|
|
top: -40rpx;
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
}
|
|
.info-qq{
|
|
position: absolute;
|
|
width: 100%;
|
|
left: -12rpx;
|
|
top: -6rpx;
|
|
z-index: 99;
|
|
|
|
.qq{
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.tzm:first-child{
|
|
border-top-left-radius:20rpx;
|
|
border-bottom-left-radius:20rpx;
|
|
}
|
|
.tzm:last-child{
|
|
border-top-right-radius:20rpx;
|
|
border-bottom-right-radius:20rpx;
|
|
}
|
|
}
|
|
</style> |