tp6+微信小程序短信登录

小程序样式 wxml

<!--pages/phone/phone.wxml-->
<view class="container">
  <view class="title"  style='height:{{statusBarHeight+100}}rpx;padding-top:{{statusBarHeight}}rpx;'>登录</view>
  <form catchsubmit="login">
    <view class="inputView">
      <input class="inputText" value="{{phone}}" placeholder="请输入手机号" name="phone" bindblur="phone" />
    </view>
    <view class="inputView">
      <input class="inputText" value="{{code}}" placeholder="请输入验证码" name="code" />
      <button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button>
    </view>
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" formType="submit">登录</button>
    </view>
  </form>
</view>




 wxss

/* pages/phone/phone.wxss */
.container { 
  display: flex;  
  flex-direction: column; 
  padding: 0; 
 } 
 .inputView { 
  line-height: 45px; 
  border-bottom:1px solid #999999;
 } 
.title{
  width: 80%;
  font-weight: bold;
  font-size: 30px;
}
 .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;
 } 
 .loginBtn { 
  margin-top: 40px; 
  border-radius:10px;
 }

js 



Page({

  /**
   * 页面的初始数据
   */
  data: {
    windowHeight:0,
    phone:'',
    code:'',
    codebtn:'发送验证码',
    disabled:false,

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  // 获取输入账号 
  phone: function (e) {
    let phone = e.detail.value;
    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!reg.test(phone)) {
      wx.showToast({
        title: '手机号码格式不正确',
        icon:"none",
        duration:2000
      })
      return false;
    }
    this.setData({
      phone: e.detail.value
    })
  },
  //发送验证码
  sendcode(res){
    var phone=this.data.phone;
    var time = 60;
    var that=this;
    wx.request({
      url: '',
      method:'POST',
      data:{
        phone:phone
      },
      success:res=>{
        if(res.data.code==200){
          wx.showToast({
            title: '验证码已发送.请注意接收',
            icon:"success"
          })  
       
          var timers=setInterval(function () {
            time--;
            if (time>0){
              that.setData({
                codebtn:time,
                disabled:true
              });
            }else{
              that.setData({
                codebtn:'发送验证码',
                disabled:false
              });
              clearInterval(timers)
            }
          },1000)
        }else{
          wx.showToast({
            title: res.data.msg,
            icon:"none",
            duration:2000
          })
        }
        this.setData({
          code:res.data.data
        })
      }
    })
     

   
  },
  // 登录处理
  login(e){
    var phone=this.data.phone
    var code=this.data.code
     wx.request({
       url: '',
       method:'POSt',
       data:{
         phone,
         code
       },
       success:res=>{
         if(res.data.code==200){
            wx.switchTab({
              url: '../../pages/index4/index4',
            })
         }
         console.log(res.data)
       }
     })
  },
   
  
})

后台

   //接受参数
            $tel = input('post.');

            if(empty($tel['phone'])){
                return  json(['code'=>400,'msg'=>'手机号不能为空','data'=>null]);
            }


            $statusStr = array(
                "0" => "短信发送成功",
                "-1" => "参数不全",
                "-2" => "服务器空间不支持,请确认支持curl或者fsocket,联系您的空间商解决或者更换空间!",
                "30" => "密码错误",
                "40" => "账号不存在",
                "41" => "余额不足",
                "42" => "帐户已过期",
                "43" => "IP地址限制",
                "50" => "内容含有敏感词"
            );
            $code = rand(1111,9999);
            $smsapi = "http://api.smsbao.com/";
            $user = ""; //短信平台帐号
            $pass = md5("账号"); //短信平台密码
            $content="梦开始的地方:您的短信验证码为$code,请不要告诉其他人";//要发送的短信内容
            $phone = $tel['phone'];//要发送短信的手机号码
//            $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
//            $result =file_get_contents($sendurl) ;

                Cache::set($phone,$code);
                return json(['code'=>200,'data'=>$code,'msg'=>'发送验证码成功']);

登录

    //获取参数
          $data=input('post.');
          //判断验证码
            $code = Cache::get($data['phone']);

            if($code!==$data['code']){
              return json(['code'=>300,'msg'=>'验证码不正确','data'=>null]);
            }
            $res=User::where('phone',$data['phone'])->find();
            if(empty($res)){
                $da['phone']=$data['phone'];
                $arr=User::create($da);
                if($arr){
                    //生成一个新的token 返回
                    $token=signToken($data['phone']);
                    return json(['code'=>200,'msg'=>'登录成功','data'=>$token]);
                }else{
                    return json(['code'=>400,'msg'=>'登录失败','data'=>null]);
                }
            }else{
                $token=signToken($data['phone']);
                return json(['code'=>200,'msg'=>'登录成功','data'=>$token]);
            }

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值