<scroll-view class="page" scroll-y="true">
	<view id="username-editing" class="layout-padding ng-scope">
	  <view class="cell-group">
	    <input type="text" placeholder="请输入昵称" bindinput="changeStatus" class="ng-pristine ng-valid ng-not-empty ng-touched" value="{{username}}" />
	   <text class="input-clear {{display}}" catchtap="clearText"></text>
	  </view>
	  <button class="btn-primary {{class}}" disabled="{{disabled}}" catchtap="updataInfo" data-nickname="{{username}}">确定</button>
	</view>
</scroll-view>

page{
    background-color: #f8f8f8;
}
.cell-group .display-none{
    display: none;
}
#username-editing .cell-group {
    position: relative;
}
.cell-group {
    margin: 20rpx 0;
    background-color: white;
}
#username-editing input{
    height: 88rpx;
    width: 640rpx;
    border-top: 1rpx solid #eee;
    outline: none;
    font-size: 28rpx;
    padding: 0 88rpx 0 28rpx;
}

.input-clear {
    display: block;
    position: absolute;
    width: 88rpx;
    height: 88rpx;
    right: 0;
    top: 0;
}

button.btn-primary {
    margin: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fc3151;
    color: white;
    height: 64rpx;
    font-size: 30rpx;
}

button.btn-primary.disabled {
    background-color: #d6d6d6;
}

import request from '../../../../lib/request';

const app = getApp();

Page({
  data: {},
  onLoad() {
    this.setData({
      username: app.globalData.userInfo.nickName
    });
  },
  clearText() {
    this.setData({
      username: '',
      display: 'display-none',
      disabled: true,
      class: 'disabled'
    });
  },
  changeStatus(e) {
    if (e.detail.value.length > 0) {
      this.setData({
        display: '',
        disabled: false,
        class: '',
        username: e.detail.value
      });
    } else {
      this.setData({
        display: 'display-none',
        disabled: true,
        class: 'disabled'
      });
    }
  },
  updataInfo(e) {
    const data = {
      nickname: e.currentTarget.dataset.nickname
    };
    request({ path: '/users/user', data, method: 'put' }).then((res) => {
      if (res) {
        app.globalData.userInfo.nickName = e.currentTarget.dataset.nickname;
        wx.navigateTo({
          url: '../user-info'
        });
      }
    });
  }
});