小程序>>微信小程序设计注册页面

最新推荐文章于 2024-10-27 14:51:51 发布

小码张

最新推荐文章于 2024-10-27 14:51:51 发布

阅读量4.7k 小程序文章标签：注册页面

本文链接：https://blog.csdn.net/qq_38789941/article/details/90775819

小程序专栏收录该内容

4 篇文章 1 订阅

// pages/register/register.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: '获取验证码', //按钮文字
    currentTime: 61, //倒计时
    disabled: false, //按钮是否禁用
    phone: '', //获取到的手机栏中的值
    VerificationCode: '',
    Code: '',
    NewChanges: '',
    NewChangesAgain: '',
    success: false,
    state: '0',
    url: ''
  },
  /**
    * 获取验证码
    */
  return_home: function (e) {
    wx.navigateTo({
      url: '/pages/register/register',
    })

  },
  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为当手机号为空或格式不正确时提示用户的文字，默认为空
    wx.request({
      url: 'http://192.168.41.40:8002/isExist', //后端判断是否已被注册， 已被注册返回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: 'http://192.168.41.40:8002/sendCode', //填写发送验证码接口
            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/error.png',
        duration: 2000
      })
      return
    } else if (this.data.Code != this.data.VerificationCode) {
      wx.showToast({
        title: '验证码错误',
        image: '/images/error.png',
        duration: 2000
      })
      return
    }
    else if (this.data.NewChanges == '') {
      wx.showToast({
        title: '请输入密码',
        image: '/images/error.png',
        duration: 2000
      })
      return
    } else if (this.data.NewChangesAgain != this.data.NewChanges) {
      wx.showToast({
        title: '两次密码不一致',
        image: '/images/error.png',
        duration: 2000
      })
      return
    } else {
      var that = this
      var phone = that.data.phone;
      wx.request({
        url: 'http://192.168.41.40:8002/register',
        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.data)
          that.setData({
            success: true,
            url: res.data
          })
        }
      })
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

{
  "usingComponents": {},
  "navigationBarTitleText": "注册页面"
}

<!--pages/register/register.wxml-->
<view wx:if="{{!success}}">
    <view class="login-icon"> 
        <image class="login-img" src="/images/loginLog.jpg"></image> 
    </view> 
    <view class='row'>
            <view class='info'>
                  <input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" />
            </view>
              <button class='button' bindtap='doGetCode' disabled='{{disabled}}' style="background-color:{{color}}" >{{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}}">
  <web-view src="{{url}}"></web-view>
  
</view>

/* pages/register/register.wxss */
page{
   background: #F0F0F0 ;
}

/*登录图片*/
.login-icon{ 
 flex: none; 
} 
.login-img{ 
 width: 750rpx; 
}
.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: rgb(44, 156, 10);
  color: #FFFFFF;
}
.success{
  background: #ffffff;
 
}
.cheer{
  text-align: center;
  line-height: 400rpx;
  font-size: 60rpx;
  position: relative;
}
.return{
  margin: 20rpx;
}

最后完成效果图