ryx/pages/userCenter/editMsg.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" prop="userInfo.email">
					<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.certificate_no" borderBottom ref="item1">
					<u--input v-model="form.userInfo.certificate_no" border="none" placeholder="填写证件号码"
						placeholderStyle="color: #555555"></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',
						len: 18,
						required: true,
						message: '请填写正确的证件号',
						trigger: ['blur']
					},
					"userInfo.certificatesType": {
						type: 'string',
						required: true,
						message: '请填写证件类型',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				editbtn: false
			};
		},
		onLoad(o) {
			if (o.form) {
				let form = JSON.parse(o.form)
				this.form.userInfo = form
			}

		},
		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
			},
			editMsg() {

			},
			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
				}
				uni.$u.http.post('/api/user/edit', form, {
					custom: {
						auth: true
					}
				}).then((res) => {
					uni.hideLoading()
					this.$toast("保存成功")
					uni.navigateTo({
						url: "/pages/userCenter/userEdit"
					})
				}).catch((err) => {
					uni.hideLoading()
					this.$toast(err.message)
				})
			}
		}
	};
</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>