beiliyou_user_app/pages_user/user/addPatient.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="form-box">
				<view class="form-item vali">
				    <text class="label">姓名</text>
				    <input class="input-width" type="text" v-model="form.patientName" @blur="validateInput" placeholder="请如实填写您的真实姓名" placeholder-class="form-input" />
				    <text class="error" v-if="nameValied">{{ errorMessage }}</text>
				</view>
				<view class="form-item">
					<text class="label">身份证号</text>
					<input class="input-width" type="idcard" v-model="form.idCard" placeholder="请如实填写身份证号" placeholder-class="form-input" />
				</view>
				<view class="form-item">
					<text class="label">性别</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="genderChange(1)" value="1" :checked="form.gender===1" style="margin-right: 16upx;" />
							<text class="sex-text">男</text>
						</label>
						<label>
							<radio @click="genderChange(2)" value="2" :checked="form.gender===2" style="margin-right: 16upx;" />
							<text class="sex-text">女</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">出生年月</text>
					<picker class="birth-picker" mode="date"   @change="bindDateChange">
						<view class="right-box">
							<view class="input-box">
								<input type="text" :value="form.birthday" placeholder="请选择出生年月" placeholder-class="form-input" disabled="disabled" />
							</view>
							<image class="arrow" src="../../static/images/arrow_gray.png" mode=""></image>
						</view>
					</picker>
				</view>
				<!-- <view class="form-item">
					<text class="label">联系电话</text>
					<input type="number" value="" placeholder="请输入联系电话" placeholder-class="form-input" />
				</view> -->
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存就诊人</view>
		</view>
	</view>
</template>

<script>
	import {getPatientById,addPatient,editPatient} from '@/api/patient'
	
	export default {
		data() {
			return {
				type:null,
				patientId:null,
				errorMessage:"",
				nameValied:false,
				form: {
					gender: 1,
					birthday: ''
				}
			};
		},
		onLoad(option) {
			this.type=option.type;
			console.log(this.type)
			if(this.type=='edit'){
				this.patientId=option.patientId;
				this.getPatientById();
			}
		},
		methods:{
			genderChange(type){
				this.form.gender=type
			},
			getPatientById(){
				var data={patientId:this.patientId};
				getPatientById(data).then(
					res => {
						if(res.code==200){
							  this.form=res.data;
						}else{
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			validateInput() {
			      const regex = /^[\u4e00-\u9fa5]{1,}$/;//汉字
			      if (!regex.test(this.form.patientName)) {
					 this.nameValied=true;
			         this.errorMessage = '姓名必须为汉字';
			      } else {
					 this.nameValied=false;
			         this.errorMessage = '';
			      }
			},
			submit(){
				 if(this.form.patientName==''){
					 uni.showToast({
					 	  icon:'none',
					      title: '请填写姓名'
					 });
					 return;
				 }
				 // if(this.form.idCard==''){
					//  uni.showToast({
					// 	  icon:'none',
					// 	  title: '请填写身份证号'
					//  });
					//  return;
				 // }
				
				 const regex = /^[\u4e00-\u9fa5]{1,}$/;//汉字
				 if (!regex.test(this.form.patientName)) {
					  uni.showToast({
						icon:'none',
					  	title: '姓名必须为汉字'
					  });
					return;
			     }
				 
				if(this.type=="add"){
					this.addPatient()
				}
				else if(this.type=="edit"){
					this.editPatient()
				}
			},
			editPatient(){
				editPatient(this.form).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshPatient');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addPatient(){
				
				addPatient(this.form).then(
					res => {
						if(res.code==200){
							 uni.showToast({
							 	icon:'success',
							 	title: "操作成功",
							 });
							 setTimeout(function() {
								 uni.$emit('refreshPatient');
								 uni.navigateBack({
									 delta: 1
								 })
							 }, 500);
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthday = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.inner{
			height: calc(100% - 120upx);
			padding: 20upx;
			.form-box{
				padding: 20upx 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				.form-item{
					height: 103rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;
					position: relative;
					&:last-child{
						border-bottom: none;
					}
					.label{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-bottom: 10rpx;
					}
					.input-width{
						width: calc(100% - 150upx);
						text-align: right;
						line-height: 103rpx;
						height: 103rpx;
					}
					.form-input{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: right;
					}
					.sex-text{
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 30upx;
					}
					.birth-picker {
						display: flex;
						align-items: center;
						.right-box{
							display: flex;
							align-items: center;
							.input-box{
								width: 400upx;
								display: flex;
								align-items: center;
								justify-content: flex-end;
								input{
									text-align: right;
								}
							}
							.arrow{
								width: 13upx;
								height: 23upx;
								margin-left: 20upx;
							}
						}
					}
				}
			    
				.vali{
					height: 123rpx;
					.label{
						margin-bottom: 20rpx;
					}
					.input-width{
						line-height: 123rpx;
						height: 123rpx;
						margin-bottom: 20rpx;
					}
					.form-input{
						
					}
				}
				.error{
			    	color:red;
			    	font-size: 24rpx;
					position: absolute;
					left: 0;
					bottom: 10rpx;
					border-bottom: 1px solid #F1F1F1;
			    }
			}
		}
		.btn-box{
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			.sub-btn{
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #018C39;
				border-radius: 44upx;
			}
		}
	}
</style>