yiliangyiyun-app/pages/user/set_nickname.vue

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

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				nickname: "",
				deptListurl: {},
			}
		},
		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
				uni.showModal({
					content: "您确定要更改昵称？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							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) {
									// this.$api.msg('修改成功！')
									var _student = uni.getStorageSync('userInfo');
									_student.userName = that.nickname;
									uni.setStorageSync('userInfo', _student);
									uni.navigateBack()
								}
								})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
								});
							
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					},
				})
				
				
				
			},
		}
	}
</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;
	}

	.texts {
		line-height: 50px;
		color: #C6C6C8;
		font-size: 16px;
		/* placeholder-style="font-size:18px" */
	}

	.btn {
		width: 100%;
		height: 50px;
		background-color: #FFFFFF;
		text-align: center;
		color: #22C572;
		font-size: 20px;
		margin-top: 16px;
		border-radius: 20px;
		line-height: 50px;
		font-weight: 500;
	}
</style>