1. <view class=\'changeInfo\'>
  2.   <view class=\'changeInfoName\'>
  3.      <input placeholder=\'请输入姓名\' bindinput=\'getNameValue\' value=\'{{name}}\'/> 
  4.   </view>
  5.   
  6.   <view class=\'changeInfoName\'>
  7.      <input placeholder=\'请输入手机号\' bindinput=\'getPhoneValue\' value=\'{{phone}}\'/> 
  8.   </view>
  9.   <view class=\'changeInfoName\'>
  10.      <input placeholder=\'请输验证码\' bindinput=\'getCodeValue\' value=\'{{code}}\' style=\'width:70%;\'/> 
  11.      <button class=\'codeBtn\' bindtap=\'getVerificationCode\' disabled=\'{{disabled}}\' >{{codename}}</button>
  12.   </view>
  13.   <button class=\'changeBtn\' bindtap=\'save\'>保存</button>
  14. </view>

 

  1. page{
  2.   height: 100%;
  3.   width: 100%;
  4.   background: linear-gradient(#5681d7, #486ec3);
  5. }
  6. .changeInfo{
  7.   display: flex;
  8.   flex-direction: column;
  9.   justify-content: space-between;
  10.   width: 90%;
  11.   margin: 50rpx auto;
  12. }
  13. .changeInfoName{
  14.   position: relative;
  15.   height: 80rpx;
  16.   width: 100%;
  17.   border-radius: 10rpx;
  18.   background: #fff;
  19.   margin-bottom: 20rpx;
  20.   padding-left: 20rpx;
  21.   box-sizing: border-box;
  22. }
  23. .codeBtn{
  24.   position: absolute;
  25.   right: 0;
  26.   top: 0;
  27.   color: #bbb;
  28.   width: 30%;
  29.   font-size: 26rpx;
  30.   height: 80rpx;
  31.   line-height: 80rpx;
  32. }
  33. .changeInfoName input{
  34.   width: 100%;
  35.   height:100%;
  36. }
  37. .changeBtn{
  38.   width: 40%;
  39.   height: 100rpx;
  40.   background: #fff;
  41.   color: #000;
  42.   border-radius: 50rpx;
  43.   position: absolute;
  44.   bottom: 10%;
  45.   left: 50%;
  46.   margin-left: -20%;
  47.   line-height: 100rpx;
  48. }

 

  1. var app = require(\'../../resource/js/util.js\');
  2. Page({
  3.   /**
  4.    * 页面的初始数据
  5.    */
  6.   data: {
  7.     name:\'\',//姓名
  8.     phone:\'\',//手机号
  9.     code:\'\',//验证码
  10.     iscode:null,//用于存放验证码接口里获取到的code
  11.     codename:\'获取验证码\'
  12.   },
  13.   //获取input输入框的值
  14.   getNameValue:function(e){
  15.     this.setData({
  16.       name:e.detail.value
  17.     })
  18.   },
  19.   getPhoneValue:function(e){
  20.     this.setData({
  21.       phone:e.detail.value
  22.     })
  23.   },
  24.   getCodeValue: function (e) {
  25.     this.setData({
  26.       code: e.detail.value
  27.     })
  28.   },
  29.   getCode:function(){
  30.     var a = this.data.phone;
  31.     var _this = this;
  32.     var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  33.     if (this.data.phone == "") {
  34.       wx.showToast({
  35.         title: \'手机号不能为空\',
  36.         icon: \'none\',
  37.         duration: 1000
  38.       })
  39.       return false;
  40.     } else if (!myreg.test(this.data.phone)) {
  41.       wx.showToast({
  42.         title: \'请输入正确的手机号\',
  43.         icon: \'none\',
  44.         duration: 1000
  45.       })
  46.       return false;
  47.     }else{
  48.       wx.request({
  49.         data: {},
  50.         \'url\': 接口地址,
  51.         success(res) {
  52.           console.log(res.data.data)
  53.           _this.setData({
  54.             iscode: res.data.data
  55.           })
  56.           var num = 61;
  57.           var timer = setInterval(function () {
  58.             num--;
  59.             if (num <= 0) {
  60.               clearInterval(timer);
  61.               _this.setData({
  62.                 codename: \'重新发送\',
  63.                 disabled: false
  64.               })
  65.  
  66.             } else {
  67.               _this.setData({
  68.                 codename: num + "s"
  69.               })
  70.             }
  71.           }, 1000)
  72.         }
  73.       })
  74.       
  75.     }
  76.     
  77.     
  78.   },
  79.   //获取验证码
  80.   getVerificationCode() {
  81.     this.getCode();
  82.     var _this = this
  83.     _this.setData({
  84.       disabled: true
  85.     })
  86.   },
  87.   //提交表单信息
  88.   save:function(){
  89.     var myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/;
  90.     if(this.data.name == ""){
  91.       wx.showToast({
  92.         title: \'姓名不能为空\',
  93.         icon: \'none\',
  94.         duration: 1000
  95.       })
  96.       return false;
  97.     }
  98.     if(this.data.phone == ""){
  99.       wx.showToast({
  100.         title: \'手机号不能为空\',
  101.         icon: \'none\',
  102.         duration: 1000
  103.       })
  104.       return false;
  105.     }else if(!myreg.test(this.data.phone)){
  106.       wx.showToast({
  107.         title: \'请输入正确的手机号\',
  108.         icon: \'none\',
  109.         duration: 1000
  110.       })
  111.       return false;
  112.     }
  113.     if(this.data.code == ""){
  114.       wx.showToast({
  115.         title: \'验证码不能为空\',
  116.         icon: \'none\',
  117.         duration: 1000
  118.       })
  119.       return false;
  120.     }else if(this.data.code != this.data.iscode){
  121.       wx.showToast({
  122.         title: \'验证码错误\',
  123.         icon: \'none\',
  124.         duration: 1000
  125.       })
  126.       return false;
  127.     }else{
  128.       wx.setStorageSync(\'name\', this.data.name);
  129.       wx.setStorageSync(\'phone\', this.data.phone);
  130.       wx.redirectTo({
  131.         url: \'../add/add\',
  132.       })
  133.     }
  134.   },
  135.   /**
  136.    * 生命周期函数--监听页面加载
  137.    */
  138.   onLoad: function (options) {
  139.     
  140.   },
  141.  
  142.   /**
  143.    * 生命周期函数--监听页面初次渲染完成
  144.    */
  145.   onReady: function () {
  146.   
  147.   },
  148.  
  149.   /**
  150.    * 生命周期函数--监听页面显示
  151.    */
  152.   onShow: function () {
  153.   
  154.   },
  155.  
  156.   /**
  157.    * 生命周期函数--监听页面隐藏
  158.    */
  159.   onHide: function () {
  160.   
  161.   },
  162.  
  163.   /**
  164.    * 生命周期函数--监听页面卸载
  165.    */
  166.   onUnload: function () {
  167.   
  168.   },
  169.  
  170.   /**
  171.    * 页面相关事件处理函数--监听用户下拉动作
  172.    */
  173.   onPullDownRefresh: function () {
  174.   
  175.   },
  176.  
  177.   /**
  178.    * 页面上拉触底事件的处理函数
  179.    */
  180.   onReachBottom: function () {
  181.   
  182.   },
  183.  
  184.   /**
  185.    * 用户点击右上角分享
  186.    */
  187.   onShareAppMessage: function () {
  188.   
  189.   }
  190. })

 

版权声明：本文为gxywb原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/gxywb/p/11237605.html