ai-watch-app/pages/index/body_info.vue

<template>
	<view>
		<view class="">
			<view class="flx flx_ac" style="background-color: #fff;padding: 30rpx 0 0 30rpx;">
				<view class="">
					<text class="iconfont icon-wode" :style="'font-size: 50rpx;margin-right:10rpx;color:'+bodyDesc.color "></text>
				</view>
				<view class="">
					<text >{{bodyDesc.name}}</text>
				</view>
			</view>
			<view class="" style="position: relative;">
				<image src="../../static/image/body.png" style="width: 100%;" mode="widthFix"></image>
				<view class="left_position postion ">
					<view class="desc_box">
						<view class="flx flx_ac">
							<view class="tt">
								{{ dataInfo.data_msg.basalMetabolicRate }}
							</view>
							<view class="unit" >
								千卡
							</view>
						</view>
						<view class="name">
							基础代谢
						</view>
					</view>
					<view class="desc_box">
						<view class="flx flx_ac">
							<view class="tt">
								{{ dataInfo.data_msg.boneMass }}
							</view>
							<view class="unit" >
								千克
							</view>
						</view>
						<view class="name">
							骨重
						</view>
					</view>
					<view class="desc_box">
						<view class="flx flx_ac">
							<view class="tt">
								{{ dataInfo.data_msg.waterContent }}
							</view>
							<view class="unit" >
								千克
							</view>
						</view>
						<view class="name">
							水分
						</view>
					</view>
												
				</view>
				<view class="right_position postion">
					<view class="desc_box">
						<view class="flx flx_ac">
							<view class="tt">
								{{ dataInfo.data_msg.fatMass }}
							</view>
							<view class="unit" >
								千克
							</view>
						</view>
						<view class="name">
							脂肪
						</view>
					</view>
					<view class="desc_box" style="margin-bottom: 0;margin-top: 174rpx;">
						<view class="flx flx_ac">
							<view class="tt">
								{{ dataInfo.data_msg.proteinAmount }}
							</view>
							<view class="unit" >
								千克
							</view>
						</view>
						<view class="name">
							蛋白质
						</view>
					</view>
				</view>
				<view class="postion center_posion">
					{{ dataInfo.data_msg.userInfo.gender == '2'?'女':'男' }}性，{{ dataInfo.data_msg.userInfo.weight  }}千克
				</view>
				<view class="postion right_center">
					{{ dataInfo.data_msg.userInfo.height  }}厘米
				</view>
			</view>
			<view class="radius_box" style="padding: 0;margin: 30rpx;">
				<view class="" v-for="(v,i) in arr" :key="i">
					<body_info_components :key_name="v" :value="parseFloat(dataInfo.data_msg[v])"></body_info_components>
				</view>
			</view>
			<view class="" style="height: 40rpx;">
				
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				dataInfo:{},
				bodyDesc:{},
				arr:[
					'BMI',
					'bodyFatPercentage',
					'leanBodyMass',
					'muscleRate',
					'muscleMass',
					'subcutaneousFat',
					'bodyMoisture',
					'skeletalMuscleRate',
					'boneMass',
					'proteinAmount',
					'basalMetabolicRate',
				]
			}
		},
		onLoad() {
			const dataKey = 'bodyData'; // 同上面设置的key
			let get = uni.getStorageSync(dataKey)
			
			if(!get){
				uni.showToast({
					title:"读取数据失败"
				})
				setTimeout(() => {
					uni.navigateBack({
						delta:-1
					})
				},2000)
				return
			}
			const data = JSON.parse(get);
			this.dataInfo = data;
			console.log(this.dataInfo)
			// this.getUserInfo()
			this.bodyDesc = this.$utils.getBodyKeyInfo(this.dataInfo.data_msg.BMI,'BMI')
			// uni.removeStorageSync(dataKey);
		},
		computed: {
			...mapGetters({
				getActiceDevice: "api/getActiceDevice"
			})
		},
		methods: {
			getUserInfo(){
				this.$store.dispatch('api/getUserInfo',{
					device_id:this.getActiceDevice.device_id 
				}).then(res => {
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.postion{
	position: absolute;
}
.left_position{
	left: 40rpx;
	top:12%
}
.right_position{
	right: 40rpx;
	top:15%
}
.right_center{
	right: 160rpx;
	top:42%;
	font-size: 26rpx;
}
.center_posion{
	width: 100%;
	text-align: center;
	bottom: 20rpx;
}
.desc_box{
	margin-bottom: 64rpx;
	.tt{
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}
	.unit{
		font-size: 24rpx;
		color: #666;
	}
	.name{
		font-size: 24rpx;
		color: #999;
	}
}
</style>