微信小程序设计用户注册页面

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 ，未被注册返回0method: "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 = thisif (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 = thisvar 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 () {}
})

 <view wx:if="{{!success}}"><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}}"><view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!</view><button type = "default" class = 'return' bindtap='return_home'>返回首页</button></view>

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: #00CCFF;color: #FFFFFF;
}
.success{background: #ffffff;}
.cheer{text-align: center;line-height: 400rpx;font-size: 60rpx;position: relative;
}
.return{margin: 20rpx;}

页面显示结果

微信小程序设计用户注册页面相关推荐

小程序微信小程序设计注册页面
// pages/register/register.jsPage({/*** 页面的初始数据*/data: {text: '获取验证码', //按钮文字currentTime: 61, //倒计时d ...
小程序微信小程序设计登录页面
Page({data: {phone: '',password: '',success: false,text: ''},// 获取输入账号 phoneInput: function (e) {thi ...
微信weui框架页面html,微信小程序设计weui框架
原标题:微信小程序设计weui框架 weui-wxss是微信官方提供的ui框架,用起来也很方便(copy).下载地址:https://github.com/weui/weui-wxss 第一步:需要把 ...
WeChat：微信小程序设计流程注册完善、设计开发、审核发布之详细攻略
WeChat:微信小程序设计流程注册&完善.设计&开发.审核&发布之详细攻略目录微信小程序设计流程 1.注册 2.小程序信息完善 3.开发小程序 3.1.开发文档 3.2. ...
基于Python的旅游管理系统微信小程序设计与实现毕业论文+项目源码及数据库
源码获取:我的博客资源页面可以下载!!!! 项目名称基于Python的旅游管理系统微信小程序设计与实现毕业论文+项目源码及数据库系统说明本商业旅游系统可以分为三个部分,即微信小程序的手机客户端 ...
微信小程序设计指南官方版放出
微信团队总喜欢在深夜搞个大惊喜,昨天晚间发布微信小程序开发文档,微信小程序设计指南也一同放出,都说腾讯的产品用户体验很好,我们就和ytkah一起看看这个小程序设计指南吧,参考一下他们的UI.交互.连接 ...
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
微信小程序：页面传递中文出现乱码
微信小程序:页面传递中文 decodeURIComponent() 参考微信小程序页面中文传参Option获取参数乱码问题
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...

微信小程序设计用户注册页面

微信小程序设计用户注册页面相关推荐

最新文章

热门文章