tp6 微信小程序手机号验证码登录

logini.wxml

<!--pages/login/login.wxml-->
<view class="container">
  <view class="title">登录</view>
  <form bindsubmit="formSubmit" >
    <view class="inputView">
      <input class="inputText"  placeholder="请输入手机号"  bindblur="phone" name="phone"  />
    </view>
    <view class="inputView">
      <input class="inputText" 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>

login.wxss

/* pages/login/login.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;
 }

login.js

// pages/login/login.js
import WxValidate from '../../utils/WxValidate'

//引入缓存类
import Cache from '../../utils/Cache'
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    codebtn:'发送验证码',
    disabled:false,
    phone:'',
    code:''
  },
  formSubmit(e){
   const params = e.detail.value;
   //console.log(params);
   if(!this.WxValidate.checkForm(params)){
     const error = this.WxValidate.errorList[0]
     //console.log(error);
     wx.showToast({
       title: error.msg,
       icon:'error',
       duration:2000
     })
     return false
   }
   wx.request({
     url: 'http://www.tp6.com/wxaizufang/login',
     data:{phone:params.phone,code:params.code},
     method:"GET",
     success:res=>{
       console.log(res);
      if(res.data.error_code == 500){
        wx.showToast({
          title: res.data.msg,
          icon:'error',
          duration:2000
        })
      }
      if(res.data.error_code == 0)
      {
        wx.showToast({
          title:res.data.msg,
          duration:2000,
          success:function(res){
             wx.redirectTo({
               url: '/pages/add/add',
             })
          }
        })
      }
     }
   })
  },

  //发送短信验证码
  sendcode(e)
  {
    const phone = this.data.phone
    wx.request({
      
      url: 'http://www.tp6.com/wxaizufang/code?',
      method:"POST",
      header:{token:Cache.get('token')},
      data:{phone:phone},
      success:res=>{
        const code = res.data
        
        if(res.data.error_code == 999)
        {
          wx.showToast({
            title:'手机号不能为空',
            icon:'error'
          })
        }

        if(res.data.error_code == 0)
        {
          wx.showToast({
            title:res.data.msg,
            duration:2000
          })
        }

        this.setData({
          code:code
        })
      }
    })
  },
  showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    this.initValidate()

  },

  //获取输入的手机号
  phone(e)
  {
    const phone = e.detail.value
    
    this.setData({
      phone:phone
    })
  },

  


//验证函数
initValidate() {
  const rules = {
    phone: {
      required: