ds_mobile_app/mobile/pages/user/changeInfo.vue

<!-- 修改昵称 -->
<template>
	<view class='edit_nick_name'>
		<view class='input_wrap flex_row_between_center'>
			<input type='text' v-model='memberNickName' maxlength='15' placeholder='这么好的你，应该拥有更好的昵称~' placeholder-style='font-size:26rpx;color:#949494'
			 @input='inputCon' confirm-type='done' @confirm='saveCon'></input>
			<text @click="clearCon" v-show="memberNickName" class='clear_con iconfont iconguanbi' />
		</view>
		<view v-show="memberNickName" class='count'>
			<text class='cur_count'>{{memberNickName.length}}</text><text class="totla_count">/15</text>
		</view>
		<view class="member_nickname_btn" @click="saveCon">{{$L('保存')}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				memberNickName: '',
				limitNum: 15,
			};
		},
		onLoad(option) {
			this.memberNickName = decodeURIComponent(option.nickName);
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			//input输入事件
			inputCon(e) {
				let {
					limitNum
				} = this;
				let con = e.detail.value;
				if (con.length <= limitNum) {
					this.memberNickName = con;
				}
			},
			//保存数据
			saveCon() {
				let {
					memberNickName
				} = this;
				if (memberNickName.trim().length == 0) {
					this.$api.msg('请输入昵称');
				}else if(memberNickName.trim().length>10){
					this.$api.msg('请输入15个字以内的昵称');
				} else {
					this.saveMemInfo('memberNickName', memberNickName);
				}
			},
			//清空输入值
			clearCon() {
				this.memberNickName = '';
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},

			//保存会员信息
			saveMemInfo(index, val) {
				let param = {};
				param.url = 'v3/member/front/member/updateInfo';
				param.data = {};
				param.method = 'POST';
				param.data[index] = val;
				this.$request(param).then(res => {
					this.$api.msg(res.msg);
					if (res.state == 200) {
						uni.showToast({
							title:'修改成功！',
							icon:'none',
							duration:500
						})
						setTimeout(()=>{
							this[index] = val;
							//更新上个页面的会员昵称
							var pages = getCurrentPages(); //当前页面栈  
							if (pages.length > 1) {
								var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
								beforePage.$vm.updateMemInfo(val); //触发上个面中的方法updateMemInfo()  
							}
							uni.navigateBack();
						},700)
					}
				}).catch((e) => {
					//异常处理
				})
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: $bg-color-split;
		width: 750rpx;
		margin: 0 auto;
	}

	.edit_nick_name {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		.member_nickname_btn{
			width: 680rpx;
			height: 80rpx;
			background: linear-gradient(-90deg, #FB1D1B 0%, #FF7A18 100%);
			border-radius: 37rpx;
			margin: 40rpx auto 0;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.edit_nick_name .input_wrap {
		height: 100rpx;
		padding: 0 20rpx;
		width: 100%;
		background-color: #fff;
	}

	.edit_nick_name .input_wrap input {
		width: 450rpx;
		color: #2D2D2D;
		font-size: 28rpx;
	}

	.edit_nick_name .input_wrap .clear_con {
		font-size: 35rpx;
		color: #DCDCDC;
	}

	.edit_nick_name .count {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding-right: 20rpx;
		margin-top: 20rpx;
	}

	.edit_nick_name .count text {
		font-size: 28rpx;
		color: #2D2D2D;
	}

	.edit_nick_name .count .cur_count {
		color: #FC1C1C;
	}
</style>