小程序---实现注册页倒计时
js代码
//index.js
//获取应用实例
var interval = null //倒计时函数
Page({
data: {
hidden: true,
btnValue:'',
btnDisabled:false,
name: '',
phone: '',
code: '',
captchaLabel: '获取验证码',
captchaDisabled: false,
currentTime:61,
},
onLoad: function () {
},
//输入手机号
bindPhoneInput:function(e)
{
this.setData({
phone: e.detail.value
})
},
captcha: function(e) {
var that = this;
var currentTime = that.data.currentTime
console.log(currentTime);
interval = setInterval(function () {
currentTime--;
that.setData({
captchaLabel: '已发送('+currentTime+'s)'
})
if (currentTime <= 0) {
clearInterval(interval)
that.setData({
captchaLabel: '重新发送',
currentTime:61,
disabled: false
})
}
}, 1000)
//向该手机发送验证码
//获取手机号
wx.request({
url: 'http://www.dirverjl.com/api/sendSms',
data: {
phone: this.data.phone,
},
method: 'POST',
header: {
'content-type': 'application/json' //默认值
},
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log("失败");
},
})
},
save:function()
{
//发送手机号及验证码到后台
wx.request({
url:'http://www.dirverjl.com/api/test',
data:{
phone: this.data.phone,
code: this.data.code,
},
method:'POST',
header: {
'content-type': 'application/json' //默认值
},
success:function(res){
//返回的结果
console.log(res.data.data);
//全局存储 用户基本
//app.info=res.data.data;
console.log(res.data.data);
var teachers={
jlid:res.data.data.jlid,
intro:res.data.data.intro,
mphone:res.data.data.mphone,
name:res.data.data.name,
xycount:res.data.data.xycount,
rank:res.data.data.rank,
viewnum:res.data.data.viewnum,
praisenum:res.data.data.praisenum,
schoolname:res.data.data.schoolname,
basename:res.data.data.basename,
address: res.data.data.address,
baselogo:res.data.data.baselogo,
};
wx.setStorage({
key:'teachers',
data:teachers
})
//跳转到名片页
wx.switchTab({
//本地存储
url:'../index/index',
})
},
fail:function(res){
console.log(res);
}
})
},
})
wxml文件
<!--register.wxml-->
<view class='imagesize'>
<image src="/images/image/logo@2x.png">
</image>
</view>
<view class='form'>
<view class='row'>
<view class='icon'><image src="/images/image/dianhua@2x.png"></image></view>
<view class='text'>
<input placeholder='请输入手机号' placeholder-class='phcol' bindinput='bindPhoneInput'/>
</view>
</view>
<view class='row'>
<view class='icon'><image src="/images/image/yanzhengma@2x.png"></image></view>
<view class='text wid2'>
<input placeholder='输入验证码' placeholder-class='phcol' bindinput='bindCodeInput' />
</view>
<view class='codeBtn' bindtap='captcha' ><text class="code-word">{{captchaLabel}}</text></view>
<!--<view class='codeBtn btnGray' bindtap='getCode'><text class="code-word">重新获取 | 56s</text></view>-->
</view>
</view>
<view class='save' bindtap='save' >登录</view>
wxss文件
/**index.wxss**/
page{
height: 100%;
width: 100%;
background: #F7F7F7;
display: flex;
flex-direction: column;
}
.imagesize{
display:flex;
justify-content: center;
margin-top:100rpx;
margin-bottom:84rpx;
}
.imagesize image {
width:516rpx;
height:134rpx;
}
.form { padding: 0 46rpx;}
.row {
display: flex;
align-items: center;
padding: 0 24rpx 0 40rpx;
margin: 0 0 20rpx 0;
height: 112rpx;
border: 1px solid rgba(224,224,224,1);
border-radius: 60rpx;
background: #FFF;
position: relative;
}
.row .icon { width: 40rpx; height: 40rpx; margin-right: 16rpx;}
.row .icon image { width: 40rpx; height: 40rpx;}
.row .text { width: 500rpx; height: 60rpx;}
.row .text input { font-size: 36rpx;}
.row .text .phcol { color: #E0E0E0;}
.row .wid2 { width: 330rpx;}
.codeBtn { width: 200rpx; height: 62rpx; background: #2A5E92; color: #FFF; border-radius: 35rpx; text-align: center; font-size: 26rpx; line-height: 62rpx;}
.btnGray { background: #9B9B9B;}
.save{
width:658rpx;
height:98rpx;
background:rgba(42,94,146,1);
border-radius:60rpx;
text-align: center;
line-height:49px;
font-family:PingFangSC-Regular;
color: #FFF;
margin: 48rpx auto 0 auto;
}
效果图