examTeamApp/pageTwo/home/inheritHeighet.vue

<template>
	<view class="content">
		<view class="top">
			<text>成年身高预测</text>
			为保证数据准确定，请认真填写真实信息
		</view>
		<view class="table">
			<view class="tr">
				<view class="text">性别</view>
				<view class="td">
					<view class="radio">
						<uni-icons :type="sex==1?'checkbox-filled':'circle'" @click="sex=1" size="24"
							:color="sex==1?'#fea606':'#dfdfdf'"></uni-icons>男
					</view>
					<view class="radio ml-10">
						<uni-icons :type="sex==2?'checkbox-filled':'circle'" @click="sex=2" size="24"
							:color="sex==2?'#fea606':'#dfdfdf'"></uni-icons>女
					</view>
				</view>
			</view>
			<view class="tr">
				<view class="text">出生日期</view>
				<view class="td">
					<picker mode="date" :end="endDate" @change="maskClick" :value="birthday?birthday:endDate"
						:fields="fields">
						<view class="uni-input">
							{{birthday?birthday:'请选择'}}
							<icon class="iconfont icon-arrow-down-bold"></icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="tr">
				<view class="text">爸爸身高</view>
				<view class="td">
					<input class="input" type="digit" v-model="dadheight " placeholder="请输入">cm
				</view>
			</view>
			<view class="tr">
				<view class="text">妈妈身高</view>
				<view class="td">
					<input class="input" type="digit" v-model="momheight" placeholder="请输入">cm
				</view>
			</view>
		</view>
		<view class="table table2">
			<view class="text">当前标准身高</view>
			<view class="text">成年身高预测</view>
			<view class="td">
				<text>{{geneticheight}}</text>cm
			</view>
			<view class="td">
				<text>{{adultheight}}</text>
				<text class="text2" v-if="errorvalue">±{{errorvalue}}</text> cm
			</view>
		</view>
		<view class="btn mb-15" @click="handleClick">立即计算</view>
		<!-- <button open-type="share" class="share">
			<icon class="t-icon t-icon-fenxiang"></icon>分享朋友测一测
		</button> -->
		<view class="title mt-20">
			<view class="h5">如果当前实际身高﹤当前标准身高</view>
			<view class="con">孩子后天生长环境不利长高。请从饮食、睡眠、运动、情绪等方面排查。加强后天因素管理，让孩子处于最佳长高状态。</view>
			<view class="h5">如果当前实际身高﹥当前标准身高</view>
			<view class="con">孩子后天生长环境有利长高。请继续保持，加强后天因素管理，孩子成年可比标准高10cm以上。</view>
			<view class="con" v-for="(ite,ind) in Config.literature.height_prediction"
				v-if="Config.literature.height_prediction.length">
				{{ite}}
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sex: 1,
				errorvalue: 0,
				adultheight: 0,
				geneticheight: 0,
				dadheight: "",
				momheight: "",
				birthday: "",
				fields: "",
			}
		},
		computed: {
			...mapState(["user", "Config"]),
			endDate() {
				return this.$tools.getDate("start")
			},
		},
		onLoad() {
			let that = this
			// uni.showShareMenu({
			// 	withShareTicket: true,
			// 	menus: ["shareAppMessage"]
			// })
			// #ifdef APP-PLUS
			that.fields = "time"
			// #endif 
			// #ifndef APP-PLUS 
			that.fields = "day"
			// #endif
		},
		// onShareAppMessage(res) {
		// 	let that = this
		// 	return {
		// 		title: '快来测测你的孩子能长多高?',
		// 		path: '/pageTwo/share/shareHeight',
		// 		imageUrl: '../../static/share1.jpg',
		// 		success: function(res) {
		// 			console.log("分享到朋友成功")
		// 		},
		// 		fail: function(res) {
		// 			console.log("分享到朋友失败")
		// 		},
		// 	}
		// },
		methods: {
			handleClick() {
				let that = this
				if (!that.dadheight) {
					that.$tools.msg("请输入爸爸身高！");
					return
				}
				if (!that.momheight) {
					that.$tools.msg("请输入妈妈身高！");
					return
				}
				uni.showLoading({
					title: '计算中'
				});
				that.$model.GetPredictheight({
					dadHeight: that.dadheight,
					momHeight: that.momheight,
					birthday: that.birthday,
					sex: that.sex,
				}).then(res => {
					if (res.code != 0) return
					setTimeout(function() {
						uni.hideLoading();
					}, 1000);
					that.adultheight = res.data.adultheight
					that.geneticheight = res.data.geneticheight
					that.errorvalue = res.data.errorvalue
				})
			},
			//确定年龄
			maskClick(e) {
				this.birthday = e.detail.value
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 15px 10px;
		background: #fff;
		min-height: calc(100vh - 30px);

		.radio {
			display: flex;
			height: 34px;
			line-height: 34px;
		}

		picker {
			width: 100%;
			text-align: right;
			border: none;
			color: #333333;
		}

		.top {
			width: 100%;
			line-height: 30px;
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 30rpx;
			color: #999;

			text {
				width: 100%;
				display: block;
				text-align: center;
				font-size: 40rpx;
				color: #333;
				font-weight: 600;
			}
		}

		.h5 {
			font-size: 30rpx;
			color: #666;
		}

		.con {
			margin-top: 5px;
			color: #999;
			line-height: 22px;
			font-size: 28rpx;
		}

		.table,
		.table2 {
			width: 100%;
			border: 1px solid #d69231;
			border-bottom: none;
			box-sizing: border-box;
			border-spacing: inherit;
			font-size: 28rpx;
			height: auto;
			overflow: hidden;
			border-right: none;

			.tr {
				width: 50%;
				float: left;

				.text {
					width: 40%;
				}

				.td {
					width: 60%;
				}
			}

			.text {
				float: left;
				height: 35px;
				line-height: 35px;
				background: #ffcf85;
				box-sizing: border-box;
				border-bottom: 1px solid #d69231;
				border-right: 1px solid #d69231;
				text-align: center;
			}

			.td {
				box-sizing: border-box;
				background: #e4cdac21;
				display: flex;
				float: left;
				height: 35px;
				line-height: 35px;
				padding-right: 5px;
				padding-left: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				border-bottom: 1px solid #d69231;
				border-right: 1px solid #d69231;
				text-align: center;


				/deep/input {
					width: 95%;
					height: 35px;
					line-height: 35px;
					font-size: 30rpx !important;
				}
			}

		}

		.table2 {
			margin: 50rpx auto;
			border-right: none;
			text-align: center;

			.text {
				width: 50%;
				border-right: 1px solid #d69231;
			}

			.td {
				height: 50px;
				width: 50%;
				line-height: 50px;
				display: inherit;
				border-right: 1px solid #d69231;

				.text2 {
					font-size: 36rpx;
					font-weight: bold
				}
			}
		}
	}

	.btn {
		margin-top: 20px;
		margin-bottom: 15px;
		background-color: $maincolor;
	}
</style>