以下程式碼可以進行優化和封裝；這裡我實現功能為主，就不封裝啦。小夥伴可以自己試著封裝一下。 

1：書寫登入表單

<view class="container">
    <view class="title">登入</view>
    <form catchsubmit="login">
        <view class="inputView">
            <input class="inputText" placeholder="請輸入手機號" name="phone" bindblur="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>

 2：js

// pages/phone_login/phone_login.js
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        // 定義手機號
        phone: '',
        // 傳送驗證碼倒計時
 

        codebtn: '傳送驗證碼',
        // 是否禁用的按鈕
        disabled: false,
    },
    /**
     * 失焦事件驗證手機號
     */
    phone(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() {
        let that = this;
        let phone = this.data.phone;
        if (phone == '') {
            wx.showToast({
                title: '手機號碼不可以為空',
                icon: "none",
                duration: 2000
            })
        }
        //傳送手機號獲取驗證碼
        wx.request({
            url: 'http://www.yan.com/mouth/login', //僅為示例，並非真實的介面地址
            data: {
                phone
            },
            header: {
                'content-type': 'application/json' // 預設值
            },
            success: res => {
                if (res.data.code == 200) {
                    wx.showToast({
                        title: '驗證碼已傳送.請注意接收',
                        icon: "success"
                    })
                    let time = 60;
                    var times = setInterval(function () {
                        time--;
                        if (time > 0) {
                            that.setData({
                                codebtn: time,
                                disabled: true
                            });
                        } else {
                            that.setData({
                                codebtn: '傳送驗證碼',
                                disabled: false
                            });
                            clearInterval(times)
                        }
                    }, 1000)
                }else{
                    wx.showToast({
                        title: res.data.msg,
                        icon:"none",
                        duration:2000
                      })
                }
            }
        })
    },
    /**
     * 獲取到驗證碼和手機號進行登入
     */
    login(evt) {
        var that = this;
        let phone = evt.detail.value.phone;
        let code = evt.detail.value.code;

        if (phone == "") {
            wx.showToast({
                title: '請填寫手機號碼',
                icon: 'none',
                duration: 2000
            })
            return false;
        }
        if (code == "" || isNaN(code) || code.length != 4) {
            wx.showToast({
                title: '驗證碼格式不正確',
                icon: 'none',
                duration: 2000
            })
            return false;
        } else {
            wx.request({
                url: 'http://www.yan.com/mouth/code', //僅為示例，並非真實的介面地址
                data: {
                    phone,
                    code
                },
                header: {
                    'content-type': 'application/json' // 預設值
                },
                success(res) {
                // 提示登入成功
                        wx.showToast({
                            title: res.data.meg,
                            icon: 'none',
                            duration: 2000
                        })
              
                }
            })

        }

    }
})

3:laravel7 路由

Route::group(['namespace' => 'mouth'], function () {
//登入展示
    Route::get('mouth/login','PhoneLoginController@getPhone');
//驗證碼
    Route::get('mouth/code','PhoneLoginController@phoneLogin');
});

4：控制器程式碼

<?php

namespace App\Http\Controllers\mouth;

use App\Http\Controllers\Controller;
use App\Models\Admin;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redis;

class PhoneLoginController extends Controller
{
    /**
     * 接受手機號，傳送驗證碼
     */
    public function getPhone(Request $request)
    {
//        接受手機號
        $sendPhone = $request->get('phone');
//        用手機號查詢使用者資訊是否有這個手機號， 沒有就去進行註冊，有就繼續傳送驗證碼
        $test_phone = Admin::where('phone', $sendPhone)->first();
        if ($test_phone == false) {
            return ['code' => 500, 'meg' => '資料庫沒有這個手機號', 'data' => ''];
        }
        if (!preg_match('/^1[3-9]\d{9}$/', $sendPhone)) {
            return ['code' => 1001, 'msg' => '手機號不符合規則', 'data' => ''];
        }
        //判斷 是否重複傳送
        $redisPhone=Redis::get($sendPhone);
        if ($redisPhone){
            return ['code' => 1002, 'msg' => '手機號傳送太過於頻繁', 'data' => ''];
        }
        $statusStr = array(
            "0" => "簡訊傳送成功",
            "-1" => "引數不全",
            "-2" => "伺服器空間不支援,請確認支援curl或者fsocket，聯絡您的空間商解決或者更換空間！",
            "30" => "密碼錯誤",
            "40" => "賬號不存在",
            "41" => "餘額不足",
            "42" => "帳戶已過期",
            "43" => "IP地址限制",
            "50" => "內容含有敏感詞"
        );
//        手機號傳送驗證碼
        $smsapi = "http://api.smsbao.com/";
        $user = "**********"; //簡訊平臺帳號
        $pass = md5("*********"); //簡訊平臺密碼
        $code = rand('1000', '9999');
        $content = "【百味園】您的驗證碼是$code,30秒內有效.若非本人操作請忽略此訊息。";//要傳送的簡訊內容
        $phone = $sendPhone;//要傳送簡訊的手機號碼
        $sendurl = $smsapi . "sms?u=" . $user . "&p=" . $pass . "&m=" . $phone . "&c=" . urlencode($content);
        $result = file_get_contents($sendurl);
//        將驗證碼儲在緩衝，設定過期時間為一分鐘
        Redis::setex($sendPhone,600,$code);
        return ['code' => 200, 'meg' => $statusStr[$result], 'data' => ''];
    }
//    驗證手機號傳送的驗證碼
    public function phoneLogin(Request $request)
    {
        $login=$request->input();
//        接受驗證碼
        $test_code=$login['code'];
//        取出儲的驗證碼，鍵為接受到的手機好
        $redisCode=Redis::get($login['phone']);
//        進行對比
        if ($test_code!=$redisCode){
//返回前臺
            return ['code' => 500, 'meg' => '驗證碼錯誤', 'data' => ''];
        }
//        驗證成功，返回前臺
        return ['code' => 200, 'meg' => '登入成功', 'data' => ''];
    }
}

部落格參考：

https://blog.csdn.net/jweicao/article/details/117334550

https://www.cnblogs.com/xiaoyantongxue/p/15586772.html

效果圖：