yiliangyiyun-app/pages/user/set_nickname.vue

<template>
	<view class="container">
		<view class="explain">
			昵称长度限制在2-24个字符内
		</view>
		<view class="editText">
			<input placeholder="请输入昵称" placeholder-color="#C6C6C6" name="input" v-model="nickname" class="texts"></input>
		</view>
		<view class="btn" :class="nickname.length==0?'':'btn-active'" @click="commit">
			保存
		</view>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				nickname: "",
				deptListurl: {},
			}
		},
		onLoad(param) {
			this.nickname = param.nickname
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {

			commit() {
				if (this.nickname == null || this.nickname == "") {
					this.$api.msg('请输入昵称！')
					return
				}
				if (this.nickname.length < 2 || this.nickname.length > 24) {
					this.$api.msg('请正确输入昵称！')
					return
				}
				var that = this
				that.deptListurl.userName = that.nickname
				that.deptListurl.id = that.userInfo.id
				that.$api.doRequest('post', '/commonUser/editUserInfo', that.deptListurl).then(
						res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '修改成功！',
									icon: 'success',
									duration: 2000,
									success() {
										setTimeout(()=>{
											var _student = uni.getStorageSync('userInfo');
											_student.userName = that.nickname;
											uni.setStorageSync('userInfo', _student);
											var name = 'userInfo';
											var value = _student;
											that.$store.commit('$uStore', {
												name,
												value
											});
											uni.navigateBack()
										},2000)
									}
								})
							}
						})
					.catch(res => {
						if(res.errmsg){
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});



			},
		}
	}
</script>

<style>
	.container {
		padding: 10px 0px;
		background-color: #F5F6FA;
	}

	.explain {
		margin-left: 16px;
		font-size: 16px;
		color: #6D6D72;
		margin-top: 20px;
	}

	.editText {
		width: 100%;
		height: 50px;
		background-color: #FFFFFF;
		line-height: 50px;
		padding-left: 20px;
		margin-top: 10px;
		padding-top: 12px;
		border-top: 1px solid #C9C9CB;
		border-bottom:1px solid #C9C9CB;
	}

	.texts {
		line-height: 50px;
		/* color: #C6C6C8; */
		font-size: 16px;
		/* placeholder-style="font-size:18px" */
	}
	.btn{
		width: 90%;
		height: 46px;
		font-size: 17px;
		margin:0 auto;
		margin-top: 16px;
		border-radius: 20px;
		line-height: 46px;
		font-weight: 500;
		text-align: center;
		background-color: #D8DAE0;
		color: #fff;
	}
	.btn-active {
		background-color: #FFFFFF;
		color: #22C572;
		
	}
</style>