202226701022/BMI.vue

<template>
	<view class="margin-xl">
		<uv-gap height="10" ></uv-gap>
		<view class="flex justify-between">
			<view>
				<p class="head-text">年龄</p>
				<uv-gap height="10" ></uv-gap>
				<view style="width: 50vw">
					<input type="number" v-model="BMI.age" @input="validateInput('age')" maxlength="3" class="input-text" placeholder="请输入年龄" 
						placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;">
					</input>
				</view>
			</view>
			
			<view>
				<p style="text-align: center;" class="head-text">历史</p>
				<uv-gap height="5"></uv-gap>
				<image @click="$util.navigateTo('/pages/BMI/BMI_history/BMI_history')" class="image_bmi button-all" src="@/static/img/history_bmi.png"></image>
			</view>
		</view>
		
		<uv-gap height="20" ></uv-gap>
		<view class="head-text">
			<p>身高（厘米）</p>
		</view>
		
		<uv-gap height="10" ></uv-gap>
		<view>
			<input type="number" v-model="BMI.height" @input="validateInput('height')" maxlength="3" class="input-text" placeholder="请输入身高" 
				placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;">
			</input>
		</view>
		
		<uv-gap height="20" ></uv-gap>
		<view class="head-text">
			<p>体重（公斤）</p>
		</view>
		
		<uv-gap height="10" ></uv-gap>
		<view>
			<input type="number" v-model="BMI.weight" @input="validateInput('weight')" maxlength="3" class="input-text" placeholder="请输入体重" 
				placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;">
			</input>
		</view>
		
		<uv-gap height="30" ></uv-gap>
		<view class="tip-text">
			<p class="title">BMI指数：</p>
			<uv-gap height="5" ></uv-gap>
			<p>简称体质指数，是通过体重公斤除以身高米数平方得出的数字。是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。</p>
		</view>
		
		<uv-button @click="to_BMI_output()" customStyle="position: fixed; bottom: 40px;width: calc(100vw - 50px);" shape="circle" size="large" color="#1678ff">开始计算</uv-button>
		
	</view>
</template>

<script>
	export default {
		onLoad() {
			let user = uni.getStorageSync("user");
			if(user){
				this.BMI.age = user.age;
				this.BMI.gender = user.gender;
			}
		},
		data() {
			return {
				BMI: {
					age: null,
					gender: 0,
					height: null,
					weight: null
				}
			}
		},
		methods: {
			to_BMI_output(){
				if(!this.BMI.age) uni.showToast({duration:1500,icon:'error',title: '请输入年龄 !'});
				else if(this.BMI.age < 14) uni.showToast({duration:1500,icon:'none',title: '14岁以下不提供此服务!'});
				else if(!this.BMI.height) uni.showToast({duration:1500,icon:'error',title: '请输入身高 !'});
				else if(!this.BMI.weight) uni.showToast({duration:1500,icon:'error',title: '请输入体重 !'});
				else{
					// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
					const BMI = encodeURIComponent(JSON.stringify(this.BMI));
					 
					// 跳转页面并传递对象参数
					uni.navigateTo({
						url: `/pages/BMI/BMI_output/BMI_output?BMI=${BMI}`
					});
				}
			},
			validateInput(fieldName) {
				const value = this.BMI[fieldName];

				// 如果输入的是负数或者不是数字，则清空输入框
				if (value < 0 || isNaN(value)) {
					this.BMI[fieldName] = null;
					uni.showToast({duration:1500,icon:'error',title: '请输入正数 !'});
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
	.head-text{
		color: #8c92ad;
		font-size: 14px;
	}
	.input-text {
	    /* 去掉默认边框 */
	    border: none;
	    /* 添加底部下划线 */
	    border-bottom: 1px solid #cccccc; /* 下划线颜色和粗细 */
	    /* 其他样式 */
	    width: 100%;
		height: 7vh;
	    padding-bottom: 5px;
	    font-size: 24px;
		font-weight: 1000;
		color: #000;
	    outline: none; /* 移除聚焦时的默认边框 */
	}
	.tip-text{
		color: #666666;
		font-size: 14px;
	}
	.tip-text .title{
		font-weight: 1000;
	}
	
	.image_bmi{
		width: 60px;
		height: 60px;
	}

</style>