CBB3/pages/user/userinfo/nickname.vue

<style>
	page{background: #ffffff;}
	.m-app{width:100vw}
	button.sub-btn{width:100%;height:40px;line-height: 40px; background:#db292b;border-radius:20px;font-size:15px;font-weight:500;color:#ffffff;margin-top: 30px;}
    .form-body{width:calc(100% - 24px);background: #ffffff;padding: 0px 12px;}
	.form-title{width:100%;text-align: left;font-size: 14px;color:#333333;height:38px;line-height: 38px;}
	.form-content{width:100%}
	input.form-input{height:38px;width:100%;text-align: left;color:#db292b;border-bottom: 1px solid #db292b;font-size: 14px;}
	.form-msg{font-size: 12px;text-align: left;width:100%;height:30px;line-height: 30px;color:#303033}
</style>
<template>
	<view class="m-app">
		<form report-submit="true" @submit="formSubmit">
		<view class='form-body'>
			<view class="form-title">
				用户昵称:
			</view>
			<view class="form-content">
				<input class="form-input" type="text" name="val" :value="val"/>
			</view>
			<view class="form-msg">限4-16个字符，一个汉字为两个字符</view>
			<button class="nt sub-btn" formType="submit">确认保存</button>
		</view>
		</form>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		computed: mapState(['user']),
		data() {
			return {
				val:""
			}
		},
		onLoad(options) {
			this.val = options.val || "";
			
		},
		methods: {
			formSubmit:function(e){
				var that = this , formData = e.detail.value;
				if(!this.utils.isDefine(formData.val)){
					this.utils.Tip("输入正确的用户昵称");
					return;
				}
				formData.code = "nickname";
				this.utils.loadIng("提交中..")
				this
					.request
					.post("userInfoSave",formData)
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.utils.Tip(res.msg);
							setTimeout(function(){ uni.navigateBack();},1000);
						}else{
							that.utils.Tip(res.msg);
						}
					}).catch(function(){
						uni.hideLoading();
						that.utils.Tip("网络错误，请稍后尝试");
					});
			}
			
		},
	}
</script>