shenweishi/pages/Health_record/index.vue

<template>
	<view class="content">
		<view class="content_top">
			<view class="text_width" style="">选择性别</view>
			<view class="sex_box" style="">
				<van-radio-group v-model="checked" direction="horizontal">
				  <van-radio class="radio" name="1" style="">男</van-radio>
				  <van-radio name="2">女</van-radio>
				</van-radio-group>
			</view>
			<view class="text_width" style="">身高体重</view>
			<view class="hw_eight" style="">
				<view class="height" style="">
					<view class="margin">
						<text>身高:</text>
					</view>
					<view class="">
						<input class="input" style="" type="text" />
					</view>
					cm
				</view>
				<view class="height">
					<view class="margin">
						<text>体重:</text>
					</view>
					<view class="">
						<input class="input" style="" type="text" />
					</view>
					kg
				</view>
			</view>
			<view class="text_width" style="">选择生日</view>
			<view class="" style="">
			<van-datetime-picker
			  :value="currentDate"
			  type="date"
			  :min-date="minDate"
			  :max-date="maxDate"
			  @change="onChange()"
			  @confirm = "confirm"
			/>
		</view>
		</view>
		<view class="content_bottom" style="">
			<view class="button_box" style="" @click="next_click">
				<view class="button" style="">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				checked:1,
				currentDate: new Date(1974,0,1).getTime(),
				minDate: new Date(1924,0,1).getTime(),
				maxDate: new Date().getTime(),
				date:new Date(),
			}
		},
		methods: {
			// 选择时间确认
			confirm(e){
				this.currentDate = e.detail
				// let year = new Date(e.detail).getFullYear()
				// let month = new Date(e.detail).getMonth() + 1
				// let day = new Date(e.detail).getDate()
				// if (month >= 1 && month <= 9) {
				// 	month = `0${month}`
				// }
				// if (day >= 1 && day <= 9) {
				// 	day = `0${day}`
				// }
				// this.currentDate = `${year}-${month}-${day}`
				console.log('11111',this.currentDate);
			},
			onChange(e){
				console.log('22222',this.currentDate);
			},
			next_click(){
				wx.navigateTo({
					url:'/pages/Health_record/disease'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.content_top{
		padding: 50rpx;
		.text_width{
			font-weight: 900;
		}
		.sex_box{
			padding: 40rpx 0;
			.radio{
				margin-right: 80rpx;
			}
		}
		.hw_eight{
			padding: 40rpx 0;
			display: flex;
			.height{
				flex:1;
				display: flex;
				.margin{
					padding-right: 10rpx;
				}
				.input{
					// display:inline-block;
					// border: 1px solid black;
					width: 150rpx;
					
				}
			}
		}
	}

	.content_bottom{
		width: 100%;
		position: fixed;
		bottom: 30rpx;
		.button_box{
			margin: 0 auto;
			width: 80%;
			background:linear-gradient(#4dc691,#66cfa1,#7ad7ae);
			border-radius: 100rpx;
			display: flex;
			.button{
				flex: 1;
				line-height:90rpx;
				color: white;
				text-align: center;
			}
		}
	}
}
</style>