上传文件至 ''

BMI.vue

@@ -0,0 +1,141 @@
+<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>