puqiang/pages/mine/nickname.vue

<template>
	<view class="bocx">
		<view class="box-che">
			<input class="box-input" v-model="name" placeholder-class="inpTextBox" type="text" placeholder="请输入" maxlength="5" />
		</view>
		<view  class="nic">请输入昵称 (不超过5个字)</view>
		<view class="cev" @tap="saveName">保存</view>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../utils/util.js");
	var config = require("../../config");

	export default {
		data() {
			return {
				name: "",
			};
		},
		onLoad: function(options) {
			 var userInfos = uni.getStorageSync('weapp_session_userInfo_data');
			 this.name=userInfos.name;
		},
		methods: {
			// 保存昵称
			saveName() {
			  //获取本地用户信息
			  var userInfos = uni.getStorageSync('weapp_session_userInfo_data');
			
			  if (this.name == "") {
			    uni.showModal({
			      title: '提示',
			      content: '昵称不能为空',
			      showCancel: false
			    });
			  } else {
			    util.getRequestPromise(config.service.upload, {
			      name: this.name
			    }).then(data => {
			      userInfos.name = this.name;
				  
			      uni.setStorageSync('weapp_session_userInfo_data', userInfos); //写入缓存
			      uni.navigateBack({
			        delta: 1
			      });
				  
			    });
			  }
			}
		}
	};
</script>
<style>
	.bocx{
		width: 100%;
		height: 100vh;
		background-color: #F8F8F8;
	}
	.box-che{
		width: 100%;
		height: 102rpx;
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	.box-input{
		width: 90%;
		height: 100%;
		line-height: 102rpx;
		border: none;
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #303030;
	}
	.nic{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 24rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
	.inpTextBox {
		width: 90%;
		height: 100%;
		line-height: 102rpx;
		border: none;
		font-size: 30rpx;
		color: #303030;
	}
	.cev{
		width: 690rpx;
		height: 88rpx;
		background: #2671E2;
		border-radius: 8rpx;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin: 0 auto;
		margin-top: 220rpx;
	}
</style>