ec.uniapp-master/pages/user/my/editname.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" title="修改昵称" :backDiy="true" @backCallback="backCallback"></lf-nav>
		<view class="lf-color-black lf-font-28 lf-p-30">
			可使用中英文、数字和下划线，字符限制1-10字符
		</view>
		<view class="lf-p-l-32 lf-p-r-32">
			<view class="set-tag lf-border-bottom">
				<view class="lf-font-28 lf-color-black">
					<input v-model="name" type="text" placeholder="起一个好听的昵称吧" />
				</view>
				<view class="lf-flex" v-if="name.length" @click="clear">
					<text class="lf-iconfont icon-cuo lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				name: ''
			}
		},
		methods: {
			clear(){
				this.name = '';
			},
			backCallback(){
				if(!this.name){
					return this.$toBack();
				};
				uni.showLoading({
					title: '正在保存中'
				})
				let token = this.$cookieStorage.get('user_token');
				this.$http.post({
					api: 'api/users/update/info',
					data: {
						nick_name: this.name
					},
					header: {
						Authorization: token,
						Accept: 'application/json'
					}
				}).then(res => {
					uni.hideLoading();
					this.$msg('保存成功', {icon: 'success'}).then(() => {
						this.$toBack();
					});
				}).catch(err => {
					uni.hideLoading();
					this.$msg('保存失败', {icon: 'error'}).then(() => {
						this.$toBack();
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.set-tag {
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
</style>