16--微信小程序 更改学号页面(有value值)

在这里插入图片描述
页面:

<view class="page">
  <text style="padding-left:102px;">更改个人信息</text>
  <view style="margin:4px 18px;">
    <view>
      <text>姓名:</text>
      <input type="text" value="{{name}}" class="xin" bindinput="inputName" placeholder="请输入要修改的姓名"></input>
    </view>
    <view>
      <text>学号:</text>
      <input type="number" value="{{number}}" class="xin" bindinput="inputNumber" placeholder="请输入要修改的学号"></input>
    </view>

  </view>
  <button type="submit" bindtap="save" class="save" disabled='{{isDisabled}}'>保存</button>
</view>

js:

const app = getApp()
Page({
  data: {
    name: '',
    number: '',
    isDisabled: true //表示页面加载完成时disabled为禁用状态
  },

  onLoad: function(options) {
    let number = options.number
    let name = options.name
    this.setData({
      number,
      name
    })
  },

  save: function(e) {
    let name = this.data.name;
    let number=this.data.number
    let token = wx.getStorageSync('token')
    wx.request({
      url: app.globalData.updatexuehao,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        // 'cookie': token
      },
      data: {
        token,name,number
      },
      success: res => {
        if (res.data.error == true) {
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        } else {
          wx.showToast({
            title: res.data.message,
            icon: 'success',
            duration: 5000
          })
          wx.removeStorageSync('info')
          wx.navigateBack({
            complete: (res) => {}
          })

        }
      }
    })
  },

  inputName: function(e) {
    var name = e.detail.value
    this.setData({
      name
    })
    console.log(name)
    if (name !== '') {
      this.setData({
        isDisabled: false
      })
    } else {
      this.setData({
        isDisabled: true
      })
    }

  },
  inputNumber: function(e) {
    var number = e.detail.value
    this.setData({
      number
    })
    // console.log()
    if (number !== '') {
      this.setData({
        isDisabled: false
      })
    } else {
      this.setData({
        isDisabled: true
      })
    }
  
  },

  onReady: function() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

样式:

/* 设置不可用状态的背景色 */
button[disabled] {
  background-color: #eaeaea !important;
  color: #fff;
}

.save {
  width: 17%;
  padding: 5rpx;
  margin: 0;
  font-weight: none;
  font-size: 40rpx;
  color: #fff;
  background-color: #298ef7;
}

.xin {
  border: 1px solid #ccc;
  margin: 3px 6px;
  width: 93%;
  padding: 4px;
}

猜你喜欢

转载自blog.csdn.net/xu_ze_qin/article/details/107130860