<view class='changeInfo'> <view class='changeInfoName'>   <input placeholder='請輸入姓名' bindinput='getNameValue' value='{{name}}'/>  </view>  <view class='changeInfoName'>   <input placeholder='請輸入手機號' bindinput='getPhoneValue' value='{{phone}}'/>  </view> <view class='changeInfoName'>   <input placeholder='請輸驗證碼' bindinput='getCodeValue' value='{[code]}' style='width:70%;'/>    <button class='codeBtn' bindtap='getVerificationCode' disabled='{{disabled}}' >{{codename}}</button> </view> <button class='changeBtn' bindtap='save'>保存</button></view>

page{ height: 100%; width: 100%; background: linear-gradient(#5681d7, #486ec3);}.changeInfo{ display: flex; flex-direction: column; justify-content: space-between; width: 90%; margin: 50rpx auto;}.changeInfoName{ position: relative; height: 80rpx; width: 100%; border-radius: 10rpx; background: #fff; margin-bottom: 20rpx; padding-left: 20rpx; box-sizing: border-box;}.codeBtn{ position: absolute; right: 0; top: 0; color: #bbb; width: 30%; font-size: 26rpx; height: 80rpx; line-height: 80rpx;}.changeInfoName input{ width: 100%; height:100%;}.changeBtn{ width: 40%; height: 100rpx; background: #fff; color: #000; border-radius: 50rpx; position: absolute; bottom: 10%; left: 50%; margin-left: -20%; line-height: 100rpx;}

var app = require('../../resource/js/util.js');Page({ /**  * 頁面的初始數據  */ data: {  name:'',//姓名  phone:'',//手機號  code:'',//驗證碼  iscode:null,//用于存放驗證碼接口里獲取到的code  codename:'獲取驗證碼' }, //獲取input輸入框的值 getNameValue:function(e){  this.setData({   name:e.detail.value  }) }, getPhoneValue:function(e){  this.setData({   phone:e.detail.value  }) }, getCodeValue: function (e) {  this.setData({   code: e.detail.value  }) }, getCode:function(){  var a = this.data.phone;  var _this = this;  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])/d{8}$$/;  if (this.data.phone == "") {   wx.showToast({    title: '手機號不能為空',    icon: 'none',    duration: 1000   })   return false;  } else if (!myreg.test(this.data.phone)) {   wx.showToast({    title: '請輸入正確的手機號',    icon: 'none',    duration: 1000   })   return false;  }else{   wx.request({    data: {},    'url': 接口地址,    success(res) {     console.log(res.data.data)     _this.setData({      iscode: res.data.data     })     var num = 61;     var timer = setInterval(function () {      num--;      if (num <= 0) {       clearInterval(timer);       _this.setData({        codename: '重新發送',        disabled: false       })       } else {       _this.setData({        codename: num + "s"       })      }     }, 1000)    }   })     }     }, //獲取驗證碼 getVerificationCode() {  this.getCode();  var _this = this  _this.setData({   disabled: true  }) }, //提交表單信息 save:function(){  var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])/d{8}$$/;  if(this.data.name == ""){   wx.showToast({    title: '姓名不能為空',    icon: 'none',    duration: 1000   })   return false;  }  if(this.data.phone == ""){   wx.showToast({    title: '手機號不能為空',    icon: 'none',    duration: 1000   })   return false;  }else if(!myreg.test(this.data.phone)){   wx.showToast({    title: '請輸入正確的手機號',    icon: 'none',    duration: 1000   })   return false;  }  if(this.data.code == ""){   wx.showToast({    title: '驗證碼不能為空',    icon: 'none',    duration: 1000   })   return false;  }else if(this.data.code != this.data.iscode){   wx.showToast({    title: '驗證碼錯誤',    icon: 'none',    duration: 1000   })   return false;  }else{   wx.setStorageSync('name', this.data.name);   wx.setStorageSync('phone', this.data.phone);   wx.redirectTo({    url: '../add/add',   })  } }, /**  * 生命周期函數--監聽頁面加載  */ onLoad: function (options) {   },  /**  * 生命周期函數--監聽頁面初次渲染完成  */ onReady: function () {  },  /**  * 生命周期函數--監聽頁面顯示  */ onShow: function () {  },  /**  * 生命周期函數--監聽頁面隱藏  */ onHide: function () {  },  /**  * 生命周期函數--監聽頁面卸載  */ onUnload: function () {  },  /**  * 頁面相關事件處理函數--監聽用戶下拉動作  */ onPullDownRefresh: function () {  },  /**  * 頁面上拉觸底事件的處理函數  */ onReachBottom: function () {  },  /**  * 用戶點擊右上角分享  */ onShareAppMessage: function () {  }})