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