RiyueGorge/components/peopleInfo.vue

<template>
	<view class="peoplePage">
		<u-button type="primary" icon="camera" shape="circle" text="识别身份证信息" plain></u-button>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="form1" >
			<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"  labelWidth="160rpx">
			    <u--input v-model="form.userInfo.name" border="none" ></u--input>
			</u-form-item>
			
			<u-form-item label="性别" labelWidth="200rpx"  prop="userInfo.sex" borderBottom @click="showgender = true;" ref="item1">
				<u--input v-model="form.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="生日" labelWidth="200rpx"  borderBottom @click="showbirthday = true; " ref="item1">
				 <u--input v-model="form.userInfo.birthday" border="none" ></u--input>
				 <u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="证件类型" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.certificatesType">
			    <u--input v-model="form.userInfo.certificatesType" disabled disabledColor="#ffffff" placeholder="请选证件类型" border="none" ></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="证件号码" labelWidth="200rpx"  prop="userInfo.certificatesNumber"  borderBottom ref="item1" >
			    <u--input v-model="form.userInfo.certificatesNumber" border="none" ></u--input>
			</u-form-item>
			
			<u-form-item label="紧急联系人" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.contactsName">
			    <u--input v-model="form.userInfo.contactsName" border="none"  placeholder="紧急联系人姓名"></u--input>
			</u-form-item>
			
			<u-form-item label="紧急联系人" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.contactsNumber">
			    <u--input v-model="form.userInfo.contactsNumber" border="none"  placeholder="紧急联系人手机号"></u--input>
			</u-form-item>
			
			<u-form-item>
				<view class="" style="margin-bottom: 20rpx;">
					饮食禁忌
				</view>
			    <u-textarea v-model="form.userInfo.food" placeholder="请输入内容" count height=120></u-textarea>
			</u-form-item>
			
			<u-form-item>
				<view class="" style="margin-bottom: 20rpx;">
					期望改善建康状况
				</view>
			    <u-textarea v-model="form.userInfo.food" placeholder="请输入内容" count height=120></u-textarea>
			</u-form-item>
		</u--form>
		
		<u-button type="primary" text="保存" plain></u-button>
		
		<!-- 性别选择 -->
		<u-action-sheet :show="showgender" :actions="actions" title="请选择性别" @close="showgender = false" @select="sexSelect"> </u-action-sheet>
		<!-- 出生日期选择 -->
		 <!-- <u-datetime-picker :show="showbirthday" ref="datetimePicker" v-model="value1" mode="year-month" :formatter="formatter"> </u-datetime-picker> -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 性别选择器
				showgender: false,
				// 生日选择器
				// showbirthday:false,
				value1: Number(new Date()),
				form: {
					userInfo: {
					name: '',
					sex: '',
					birthday:"",
					certificatesType:'',
					certificatesNumber:'',
					// 联系人姓名
					contactsName:"",
					// 联系人电话
					contactsNumber:'',
					food:''
					},
				},
				actions: [
					{name: '男',},
					{name: '女',}
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
					"userInfo.certificatesNumber":{
						type: 'string',
						len: 18,
						required: true,
						message: '请填写正确的证件号',
						trigger: ['blur']
					},
					"userInfo.certificatesType":{
						type: 'string',
						required: true,
						message: '请填写证件类型',
						trigger: ['blur', 'change']
					},
					"userInfo.contactsName":{
						type: 'string',
						required: true,
						message: '请填写紧急人姓名',
						trigger: ['blur']
					},
					"userInfo.contactsNumber":{
						type: 'string',
						required: true,
						message: '请填写紧急联系人电话',
						trigger: ['blur']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		methods:{
			sexSelect(e) {
				this.form.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
		}
	}
</script>

<style lang="less">
	.peoplePage{
		padding: 20rpx;
		// background-color: #efefef;
	}
</style>