mdapp/pages/user/setting/profile.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="修改头像" prop="nickname" @click.native="pageTo('/pages/user/setting/avatar')">
					<u-icon name="arrow-right" style="float: right;" size="24" label="请选择" labelPos="left"></u-icon>
				</u-form-item>
				<!-- <u-form-item label-width="150" label="昵称" prop="nickname" required>
					<u-input placeholder="请输入昵称" v-model="form.nickname" inputAlign="right" type="text"></u-input>
				</u-form-item> -->
				<!-- <u-form-item label-width="150" label="身份" prop="groupTypeName" required>
					<u-input type="select"  inputAlign="right" :select-open="groupTypeSelectShow" v-model="form.groupTypeName" placeholder="请选择身份" @click="groupTypeSelectShow = true"></u-input>
				</u-form-item> -->
				<u-form-item label-width="150" label="密码" prop="password">
					<u-input placeholder="非必填,填了就会重置密码" v-model="form.password" inputAlign="right" type="text"></u-input>
				</u-form-item>
			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
			<u-gap></u-gap>
		</view>
		<!-- utoast -->
		<u-toast ref="uToast" />
		<u-select mode="single-column" :list="groupTypeSelectList" v-model="groupTypeSelectShow" @confirm="groupTypeSelectConfirm"></u-select>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			groupTypeSelectShow: false,
			groupTypeSelectList: [],
			maskShow: false,
			form: {
				nickname: null,
				password: null,
			},
			rules: {
				nickname: [
					{
						required: true,
						message: '昵称不得为空',
						trigger: ['change', 'blur']
					},
				],
				// groupTypeName: [
				// 	{
				// 		required: true,
				// 		message: '身份不得为空',
				// 		trigger: ['change', 'blur']
				// 	},
				// ],
			},
		}
	},
	onLoad(params) {
		const userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.form.nickname = userInfo2.nickname
		this.form.group_type = userInfo2.group_type
		const dictObj = uni.getStorageSync('MD_dict')
		let list = dictObj.group_type || []
		let groupTypeSelectList = []
		list.forEach(item => {
			if (item.val == userInfo2.group_type) {
				this.form.groupTypeName = item.key
			}
			groupTypeSelectList.push({
				value: item.val,
				label: item.key,
			})
		})
		this.groupTypeSelectList = [...groupTypeSelectList]
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		groupTypeSelectConfirm(e) {
			e.map((val, index) => {
				this.form.group_type = val.value;
				this.form.groupTypeName = val.label;
			});
		},
		pageTo(path) {
			// console.log(path)
			if (path === 'dev') {
				uni.$msg('开发中~')
				return
			}
			uni.navigateTo({
				url: path
			})
		},
		submitHandle() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let params = {
						nickname: this.form.nickname,
						// group_type: this.form.group_type
					}
					if (this.form.password) {
						params.password = this.form.password
					}
					uni.api.base.apiuseredit(params).then(res => {
						uni.$msgConfirm('编辑成功', () => {
							uni.reLaunch({
								url: '/pages/user/setting/setting'
							})
						}, () => {
							uni.reLaunch({
								url: '/pages/user/setting/setting'
							})
						})
					})
				}
			})
		}
	}
};
</script>
<style lang="scss">
.page {
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
	border-radius: 10rpx;

	image {
		border-radius: 10rpx;
	}
}

.footer {
	position: relative;
	text-align: center;
	font-size: $u-p2;
	left: 0;
	bottom: 20rpx;
	.agreement {
		color: $u-theme-color;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}

.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 400rpx;
	height: 400rpx;
	background-color: #fff;
}
</style>