小程序wxml界面
<view>
<view class="one">
登录
</view>
<form bindsubmit="login" >
<view class="inputView">
<input type="text" placeholder="请输入手机号" name="phone" class="inputText" bindblur="phone"/>
</view>
<view class="inputView">
<input class="inputText" placeholder="请输入验证码" name="code" bindblur="sms" />
<button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button>
</view>
<button type="default" form-type="submit">登录</button>
</form>
</view>
小程序
.one{
font: 3em sans-serif;
color: #0000cc;
}
.inputView{
line-height: 45px;
border-bottom:1px solid #999999;
}
.inputText{
display:inline-block;
line-height: 45px;
padding-left: 10px;
margin-top: 11px;
color: #cccccc;
font-size: 14px;
}
.line {
border: 1px solid #ccc;
border-radius: 20px;
float: right;
margin-top: 9px;
color: #cccccc;
}
小程序 js界面
Page({
/**
* 页面的初始数据
*/
data: {
phone:'',
code:'',
codebtn:'发送验证码',
disabled:false,
},
phone(e)
{
// console.log(e);
let phone =e.detail.value;
let reg =/^[1][3,4,5,7,8][0-9]{9}$/;
if(!reg.test(phone)){
// 弹窗提示
wx.showToast({
title: '手机号格式不正确',
duration: 2000,
success: (res) => {},
fail: (res) => {},
complete: (res) => {},
})
return false;
}
this.setData({
phone:phone
})
},
sendcode(){
let phone=this.data.phone;
var Time=60;
var that=this;
wx.request({
url: 'http://www.day120.com/api/sendCode',
data: {
phone:phone
},
header: {
'content-type': 'application/json' // 默认值
},
success:(res)=>{
console.log(res);
var timer =setInterval(function(){
if(Time>0){
Time--;
that.setData({
codebtn:Time + '秒后重新发送',
disabled:true,
});
}
if(Time ==0){
that.setData({
codeText:"发送验证码",
disabled:false
});
clearInterval(timer)
}
},1000)
}
})
},
login(e){
let phone=this.data.phone;
let code=e.detail.code;
if(phone==""){
wx.showToast({
title: '手机号不能为空',
icon:"error"
})
}
if(code==""){
wx.showToast({
title: '验证码不能为空',
icon:"error"
})
}
wx.request({
url: 'http://www.day120.com/api/login',
data: {
phone:phone,
code:code
},
header: {
'content-type': 'application/json' // 默认值
},
method: 'post',
dataType: 'json',
responseType: 'text',
success:(res)=>{
console.log(res);
if(res.code == 200){
wx.switchTab({
url: '../list/list',
success: (result)=>{
},
fail: ()=>{},
complete: ()=>{}
});
}
}
})
},
})
laravel8后端接受数据请求短信宝短信
public function sendCode(Request $request){
$phone=$request->input('phone');
$code=rand(1111,9999);
// 用缓存 将验证码存起来有效时间分5分章
Cache::put($phone.$code,$code,360);
$statusStr = array(
"0" => "短信发送成功",
"-1" => "参数不全",
"-2" => "服务器空间不支持,请确认支持curl或者fsocket,联系您的空间商解决或者更换空间!",
"30" => "密码错误",
"40" => "账号不存在",
"41" => "余额不足",
"42" => "帐户已过期",
"43" => "IP地址限制",
"50" => "内容含有敏感词"
);
// 先去缓存中去这个60秒的手机号,如果可以取到就是1分钟内有发送过验证,如果娶不到就是没有发送成功
$smsapi = "http://api.smsbao.com/";
$user = "*****"; //短信平台帐号
$pass = md5("*********"); //短信平台密码
$content="您本次登录智慧效的验证码为【{$code}】,请不要外传";//要发送的短信内容
// $phone = "*****";//要发送短信的手机号码
$sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
$result =file_get_contents($sendurl) ;
// echo $statusStr[$result];
Cache::put($phone,$phone,60);
return json_encode(['code'=>200,'msg'=>"$statusStr[$result]",'data'=>$code]);
}