就诊人信息

components/inputBox.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class="input-com">
+	<view :class="'input-wrapper'+(errormsg?' error':'')">
+		<view class="left">
+			<text :class="!required?'hide-start':''">*</text>
+			<view>{{label}}：</view>
+		</view>
+		<view class="right">
+			<textarea v-if="autoHeight" :auto-height="true" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></textarea>
+			<input v-else :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></input>
+		</view>
+	</view>
+	<view class="errmsg" v-if="errormsg">*{{errormsg}}</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "inputBox",
+  props: {
+	value: {
+		type: String,
+		default: ""
+	},
+	autoHeight: {
+		type: Boolean,
+		default: false
+	},
+	label: {
+		type: String,
+		default: ""
+	},
+    holder: {
+      type: String,
+      default: ''
+    },
+	rule: {
+	  type: String,
+	  default: ''
+	},
+	required: {
+	  type: Boolean,
+	  default: true
+	}
+  },
+  data() {
+    return {
+		errormsg:''
+    }
+  },
+  methods: {
+    handleBlur(e) {
+		var value = e.detail.value
+		var res = this.check(value);
+		if(!res){
+			this.$emit('blurEvent', '')
+			return
+		}
+		this.$emit('blurEvent', value)
+    },
+	handleInput(e){
+		if(!this.errormsg) return;
+		var value = e.detail.value
+		var res = this.check(value);
+		if(!res){
+			this.$emit('blurEvent', '')
+			return
+		}
+		this.$emit('blurEvent', value)
+	},
+	check(value){
+		var noEmptyVal = this.$trim.trim(value)
+		if(this.required && noEmptyVal.length<=0){
+			this.errormsg = this.label+'不能为空'
+			return false
+		}
+		
+		if(this.rule == 'phone' && !/^1[3-9]\d{9}$/.test(noEmptyVal)){
+			this.errormsg = '手机号格式不正确'
+			return false
+		}
+		
+		if(this.rule == 'idcardext' && (!/[a-z0-9A-Z]{4}/.test(noEmptyVal) || noEmptyVal.length!=4)){
+			this.errormsg = this.label+'格式不正确'
+			return false
+		}
+
+		this.errormsg = ''
+		return true
+	}
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+	.input-com{
+		.input-wrapper{
+			display: flex;
+			width: 666rpx;
+			min-height: 100rpx;
+			background: #FFFFFF;
+			border-radius: 12rpx;
+			border: 2rpx solid #DDDDDD;
+			padding: 27.5rpx 14rpx;
+			box-sizing: border-box;
+			margin: 0 auto;
+			font-size: 32rpx;
+			letter-spacing: 1rpx;
+			&.error{
+				border: 1rpx solid #FAB0B0;
+			}
+			.left{
+				display: flex;
+				min-width: 133rpx;
+				max-width: 232rpx;
+				text{
+					color: #F55555;
+					margin-right: 16rpx;
+				}
+				view{
+					color: #949699;
+				}
+				.hide-start{
+					opacity: 0;
+				}
+			}
+			
+			.right{
+				flex-grow: 1;
+				color: #242833;
+				text-align: right;
+				padding-left: 10rpx;
+				box-sizing: border-box;
+				textarea{
+					width: 100%;
+					height: 45rpx;
+				}
+			}
+		}
+		.errmsg{
+			min-height: 25rpx;
+			line-height: 30rpx;
+			font-size: 30rpx;
+			color: #FD0000;
+			width: 666rpx;
+			margin: 16rpx auto 0rpx;
+		}
+	}
+</style>

pages.json

@@ -4,7 +4,7 @@
             "path" : "pages/add_visitor_form/add_visitor_form",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "请选择就诊人",
+                "navigationBarTitleText": "就诊人信息",
                 "enablePullDownRefresh": false
             }
         },

pages/add_visitor_form/add_visitor_form.vue

@@ -1,27 +1,57 @@
 <template>
 	<view class="visitor-form-page">
 		<view class="block">
-			<view class="title">就诊人信息</view>
+			<view class="title PfScMedium">就诊人信息</view>
+			<input-box class="inputcom-wrapper" :value="name" holder="就诊人姓名" label="姓名" @blurEvent="nameBlurEvent"></input-box>
+			<input-box class="inputcom-wrapper" :value="idcardExt" holder="请输入身份证后4位" label="身份证尾号" @blurEvent="idCardBlurEvent" rule="idcardext"></input-box>
+			<input-box class="inputcom-wrapper" :value="phone" holder="请输入就诊人手机号" label="常用手机号" @blurEvent="phoneBlurEvent" rule="phone"></input-box>
 		</view>
 
 		<view class="submit-wrapper btPadding">
-			<view :class="'btn btn3 submit'+(canSubmit?' primary':' noclick')">
+			<view :class="'btn btn3 submit'+(canSubmit?' primary':' noclick')" :hover-class="(canSubmit?'hover':'')" @click="submit">
 				确认就诊人
 			</view>
 		</view>
-		
 	</view>
 </template>
 
 <script>
+	import inputBox from '@/components/inputBox.vue';
+
 	export default {
 		data() {
 			return {
-				canSubmit:false
+				canSubmit:false,
+				name:'',
+				idcardExt:'',
+				phone:''
 			}
 		},
+		components:{
+			inputBox
+		},
 		methods: {
-			
+			nameBlurEvent(value){
+				this.name = value
+				this.checkSubmit()
+			},
+			idCardBlurEvent(value){
+				this.idcardExt = value
+				this.checkSubmit()
+			},
+			phoneBlurEvent(value){
+				this.phone = value
+				this.checkSubmit()
+			},
+			checkSubmit() {
+				this.canSubmit = false
+				if(!this.name || !this.idcardExt || !this.phone) return
+				this.canSubmit = true
+			},
+			submit(){
+				this.checkSubmit()
+				if(!this.canSubmit) return
+			}
 		}
 	}
 </script>
@@ -32,13 +62,26 @@
 		height: 100vh;
 		overflow-y: scroll;
 		.block{
-			height: 50vh;
+			min-height: 50vh;
 			min-height: 562rpx;
 			background: #FFFFFF;
 			box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03);
 			border-radius: 8rpx;
 			width: 714rpx;
 			margin: 20rpx auto 0rpx;
+			overflow: hidden;
+			.title{
+				font-size: 32rpx;
+				color: #000000;
+				width: 666rpx;
+				height: 50rpx;
+				line-height: 50rpx;
+				letter-spacing: 2rpx;
+				margin: 36rpx 0 36rpx 24rpx;
+			}
+			.inputcom-wrapper{
+				margin-bottom: 20rpx;
+			}
 		}
 		.submit-wrapper{
 			overflow: hidden;