RiyueGorge/pages/userCenter/userEdit.vue

<template>
	<view class="edit">
		<view class="form">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1" >
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"  labelWidth="200rpx">
					<u--input v-model="form.userInfo.name" border="none" placeholder="请输入姓名" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
					
				<u-form-item label="性别" labelWidth="200rpx"  prop="userInfo.gender" borderBottom @click="showgender = true;" ref="item1">
					<picker @change="bindPickerChange" :value="index" :range="genderArray">
						<view class="" style="display: flex;">
							<u--input v-model="form.userInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择性别" placeholderStyle="color: #555555" border="none"></u--input>
							<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						</view>
					</picker>
				</u-form-item>
			
				<u-form-item label="出生日期" labelWidth="200rpx"  borderBottom ref="item1">
					 <picker  mode="date" :value="form.userInfo.birthday" start="1922-01-01" @change="bindDateChange" >
						 <view class="" style="display: flex;">
						 	<u--input v-model="form.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择出生日期" placeholderStyle="color: #555555" border="none" ></u--input>
						 	<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						 </view>
					
					 </picker>
				</u-form-item>
				
				<u-form-item label="邮箱" labelWidth="200rpx"  borderBottom ref="item1" >
				    <u--input v-model="form.userInfo.email" border="none" placeholder="请输入邮箱" placeholderStyle="color: #555555"></u--input>
				</u-form-item>
				
				<u-form-item label="证件类型" labelWidth="200rpx"  borderBottom ref="item1" prop="userInfo.certificate_type">
					<picker @change="bindType" :value="index" :range="typeArray">
						<view class="" style="display: flex;">
							<u--input v-model="form.userInfo.certificate_type" disabled disabledColor="#ffffff" placeholder="请选证件类型" placeholderStyle="color: #555555" border="none" ></u--input>
							<u-icon slot="right" name="arrow-right" size="28"></u-icon>
						</view>
					</picker>
				</u-form-item>
				
				<u-form-item label="证件号码" labelWidth="200rpx"  prop="userInfo.certificatesNumber"  borderBottom ref="item1" >
				     <u--input v-model="form.userInfo.certificatesNumber" border="none" placeholder="请输入证件号" placeholderStyle="color: #555555"></u--input>
				    </u-form-item>
			    </u--form>
		</view>
		
		
		<view class="navbar">
			保存
		</view>
	</view>
</template>
			
<script>
	export default {
		data() {
			return {
				// 性别选择
				 genderArray: ['男', '女'],
				 // 证件类型
				 typeArray:["居民身份证","临时身份证","士兵证","暂住证","外交护照","普通护照","台湾居民来往大陆通行证","港澳居民来往内地通行证","港澳同胞回乡证","其他证件（包括联合国通行证 欧洲共同体护照等）"],
				 // index:0,
				form: {
					userInfo: {
					name: '',
					gender: '',
					email:'',
					birthday:"",
					certificate_type:'',
					certificatesNumber:''
					},
				},
				actions: [
					{name: '男',},
					{name: '女',}
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.gender': {
						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']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			// 选择性别
			bindPickerChange(e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
				console.log(this.genderArray[e.detail.value])
			   this.form.userInfo.gender=this.genderArray[e.detail.value]
			},
			// 选择护照类型
			bindType(e) {
			   this.form.userInfo.certificate_type=this.typeArray[e.detail.value]
			},
			// 选择出生日期
			bindDateChange (e) {
			    console.log(e)
			    this.form.userInfo.birthday  = e.detail.value
			},
		}
    };
</script>

<style lang="less">
	.u-form-item__body.data-v-5e7216f1{
		padding: 18px 0 !important;
	}
	page{
		background-color: #F4F4F4;
	}
	.form{
		background-color: #ffffff;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		padding: 30rpx 30rpx 0;
		margin: 20rpx 30rpx 0;
	}
	.navbar{
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		background: #1E9F6A;
		border-radius: 16rpx 16rpx 0px 0px;
		color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;
		text-align: center;
	}
</style>