小程序+laravel8发送短信验证码

小程序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]);
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值