ryx/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"  disabledColor="#fff" @blur="changeAll(1)"></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" prop="userInfo.email">
				    <u--input v-model="form.userInfo.email" border="none" placeholder="填写邮箱" placeholderStyle="color: #555555"  disabledColor="#fff"  @blur="changeAll(2)"></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.certificate_no"  borderBottom ref="item1" >
				     <u--input v-model="form.userInfo.certificate_no" border="none" placeholder="填写证件号码" placeholderStyle="color: #555555"   disabledColor="#fff"  @blur="changeAll(3)"></u--input>
				    </u-form-item>
			    </u--form>
		</view>
		
		<!-- <view class="navbar" @click="save" v-if="!editbtn">
			保存
		</view>
		<view class="navbar" @click="editMsg" v-if="editbtn">
			修改
		</view> -->
	</view>
</template>
			
<script>
	export default {
		data() {
			return {
				// 性别选择
				 genderArray: ['男', '女'],
				 // 证件类型
				 typeArray:["身份证"],
				 // index:0,
				form: {
					userInfo: {
					name: '',
					gender: '',
					email:'',
					birthday:"",
					certificate_type:'',
					certificate_no:''
					},
				},
				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.email': {
						type: 'string',
						required: true,
						message: '请填写邮箱',
						trigger: ['blur', 'change']
					},
					// "userInfo.certificate_no":{
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写正确的证件号',
					// 	trigger: ['blur']
					// },
					// "userInfo.certificatesType":{
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写证件类型',
					// 	trigger: ['blur', 'change']
					// },
				},
				radio: '',
				switchVal: false,
				editbtn:false
			};
		},
		onLoad() {
			this.init()
			
		},
		methods: {
			init(){
				this.$showLoadding("加载中")
				uni.$u.http.post('/api/user/show',{
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					if(res){
						let form=res
						
						if(form.gender==1){
							form.gender="男"
						}else{
							form.gender="女"
						}
						if(form.certificate_type==1){
							form.certificate_type="身份证"
						}
						this.form.userInfo=form
						this.editbtn=true
					}
					
				}).catch((err) => {
					uni.hideLoading()
					console.log( err)
				})
			},
			changeAll(e){
				console.log(e)
				if(e==2){
					if(!this.$util.email(this.form.userInfo.email)){
						console.log(8888)
						this.$toast("请填写正确的邮箱")
						return
					}
				}
				if(e==3){
					if(!this.$util.idCard(this.form.userInfo.certificate_no)){
						console.log(8888)
						this.$toast("请填写正确的身份证号码")
						return
					}
				}
				this.save()
			},
			// 选择性别
			bindPickerChange(e) {
			   
			   this.form.userInfo.gender=this.genderArray[e.detail.value]
			   this.save()
			},
			// 选择护照类型
			bindType(e) {
				
			   this.form.userInfo.certificate_type=this.typeArray[e.detail.value]
			   // this.save()
			},
			// 选择出生日期
			bindDateChange (e) {
			    this.form.userInfo.birthday  = e.detail.value
				this.save()
			},
			editMsg(){
				uni.navigateTo({
					url:"/pages/userCenter/editMsg?form="+JSON.stringify(this.form.userInfo)
				})
			},
			save(){
				this.$showLoadding("加载中")
				let form={
					name:this.form.userInfo.name,
					gender: this.form.userInfo.gender,
					email: this.form.userInfo.email,
					birthday: this.form.userInfo.birthday,
					certificate_type:this.form.userInfo.certificate_type,
					certificate_no: this.form.userInfo.certificate_no
				}
				if (this.form.userInfo.gender == "男") {
					form.gender = 1
				} else {
					form.gender = 2
				}
				if (this.form.userInfo.certificate_type== "身份证") {
					form.certificate_type = 1
				}
				// if(!this.$util.email(form.email)){
				// 	this.$toast("请填写正确的邮箱")
				// 	return
				// }
				
				setTimeout(()=>{
					uni.$u.http.post('/api/user/edit',form,{
						custom: {
							auth: true
						}
					}).then((res) => {
						uni.hideLoading()
						// this.init()
						this.$toast("保存成功")
					}).catch((err) => {
						uni.hideLoading()
						this.$toast(err.message)
					})
				},500)
				
			}
		}
    };
</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>