wit-uniapp/pages/my/Personalinformation/Informationmodification/Informationmodification.vue

<template>
	<view class="OutermostLayer">
	<view class="Personalinformationedit">

				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form
						labelPosition="left"
						:model="model1"
						:rules="rules"
						ref="form1">
					<u-form-item
					labelWidth="120"
							label="用户名:"
							prop="userInfo.realName"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.realName"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"
							label="手机:"
							prop="userInfo.mobile"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.mobile"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
					labelWidth="120"
							label="邮箱:"
							prop="userInfo.email"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.email"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<u-form-item
							label="性别:"
								labelWidth="120"
							prop="userInfo.gender"
							borderBottom
							@click="showSex = true"
							ref="item1"
					>
						<u--input
								v-model="model1.userInfo.gender"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择性别"
								border="none"
						></u--input>
						<u-icon
								slot="right"
								name="arrow-right"
						></u-icon>
					</u-form-item>
					<!--<u-form-item-->
					<!--labelWidth="120"-->
							<!--label="地址:"-->
							<!--prop="userInfo.address"-->
							<!--borderBottom-->
							<!--ref="item1"				>-->
						<!--<u&#45;&#45;input-->
								<!--v-model="model1.userInfo.address"-->
								<!--clearable-->
								<!--border="none"-->
						<!--&gt;</u&#45;&#45;input>-->
					<!--</u-form-item>-->
					<u-form-item
					labelWidth="120"
							label="部门:"
							prop="userInfo.deptName"
							borderBottom
							ref="item1"				>
						<u--input
								v-model="model1.userInfo.deptName"
								clearable
								border="none"
						></u--input>
					</u-form-item>
					<!--<u-form-item-->
					<!--labelWidth="120"-->
							<!--label="职位:"-->
							<!--prop="userInfo.position"-->
							<!--borderBottom-->
							<!--ref="item1"				>-->
						<!--<u&#45;&#45;input-->
								<!--v-model="model1.userInfo.position"-->
								<!--clearable-->
								<!--border="none"-->
						<!--&gt;</u&#45;&#45;input>-->
					<!--</u-form-item>-->

				</u--form>
				<!--<u-action-sheet-->
						<!--:show="showSex"-->
						<!--:actions="actions"-->
						<!--title="请选择性别"-->
						<!--@close="showSex = false"-->
						<!--@select="sexSelect"-->
				<!--&gt;-->
				<!--</u-action-sheet>-->

				<view class="submitdata">
					<u-button  type="primary" @click="submit">提交</u-button>
				</view>
			</view>
		<u-notify ref="uNotify" message="" ></u-notify>

		<u-picker :show="showSex" @cancel="showSex = false"  @confirm="sexSelect" :columns="actions" keyName="name"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getuserInfo:{},
				showSex: false,
				model1: {
					userInfo: {
						realName: '',
						gender: '',
						mobile:'',
						email:'',
					//	address:'安徽省合肥市',
						deptName:'',
					//	position:'前端工程师'
					},
				},
				actions: [
					[
						{
							id:0,
							name: '男',
						},
						{
							id:1,
							name: '女',
						},
						{id:2,
							name: '保密',
						},
					]
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
				'userInfo.email': [
							{
								required: true,
								message: '请输入邮箱号',
								trigger: ['change','blur'],
							},
							{
								// 自定义验证函数，见上说明
								validator: (rule, value, callback) => {
									// 上面有说，返回true表示校验通过，返回false表示不通过
									// uni.$u.test.mobile()就是返回true或者false的
									return uni.$u.test.email(value);
								},
								message: '邮箱不正确',
								// 触发器可以同时用blur和change
								trigger: ['change','blur'],
							}
						],
						'userInfo.mobile': [
									{
										required: true,
										message: '请输入邮箱',
										trigger: ['change','blur'],
									},
									{
										// 自定义验证函数，见上说明
										validator: (rule, value, callback) => {
											// 上面有说，返回true表示校验通过，返回false表示不通过
											// uni.$u.test.mobile()就是返回true或者false的
											return uni.$u.test.mobile(value);
										},
										message: '手机号码不正确',
										// 触发器可以同时用blur和change
										trigger: ['change','blur'],
									}
								],


					'userInfo.gender': {
						type: 'string',
						max: 2,
						required: true,
						message: '请选择',
						trigger: ['blur', 'change']
					},
				},

			};
		},
		onLoad(options){
		let userInfo= uni.getStorageSync('getuserInfo');
			if(userInfo.gender==0){
				userInfo.gender='男'
			}else if(userInfo.gender==1){
				userInfo.gender='女'
			}else if(userInfo.gender==2){
				userInfo.gender='保密'
			}
		//	console.log('111111111111111111',userInfo)
			this.model1.userInfo=userInfo;
			//this.getuserInfo

		},
		methods: {

			sexSelect(e) {
				//console.log('111111111111111111',e)
				this.model1.userInfo.gender = e.value[0].name;
				this.$refs.form1.validateField('userInfo.gender')
				this.showSex=false;
			},
			submit() {
						this.$refs.form1.validate().then(res => {

							if(this.model1.userInfo.gender=='男'){
								this.model1.userInfo.gender=0
							}else if(this.model1.userInfo.gender=='女'){
								this.model1.userInfo.gender=1
							}else if(this.model1.userInfo.gender=='保密'){
								this.model1.userInfo.gender=2
							}
							this.$api.put('/user/',this.model1.userInfo)
									.then(res=>{
										console.log('111111111111111111',res)
										if(res.data.code==0){
											uni.navigateBack({
												delta: 1
											});
										}else{
											this.$refs.uNotify.error(res.data.msg)
										}
									})


						}).catch(errors => {
							uni.$u.toast('校验失败')
						})
					},

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	    	this.$refs.form1.setRules(this.rules)
	    },
	};
</script>

<style lang="scss">
.Personalinformationedit{
	padding: 30rpx;

}
.submitdata{
	margin-top: 40rpx;
}

</style>