<view class="page centerPage-wrap" id="userCenterPage" data-router="userCenterPage">
  <view class="centerPage-user-info">
    <view class="js-change-cover" bindtap="choosePhoto">
      <image class="cover-thumb" src="{{ userInfo.cover_thumb }}"></image>
      <label class="ico-moon icon-rightarrow"></label>
    </view>
  </view>
  <view class="centerPage-user-info">
    <view class="centerPage-info-item">
      <label>昵称</label>
      <label class="ico-moon icon-rightarrow"></label>
      <input class="nickname" placeholder="请输入您的昵称" value="{{ userInfo.nickname }}" bindinput="inputNickname" />
    </view>
    <view class="centerPage-info-item">
      <label>性别</label>
      <label class="ico-moon icon-rightarrow"></label>
      <picker mode="selector" class="centerPage-sex" bindchange="changeGender" value="{{ userInfo.sex }}" range="{{ genderArr }}">
        <view class="picker">{{ genderArr[userInfo.sex] }}</view>
      </picker>
    </view>
    <view class="centerPage-info-item" bindtap="bindCellphonePage">
      <label>手机号</label>
      <label class="ico-moon icon-rightarrow"></label>
      <view class="userCenter-tel">{{ phone }}</view>
    </view>
  </view>
</view>
<view class="centerPage-save-btn" bindtap="saveUserInfo">保存</view>

page {
  background-color: #eee;
}
.centerPage-wrap .cover-thumb {
  display: block;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 50%;
}
.centerPage-wrap .centerPage-user-info {
  padding-left: 3%;
  padding-right: 3%;
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
  margin-top: 15px;
  list-style: none;
  line-height: 40px;
  text-indent: 10px;
  background-color: #fff;
}
.centerPage-wrap.cur-bind-tel .centerPage-user-info {
  display: none;
}
.centerPage-wrap .centerPage-user-info view {
  position: relative;
  border-bottom: 1px solid #ededed;
}
.centerPage-wrap .centerPage-user-info view:last-child {
  border-bottom: none;
}

.centerPage-info-item {
  height: 117rpx;
  line-height: 117rpx;
}
.centerPage-wrap .nickname,
.centerPage-wrap .userCenter-tel,
.centerPage-wrap .centerPage-sex {
  float: right;
  border: none;
  width: 65%;
  line-height: 117rpx;
  height: 117rpx;
  margin-right: 25px;
  color: #888;
  font-size: 14px;
}
.centerPage-wrap .centerPage-sex {
  height: 50px;
}
.centerPage-wrap .icon-rightarrow {
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
}
.centerPage-wrap .shadow-content {
  width: 80%;
  left: 8%;
  top: 50%;
  margin-top: -150px;
  padding: 3% 2%;
  background-color: #fff;
  font-size: 14px;
}
.centerPage-wrap .shadow-content view {
  line-height: 40px;
  text-indent: 10px;
}
.centerPage-wrap .shadow-content .title {
  font-size: 18px;
  color: #41b80e;
  border-bottom: 2px solid #bcbcbc;
}
.centerPage-wrap .centerPage-sex-p:first-child {
  border-bottom: 1px solid #bcbcbc;
}
.centerPage-wrap .centerPage-sex-p label {
  display: none;
  float: right;
  color: #41b80e;
  margin-right: 10px;
}
.centerPage-wrap .selected label {
  display: block;
}
.centerPage-save-btn {
  margin: 70rpx 50rpx;
  height:90rpx;
  line-height:90rpx;
  background-color: #1AAD19;
  color: #fff;
  border-radius: 2px;
  text-align: center;
}

var app = getApp()

Page({
  data: {
    userInfo: {
      nickname: '',
      sex: 0,
      cover_thumb: 'http://img.zhichiwangluo.com/zc_app_default_photo.png'
    },
    genderArr: ['男', '女'],
    isFromBack: false,
    phone: ''
  },
  onLoad: function(){
    var userInfo = app.getUserInfo(),
        phone = userInfo.phone,
        data = {
              'userInfo.nickname': userInfo.nickname,
              'userInfo.sex': userInfo.sex,
              'userInfo.cover_thumb': userInfo.cover_thumb
            };

    if(phone){
      data.phone = phone;
    }
    this.setData(data);
  },
  onShow: function(){
    if(this.data.isFromBack){
      var phone = app.getUserInfo().phone;
      if(phone){
        this.setData({
          phone: phone
        })
      }
    } else {
      this.setData({
        isFromBack: true
      });
    }
  },
  choosePhoto: function(){
    var that = this;
    app.chooseImage(function(imgUrl){
      that.setData({
        'userInfo.cover_thumb': imgUrl
      })
    });
  },
  changeGender: function(e){
    this.setData({
      'userInfo.sex': e.detail.value
    })
  },
  inputNickname: function(e){
    this.setData({
      'userInfo.nickname': e.detail.value
    })
  },
  saveUserInfo: function(){
    var data = this.data.userInfo;

    app.sendRequest({
      url: '/index.php?r=AppData/saveUserInfo',
      method: 'post',
      data: data,
      success: function(res){
        if(res.status === 0){
          app.setUserInfoStorage(data);
          app.turnBack();
        }
      }
    });
  },
  bindCellphonePage: function(){
    app.turnToPage('/pages/bindCellphone/bindCellphone');
  }

})