examTeamApp/pageTwo/home/bmi.vue

<template>
	<view class="content">
		<view class="editem">
			<view class="name">身高</view>
			<view class="right">
				<input type="digit" v-model="PostData.height" placeholder="请输入身高"
					placeholder-style="font-size:13px;color:#666" />cm
			</view>
		</view>
		<view class="edit">
			<view class="editem">
				<view class="name">体重</view>
				<view class="right">
					<input type="digit" v-model="PostData.weight" placeholder="请输入体重"
						placeholder-style="font-size:13px;color:#666" />kg
				</view>
			</view>
			<view class="editem">
				<view class="name">性别</view>
				<view class="right radio2">
					<view class="radio">
						<uni-icons :type="PostData.sex==1?'checkbox-filled':'circle'" @click="PostData.sex=1" size="24"
							:color="PostData.sex==1?'#fea606':'#dfdfdf'"></uni-icons>男
					</view>
					<view class="radio ml-15">
						<uni-icons :type="PostData.sex==2?'checkbox-filled':'circle'" @click="PostData.sex=2" size="24"
							:color="PostData.sex==2?'#fea606':'#dfdfdf'"></uni-icons>女
					</view>
				</view>
			</view>
			<view class="editem">
				<view class="name">出生日期</view>
				<view class="right">
					<picker mode="date" :value="PostData.birthday" :end="endDate" @change="bindDateChange"
						:fields="fields">
						<view class="text">{{PostData.birthday?PostData.birthday:"请选择出生日期"}}</view>
						<icon class="iconfont icon-arrow-down-bold"></icon>
					</picker>
				</view>
			</view>
		</view>
		<view class="box_con mb-15" v-if="iscalced">
			<view class="BMIlist">
				<view class="block">
					<view class="name">
						BMI
					</view>
					<view class="val">
						{{resdata.bmi?resdata.bmi:'0'}}
					</view>
					<view class="btnf" :style="{backgroundColor:resdata.bmilevelcolor}">
						{{resdata.bmilevel}}
					</view>
				</view>
				<view class="desc">
					<view class="statuevue">
						<view class="bi">
							<view :style="'left:'+resdata.offset+'%'" class="peobox">
								<view class="xx"></view>
							</view>
							<view class="item" v-for="(ite , ind) in resdata.bmilevellist" :key="ind"
								:style="{backgroundColor:ite.color}">
								<view class="span1">{{ite.text}}</view>
								<view class="span" v-if="ind<resdata.bmilevellist.length-1">{{ite.max_val}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tip">
			BMI是身体质量指数,是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准
		</view>
		<view class="btn mt-20" @click="submit"> 立即计算</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//提交的数据
				PostData: {
					weight: '',
					height: '',
					sex: 0,
					birthday: null
				},
				resdata: {
					bmi: 0,
					bmilevel: '',
					bmilevelcolor: '',
					bmilevellist: [],
					offset: ""
				},
				//性别
				sexItem: [
					"男",
					"女"
				],
				leftval: 0,
				iscalced: false,
				fields: "",
			}
		},
		computed: {
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			let that = this
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		methods: {
			//性别选择
			onsexArr(e) {
				this.PostData.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			//年龄选择
			bindDateChange(e) {
				this.PostData.birthday = e.target.value
			},
			hideKeyboard() {
				console.log("隐藏软键盘")
				uni.hideKeyboard()
			},
			//bmi计算
			submit() {
				var that = this;
				if (!that.PostData.weight) {
					this.$tools.msg("请输入体重")
					return;
				}
				if (!that.PostData.height) {
					this.$tools.msg("请输入身高")
					return;
				}
				if (!that.PostData.sex) {
					this.$tools.msg("请选择性别")
					return;
				}
				if (!that.PostData.birthday) {
					this.$tools.msg("请选择年龄")
					return;
				}
				that.$model.calcbmi(that.PostData).then(res => {
					if (res.code == 0) {
						this.resdata = res.data;
						this.iscalced = true;
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 15px;
		background-color: #fff;
	}

	.tip {
		font-size: 24rpx;
		color: #999;
		line-height: 22px
	}

	.editem {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		border-radius: 20px;
		margin-bottom: 15px;
		justify-content: space-between;
		background: #eee;
		padding-left: 15px;

		.name {
			width: 30%;
			float: left;
			height: 40px;
			line-height: 40px;
		}

		.right {
			width: 58%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 15px;
			height: 38px;
			line-height: 38px;

			.radio2 {
				justify-content: space-between;
			}

			.radio {
				width: 100%;
				display: flex;
				height: 40px;
				line-height: 40px;
			}

			.text,
			/deep/input {
				position: absolute;
				right: 15px;
				top: 0;
				left: 40%;
				z-index: 9999;
				color: #666;
				text-align: left;
			}

			/deep/input {
				padding-left: 0px;
				margin-top: 0px;
				font-size:30rpx !important;
				height: 38px;
				line-height: 38px;
			}

		}
	}

	.btn {
		margin-top: 20px;
		background-color: $maincolor;
	}

	.box_con {
		margin-top: 15px;
		padding: 10px 15px 15px;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 0px 5px 0px #c3c3c3;
		font-size: 26rpx;
	}

	.desc {
		line-height: 20px;
		text-align: left;
		width: calc(100%-20px);
		height: auto;
		border-radius: 5px;
		font-size: 30rpx;
		color: #999;
		padding: 10px;
		background: #f7f7f7;


		.statuevue {
			height: 35px;
			position: relative;
			width: 100% !important;
			margin: 20px auto 10px;

			.bi {
				display: flex;
				justify-content: space-between;
				width: auto;
				padding-top: 10px;

				.peobox {
					position: absolute;
					right: 0;
					top: -1px;
					z-index: 999;

					.xx {
						width: 5px;
						height: 5px;
						border-radius: 50%;
						background: #fff;
						position: absolute;
						z-index: 9;
						border: 2px solid #1b2086;
						top: 9px;
					}
				}
			}

			.item {
				position: relative;
				margin: 0;
				flex: 1;
				height: 5px;
				color: #666;
				font-size: 30rpx;

				.span1 {
					width: 100%;
					text-align: center;
					position: absolute;
					top: -23px;
				}

				.span {
					margin-top: 8px;
					position: absolute;
					right: -8px;
				}
			}
		}
	}

	.block {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		align-items: center;
	}

	.btnf {
		background-color: #ff5656;
		padding: 3px 8px;
		color: #fff;
		border-radius: 5px;
	}

	.yuanxing {
		display: inline-block;
		background: #f19601;
		width: 8px;
		height: 12px;
		margin-right: 5px;
		font-size: 36rpx;
	}
</style>