小程序wxml
<view class="container">
<view class="page-body">
<form catchsubmit="login" catchreset="formReset">
<view class="page-section page-section-gap">
<view class="page-section-title">手机号</view>
<radio-group name="radio">
<input class="input" name='tel' bindblur="tel" type="text"/>
</radio-group>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">验证码</view>
<radio-group name="radio">
<input class="input" name='captcha' type="text"/>
</radio-group>
</view>
<view class="btn-area">
<button bindtap="getCaptcha" disabled="{{stop}}" >{{getCaptcha}}</button>
<button style="margin: 30rpx 0" type="primary" formType="submit">立即登录</button>
</view>
</form>
</view>
</view>
小程序js
/**
* 页面的初始数据
*/
data: {
tel:'',
getCaptcha:'获取验证码',
stop:''
},
//获取手机号
tel(res){
this.setData({
tel:res.detail.value
})
},
//获取验证码
getCaptcha(res){
let tel=this.data.tel
let _this=this
wx.request({
url: 'http://lv8.bawei.com/api/getCaptcha', //仅为示例，并非真实的接口地址
data: {
tel:tel
},
header: {
'content-type': 'application/json' // 默认值
},
method:'POST',
success (res) {
if(res.data.code==200){
let time=60;
let timer=setInterval(function(res){
time--;
if(time>0){
_this.setData({
stop:true,
getCaptcha:time+'秒后再次获取验证码'
})
}else{
_this.setData({
stop:false,
getCaptcha:'获取验证码'
})
clearInterval(timer)
}
},1000)
wx.showToast({
title: res.data.msg,
icon: 'success',
duration: 2000
})
}else{
wx.showToast({
title: res.data.msg,
icon: 'error',
duration: 2000
})
}
}
})
},
//登录
login(res){
let tel=res.detail.value.tel
let captcha=res.detail.value.captcha
wx.request({
url: 'http://lv8.bawei.com/api/login', //仅为示例，并非真实的接口地址
data: {
tel:tel,
captcha:captcha
},
header: {
'content-type': 'application/json' // 默认值
},
method:'POST',
success (res) {
if(res.data.code==200){
wx.setStorage({
key:"token",
data:res.data.data
})
wx.switchTab({
url: '/pages/list/list'
})
wx.showToast({
title: res.data.msg,
icon: 'success',
duration: 2000
})
}else{
wx.showToast({
title: res.data.msg,
icon: 'error',
duration: 2000
})
}
}
})
console.log(res)
},
后台php
//获取验证码
public function getCaptcha(Request $request){
$tel=$request->post('tel');
$captcha=mt_rand(1111,9999);
$cache=Cache::store('redis')->get('time'.$tel);
if(!empty($cache)){
return ['code'=>700,'msg'=>'获取太频繁','data'=>[]];
}
$result=SmsCaptcha::sms($tel,$captcha);
if($result==0){
Cache::store('redis')->set('captcha'.$tel, $captcha,60);
Cache::store('redis')->set('time'.$tel, time(),60);
return ['code'=>200,'msg'=>'获取成功','data'=>$captcha];
}
return ['code'=>1000,'msg'=>'获取失败','data'=>[]];
}
//验证码登录
public function login(Request $request){
$tel=$request->post('tel');
$captcha=$request->post('captcha');
$cache=Cache::store('redis')->get('captcha'.$tel);
if($cache!=$captcha){
return ['code'=>1000,'msg'=>'验证码错误','data'=>[]];
}
$info=LoginModel::where('tel',$tel)->first();
if($info){
$token=JwtCaptcha::getToken($info['id']);
return ['code'=>200,'msg'=>'登陆成功','data'=>$token];
}
$data=[
'tel'=>$tel
];
$res=LoginModel::create($data);
if(!$res){
return ['code'=>1000,'msg'=>'登录失败','data'=>[]];
}
$jwt=JwtCaptcha::getToken($res['id']);
return ['code'=>200,'msg'=>'登陆成功','data'=>$jwt];
}