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) {
											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
										})
									}
								});

						} 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>