完善资料界面

214 阅读3分钟

<!--miniprogram/page/userinfo/index.wxml-->
<view>
    <view class='up_box'>
        <view class="section" style='margin-top:0rpx;'>
          <view class="section__title">账号(不可修改)</view>
          <input class='inputs' style='background-color:#eee;' disabled="true" placeholder="请输入您的姓名" bindinput='bindtitleInput' value='{{info.title}}' />
        </view> 
        <view class="section">         
          <view class="section__title" style='color:#f00;'>手机号*</view>        
          <input class='inputs' placeholder="请输入您的电话" bindinput='bindtelInput' value='{{info.tel}}'/>
        </view>  
        <view class="section">         
          <view class="section__title">身份证证号</view>        
          <input class='inputs' placeholder="请输入您的身份证号" bindinput='bindcardInput' value='{{info.card}}'/>
        </view>  
        <view class="section">
          <view class="section__title">入职日期</view>
          <picker mode="date" value="{{info.ruzhi}}" start="1915-09-01" end="2027-09-01" bindchange="bindruzhiDateChange">
            <view class="picker">
              当前选择: {{info.ruzhi}}
            </view>
          </picker>
        </view>   
        <view class="section">
          <view class="section__title">我的生日</view>
          <picker mode="date" value="{{info.shengri}}" start="1915-09-01" end="2027-09-01" bindchange="bindshengriDateChange">
            <view class="picker">
              当前选择: {{info.shengri}}
            </view>
          </picker>
        </view>    

          <view class="btn-area" style='margin-top:40rpx;'>
           <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
  disabled="{{disabled}}" bindtap="formSubmit"> 保存修改 </button>
          </view>
    </view>
</view>



// miniprogram/page/userinfo/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bindtitleInput: '',
    info: { 'title': null, 'tel': null, 'card': null, 'ruzhi': '2015-01-01', 'shengri': '1990-01-01'}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id)
    if(options.id != 0){
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '手机号格式不正确,请先完善资料!',
        success: function (res) {
          if (res.confirm) {
          }
        }
      })
    }
    this.getuserinfo()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  getuserinfo: function(){
    var that = this
    var list = that.data.info
    wx.request({
      url: 'https://wxbaice.bcrm.cn/api_office/of_global.asmx/teacher_info_get',
      data: {
        _skey: wx.getStorageSync('key')
      },
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res)
        var rol = res.data
        list.title = rol[0].title,
          list.tel = rol[0].tel,
          list.card = rol[0].card,
          list.ruzhi = rol[0].worktime,        
          list.shengri = rol[0].birth
          that.setData({
            info : list
          })

      }
    })
  },
  // 姓名
  bindtitleInput: function (e) {
    var that = this
    var list = that.data.info
    list.title = e.detail.value
    this.setData({
      info:list
    })
  },
  // tel
  bindtelInput: function (e) {
    var that = this
    var list = that.data.info
    list.tel = e.detail.value
    this.setData({
      info: list
    })
  },  
  // 会员卡号
  bindcardInput: function (e) {
    var that = this
    var list = that.data.info
    list.card = e.detail.value
    console.log(e)
    this.setData({
      info: list
    })
  },  
  //入职日期
  bindruzhiDateChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    var that = this
    var list = that.data.info
    list.ruzhi = e.detail.value
    this.setData({
      info: list
    })
  },  
  //我的生日日期
  bindshengriDateChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    var that = this
    var list = that.data.info
    list.shengri = e.detail.value
    this.setData({
      info: list
    })
  },
  //提交 
  formSubmit: function (e) {
    console.log(this.data.info)
    var that = this
    var info = that.data.info
    if(info.tel.length < 11){
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '手机号位数不正确!',
        success: function (res) {
          if (res.confirm) {
          }
        }
      })
    }else{
      var can = info.tel+'^'+info.card+'^'+info.ruzhi+'^'+info.shengri
      wx.request({
        url: 'https://wxbaice.bcrm.cn/api_office/of_global.asmx/teacher_info_set',
        data: {
          _skey: wx.getStorageSync('key'),
          _can: can
        },
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          console.log(res)
          if(res.data.id === 1){
            wx.showLoading({
              title: res.data.msg,
            })
            setTimeout(function () {
              //要延时执行的代码
              wx.hideLoading()
              wx.redirectTo({ url: '../role/nav' });

            }, 500) //延迟时间 这里是1秒
          }else{
            wx.showLoading({
              title: res.data.msg,
            })
          }
        }
      })

    }
  }, 
})

css
page{
  background-color:#086dc9;
  width:670rpx;
  padding:20px;
}
.up_box{
  background-color:#fff;
  border-radius: 8rpx;
  padding:20rpx 20rpx;  
}
.section{
margin-top:40rpx;
}
.section__title{
margin-bottom:27rpx;
}
.inputs{
 /* // background-color:#ccc; */
 border:1px solid #ccc;
border-radius:8rpx;
padding:20rpx 10rpx 15rpx 10rpx;

}
.picker{
  border:1px solid #ccc;
border-radius:8rpx;

}