bmioutput

BMI_output.vue

@@ -0,0 +1,285 @@
+<template>
+	<view class="margin-xl">
+		
+		<view class="flex justify-between">
+			<view>
+				<p class="BMI">{{bmi}}</p>
+				<uv-gap height="5"></uv-gap>
+				<p class="wight-head">身高体重指数</p>
+			</view>
+			
+			<view>
+				<image @click="$util.navigateTo('/pages/BMI/BMI_history/BMI_history')" class="image_bmi button-all" src="@/static/img/history_bmi.png"></image>
+				<uv-gap height="5"></uv-gap>
+				<p style="text-align: center;" class="wight-head">历史</p>
+			</view>
+			
+		</view>
+		
+		<uv-gap height="40"></uv-gap>
+		
+		<div class="bmi-labels">
+			<span class="weight-tip" :class="{ 'active1 active': bmi < 18.5 }">偏瘦</span>
+			<span class="weight-tip" :class="{ 'active2 active': bmi >= 18.5 && bmi < 24.0 }">正常</span>
+			<span class="weight-tip" :class="{ 'active3 active': bmi >= 24.0 && bmi < 28.0 }">偏重</span>
+			<span class="weight-tip" :class="{ 'active4 active': bmi >= 28.0 }">肥胖</span>
+		</div>
+		
+		<uv-gap height="15"></uv-gap>
+		
+		<div class="bmi-bar"></div>
+		
+		<uv-gap height="15"></uv-gap>
+		
+		<div class="bmi-values">
+			<span></span>
+			<span>18.5</span>
+			<span>24.0</span>
+			<span>28.0</span>
+			<span></span>
+		</div>
+		
+		<uv-gap height="25"></uv-gap>
+		
+		<uv-divider></uv-divider>
+		
+		<uv-gap height="25"></uv-gap>
+		
+		<p class="sug-head">数据分析</p>
+		
+		<uv-gap height="25"></uv-gap>
+		
+		<view class="flex justify-between">
+			<p class="sug-title">身高（厘米）</p>
+			<p class="sug-res">{{height}}cm</p>
+		</view>
+		
+		<uv-gap height="25"></uv-gap>
+		
+		<view class="flex justify-between">
+			<p class="sug-title">建议体重（公斤）</p>
+			<p class="sug-res">{{min_weight}} ~ {{max_weight}}kg</p>
+		</view>
+		
+		<uv-button @click="save()" customStyle="position: fixed; bottom: 40px;width: calc(100vw - 50px);" shape="circle" size="large" color="#1678ff">保存</uv-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		onLoad(options) {
+			// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
+			if ('BMI' in options) {
+				let BMI = JSON.parse(decodeURIComponent(options.BMI));
+				this.BMI = BMI;
+				let bmi = this.calculateBMI(BMI.age, BMI.gender, BMI.weight, BMI.height);
+				
+				this.bmi = bmi.bmi;
+				this.height = parseFloat(BMI.height).toFixed(1);
+				let sug_weight = this.calculateSuggestedWeightRange(BMI.height);
+				console.log(bmi);
+				console.log(sug_weight);
+				this.min_weight = sug_weight.minWeight;
+				this.max_weight = sug_weight.maxWeight;
+			}
+			else{
+				uni.navigateTo({url: '/pages/BMI/BMI'});
+			}
+		},
+		data() {
+			return {
+				bmi: null,
+				height: null,
+				min_weight: null,
+				max_weight: null,
+				saved: false
+			}
+		},
+		methods: {
+			save(){
+				if(this.saved){
+					uni.showToast({icon:'none',title: '已保存，请勿重复操作',duration:1500});
+					return ;
+				}
+				
+				this.saved = true;
+				
+				let BMI = this.BMI;
+				
+				const timestamp = Date.now();
+				BMI['bmi'] = this.bmi;
+				
+				console.log('BMI: ',BMI);
+				
+				let bmi_history = uni.getStorageSync('bmi_history');
+				if(bmi_history){
+					bmi_history[timestamp.toString()] = BMI;
+					uni.setStorageSync('bmi_history',bmi_history);
+				}
+				else{
+					bmi_history = {};
+					bmi_history[timestamp.toString()] = BMI;
+					uni.setStorageSync('bmi_history',bmi_history);
+				}
+				uni.showToast({icon:'success',title: '保存成功',duration:1500});
+			},
+			calculateBMI(age, gender, weight, height) {
+			    // 将身高从米转换为米，将体重从千克转换为千克
+			    height = height/100;
+				// const bmi = weight / (height * height);
+				const bmi = parseFloat((weight / (height * height)).toFixed(1));
+			   
+				console.log(bmi);
+			    
+				let bmiCategory;
+			    if (bmi < 18.5) {
+			        bmiCategory = "体重过轻";
+			    } else if (bmi >= 18.5 && bmi <= 24) {
+			        bmiCategory = "正常体重";
+			    } else if (bmi > 24 && bmi < 29.9) {
+			        bmiCategory = "超重";
+			    } else {
+			        bmiCategory = "肥胖";
+			    }
+			
+			    let additionalInfo = "";
+			    if (gender === 0) {
+			        additionalInfo = `男性，${age}岁，BMI值为${bmi.toFixed(2)}，属于${bmiCategory}。`;
+			    } else if (gender === 1) {
+			        additionalInfo = `女性，${age}岁，BMI值为${bmi.toFixed(2)}，属于${bmiCategory}。`;
+			    } else {
+			        additionalInfo = `性别未知，BMI值为${bmi.toFixed(2)}，属于${bmiCategory}。`;
+			    }
+			
+			    return {
+			        bmi: bmi.toFixed(1),
+			        category: bmiCategory,
+			        info: additionalInfo
+			    };
+			},
+			calculateSuggestedWeightRange(height) {
+				height = height/100;
+				const minBMI = 18.5;
+				const maxBMI = 24;
+
+				// const minWeight = minBMI * (height * height);
+				// const maxWeight = maxBMI * (height * height);
+				const minWeight = ((minBMI * (height * height))).toFixed(1);
+				const maxWeight = ((maxBMI * (height * height))).toFixed(1);
+
+				return {
+					minWeight: minWeight,
+					maxWeight: maxWeight
+				}
+			},
+		}
+	}
+</script>
+
+<style>
+	page{
+		background-color: #ffffff;
+	}
+	.BMI{
+		font-size: 60px;
+		font-weight: 1000;
+	}
+	.wight-head{
+		color: #666666;
+		font-size: 14px;
+		letter-spacing: 1px;
+	}
+	.bmi-bar {
+	  width: 100%;
+	  height: 10px;
+	  background: linear-gradient(to right, #57bff6, #13d080, #ffb951, #ff7433);
+	  border-radius: 15px;
+	}
+	
+	.bmi-labels {
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+	  width: 100%;
+	  font-size: 13px;
+	  color: #999999;
+	}
+	
+	.bmi-labels span {
+	  flex: 1;
+	  text-align: center;
+	  margin: 0 5vw;
+	  height: 25px;
+	  line-height: 25px;
+	}
+	
+	.bmi-labels .active {
+	  color: white;
+	  border-radius: 8px;
+	  position: relative;
+	  --active-color: #13d080; /* 默认颜色 */
+	  background-color: var(--active-color);
+	}
+	
+	.bmi-labels .active::before {
+	  content: "";
+	  position: absolute;
+	  top: 100%; /* 三角形位于元素下方 */
+	  left: 50%; /* 水平居中 */
+	  width: 0;
+	  height: 0;
+	  border-left: 5px solid transparent;
+	  border-right: 5px solid transparent;
+	  border-top: 7px solid var(--active-color); /* 使用变量 */
+	  transform: translateX(-50%); /* 确保三角形的中心点位于 .active 元素的中心 */
+	}
+	
+	.bmi-labels .active1 {
+	  --active-color: #57bff6; /* 自定义颜色 */
+	}
+	
+	.bmi-labels .active2 {
+	  --active-color: #13d080; /* 自定义颜色 */
+	}
+	
+	.bmi-labels .active3 {
+	  --active-color: #ffb951; /* 自定义颜色 */
+	}
+	
+	.bmi-labels .active4 {
+	  --active-color: #ff7433; /* 自定义颜色 */
+	}
+	
+	.bmi-values {
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+	  width: 100%;
+	  bottom: -30px;
+	  font-size: 14px;
+	  color: #b1b1b1;
+	}
+	
+	.sug-head {
+		font-size: 14px;
+		color: #8d93ad;
+	}
+	
+	.sug-title{
+		font-size: 18px;
+		color: #000;
+		font-weight: 700;
+	}
+	
+	.sug-res{
+		font-size: 16px;
+		color: #999999;
+		font-weight: 500;
+	}
+	
+	.image_bmi{
+		width: 60px;
+		height: 60px;
+	}
+
+</style>