微信小程序（七）注册

enroll.wxml

<!--pages/enroll/enroll.wxml-->
<view wx:if="{{!success}}">
    <view class='row'>
           <view class='info'>
                  <input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" />
            </view>
             <!--<button class='button1' bindtap='doGetCode' disabled='{{disabled}}' style="background-color:#33FF99" >{{text}}</button>-->
    </view>
    <view class='row'>
           <view class='info'>
                  <input  class= 'info-input' bindinput="handleVerificationCode" placeholder="请输入你的验证码" />
            </view>
    
    </view>
     <view class='row'>
           <view class='info'>
                  <input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="请输入你的密码" />
            </view>
    
    </view>
     <view class='row'>
           <view class='info'>
                  <input  type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="请重新输入你的密码" />
            </view>
    
    </view>
    <button class='submit' bindtap='submit'>提交</button>
    </view>
    <view class = 'success' wx:if="{{success}}">
    <view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!</view>
    <button type = "default" class = 'return' bindtap='return_home'>返回首页</button>
    </view>

enroll.wxss

/* pages/enroll/enroll.wxss */
page{
    background: #F0F0F0 ;
 }
 .row{
   margin-top: 20rpx;
   overflow: hidden;
   line-height: 100rpx;
   border-bottom: 1rpx solid #ccc;
   margin-left: 20rpx;
   margin-right: 20rpx;
   color: #777;
   background: #fff;
  
 }
 .info-input{
   height: 100rpx;
   margin-left: 50rpx;
   color: #777;
     float: left;
 }
 .info-input1{
   height: 100rpx;
   margin-left: 50rpx;
   color: #777;
     float: left;
     width: 420rpx;
 }
 .button{
   width: 200rpx;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 28rpx;
   background: #33FF99;
   float: left;
   margin-left: 10rpx;
   margin-top: 15rpx;
   color: #FFFFFF;
 }
 .submit{
   margin-top: 50rpx;
   margin-left: 20rpx;
   margin-right: 20rpx;
   background: #FFC0CB;
    color: #FFFFFF;
 }
 .success{
   background: #ffffff;
  
 }
 .cheer{
   text-align: center;
   line-height: 400rpx;
   font-size: 60rpx;
   position: relative;
 }
 .return{
   margin: 20rpx;
  
 }

enroll.js

// pages/enroll/enroll.js
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
      text: '获取验证码', //按钮文字
      currentTime: 61, //倒计时
      disabled: false, //按钮是否禁用
      phone: '', //获取到的手机栏中的值
      VerificationCode: '',
      Code: '',
      NewChanges: '',
      NewChangesAgain: '',
      success: false,
      state: ''
    },
    /**
      * 获取验证码
      */
    return_home: function (e) {
      wx.navigateTo({
        url: '/pages/login/login',
      })
   
    },
    handleInputPhone: function (e) {
      this.setData({
        phone: e.detail.value
      })
    },
    handleVerificationCode: function (e) {
      console.log(e);
      this.setData({
        Code: e.detail.value
      })
    },
    handleNewChanges: function (e) {
      console.log(e);
      this.setData({
        NewChanges: e.detail.value
      })
    },
    handleNewChangesAgain: function (e) {
      console.log(e);
      this.setData({
        NewChangesAgain: e.detail.value
      })
   
    },
    doGetCode: function () {
      var that = this;
      that.setData({
        disabled: true, //只要点击了按钮就让按钮禁用 （避免正常情况下多次触发定时器事件）
        color: '#ccc',
      })
   
      var phone = that.data.phone;
      var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
      var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
      var phone = that.data.phone;
      var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
      var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字，默认为空
      wx.request({
        url: '', //后端判断是否已被注册， 已被注册返回1 ，未被注册返回0
        method: "GET",
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          that.setData({
            state: res.data
          })
          if (phone == '') {
            warn = "号码不能为空";
          } else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
            warn = "手机号格式不正确";
          } //手机号已被注册提示信息
           else if (that.data.state == 1) {  //判断是否被注册
             warn = "手机号已被注册";
   
           }
           else {
            wx.request({
              url: '', //填写发送验证码接口
              method: "POST",
              data: {
                coachid: that.data.phone
              },
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              success: function (res) {
                console.log(res.data)
                that.setData({
                 VerificationCode: res.data.verifycode
                })
                
   
                //当手机号正确的时候提示用户短信验证码已经发送
                wx.showToast({
                  title: '短信验证码已发送',
                  icon: 'none',
                  duration: 2000
                });
                //设置一分钟的倒计时
                var interval = setInterval(function () {
                  currentTime--; //每执行一次让倒计时秒数减一
                  that.setData({
                    text: currentTime + 's', //按钮文字变成倒计时对应秒数
   
                  })
                  //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
                  if (currentTime <= 0) {
                    clearInterval(interval)
                    that.setData({
                      text: '重新发送',
                      currentTime: 61,
                      disabled: false,
                      color: '#33FF99'
                    })
                  }
                }, 100);
              }
            })
          };
          //判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况
          if (warn != null) {
            wx.showModal({
              title: '提示',
              content: warn
            })
            that.setData({
              disabled: false,
              color: '#33FF99'
            })
            return;
          }
        }
   
      })
   
    },
    submit: function (e) {
      var that = this
      if (this.data.Code == '') {
        wx.showToast({
          title: '请输入验证码',
          image: '../images/bar/error.png',
          duration: 2000
        })
        return
      } else if (this.data.Code != this.data.VerificationCode) {
        wx.showToast({
          title: '验证码错误',
          image: '../images/bar/error.png',
          duration: 2000
        })
        return
      }
      else if (this.data.NewChanges == '') {
        wx.showToast({
          title: '请输入密码',
          image: '../images/bar/error.png',
          duration: 2000
        })
        return
      } else if (this.data.NewChangesAgain != this.data.NewChanges) {
        wx.showToast({
          title: '两次密码不一致',
          image: '../images/bar/error.png',
          duration: 2000
        })
        return
      } else {
        var that = this
        var phone = that.data.phone;
        wx.request({
          url: getApp().globalData.baseUrl + '/Coachs/insert' ,
          method: "POST",
          data: {
            coachid: phone,
            coachpassword: that.data.NewChanges
          },
          header: {
            "content-type": "application/x-www-form-urlencoded"
          },
          success: function (res) {
            wx.showToast({
              title: '提交成功~',
              icon: 'loading',
              duration: 2000
            })
            console.log(res)
            that.setData({
              success: true
            })
          }
        })
      }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
   
    }
  })

效果图