web3-202226701039/BMI_output.vue

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