shenweishi/pages/Health_record/creatinine.vue

<template>
	<view class="content">
		<view class="content_top">
			<view class="text_width">血肌酐情况</view>
		</view>
		<view class="">
			<view class="value_box" style="">
				<view class="box p_cnt_list" style="">
					<!-- <van-cell-group inset>
					  <van-field v-model="value" label="血肌酐数值" placeholder="请输入" />
					</van-cell-group> -->
					<view>血肌酐数值</view>
					<view class="text">
						<input type="text"  placeholder="请输入" value=''/>
					</view>
				</view>
			</view>
			<view class="value_box" style="">
				<view class="box" style="">
					<view class="text" style="">血肌酐单位</view>
					<view class="option" style="">
						<van-radio-group v-model="checked" direction="horizontal" 
							v-for="(item, index) in unitarr" :key="index">
						  <van-radio class="radio" :name="item.id">{{item.name}}</van-radio>
						</van-radio-group>
					</view>
				</view>
			</view>
			<view class="value_box" style="">
				<view class="time_box" style="" @click="startShow = true">
					<view class="time_text" style="">化验时间</view>
					<view class="time_value" style="">
						<!-- <text v-if="">请选择></text> -->
						<text>{{formatDate((currentDate/1000),'yyyy-MM-dd')}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content_bottom" style="">
			<view class="button_box" style="" @click="next_click">
				<view class="button" style="">下一步</view>
			</view>
		</view>
		
		<van-popup :show="startShow"
		    position="bottom" :style="{ height: '40%' }"
		>
			<van-datetime-picker
				:value="currentDate"
				type="date"
				:min-date="minDate"
				:max-date="maxDate"
				@confirm = "confirm"
				@cancel = "cancel"
			/>
		</van-popup>
	</view>
	
</template>

<script>
	import moment from 'moment'
	import {formatDate} from "@/utils/formatDate.js"
	export default {
		data() {
			return {
				unitarr:[{id:1,name:'umol/L'},{id:2,name:'mg/dl'}],
				startShow:false,
				currentDate: new Date().getTime(),
				minDate: new Date(1924,0,1).getTime(),
				maxDate: new Date().getTime(),
				// Test_time:'',
			}
		},
		methods: {
			showclick(){
				console.log('111111',this.startShow);
				this.startShow = true
			},
			confirm(e){
				this.currentDate = e.detail
				this.startShow = false
			},
			cancel(){
				this.startShow = false
			},
			formatDate(value, fmt) {
				return formatDate(new Date(value * 1000), fmt)
			},
			next_click(){
				wx.navigateTo({
					url:'/pages/Health_record/albumen'
				})
				console.log('跳转尿蛋白');
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.content_top{
		padding: 40rpx;
		.text_width{
			font-weight: 900;
		}
	}
	.value_box{
		padding: 10rpx 40rpx;
		.box{
			border-bottom: 1px solid black;
			.text{
				line-height: 40px;
			}
			.option{
				display: flex;
				text-align: center;
				padding-bottom: 5px;
				.option_text{
					width: 130rpx;
					line-height: 60rpx;
					border: 1px solid;
					border-radius: 20rpx;
					margin-right: 10px;
				}
				.radio{
					margin-right: 80rpx;
				}
			}
		}
		.time_box{
			display: flex;
			line-height: 80rpx;
			.time_text{
				text-align: left;
				flex: 1;
			}
			.time_value{
				text-align: right;
				flex: 1;
			}
		}
		.p_cnt_list {
			height: 60rpx;
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			.text{
				text-align: right;
			}
			// font-weight: bold;
		}
	}
	.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>