更新代码

resources/views/auth/bycode.blade.php

@@ -0,0 +1,97 @@
+@extends('layouts.app')
+
+@section('footer', '')
+
+@section('content')
+<!-- 手机验证码登录 Start -->
+<div class="login_logo"><img src="/assets/home/img/logo_9.png" alt=""></div>
+<form action="{{ url()->current() }}" method="POST" accept-charset="utf-8">
+    <div class="login_container" id="bycode">
+        <div class="login_block login_margin">
+            <i class="icon-mobile login_i" style="font-size:1rem"></i>
+            <input type="text" name="mobile" value="" v-model="mobile" placeholder="请输入手机号" class="input login_input">
+        </div>
+        <div class="login_block">
+            <i class="icon-shield login_i"></i>
+            <input type="text" name="code" value="" v-model="code" placeholder="请输入验证码" class="input login_input">
+            <span class="forget_link"  id="send" @click="sendSmsCode">|&nbsp;获取验证码</span>
+        </div>
+        @csrf
+        <button type="sublimt" class="btn login_btn ajax-post" :disabled="disable">登录</button>
+        <div class="login-btm">
+            <span class="login-left" @click="window.location.href = '{{ route('register') }}'">注册账号</span>
+            <span class="login-right" @click="window.location.href = '{{ route('login') }}'">密码登录</span>
+        </div>
+    </div>
+    <div class="white_fixed"></div>
+</form>
+<!-- 手机验证码登录 End -->
+@endsection
+
+@section('script')
+<script type="text/javascript">
+    var app = new Vue({
+        el: '#bycode',
+        data: {
+            inputMobile: false,
+            inputCode: false,
+            codeSend: false,
+            mobile: '',
+            code: ''
+        },
+        methods: {
+            sendSmsCode: function() {
+                $.post("{{ route('auth.sms') }}", {mobile: this.mobile, channel: "BYCODE", '_token': '{{ csrf_token() }}'}, function(res) {
+                    if (res.statusCode == 200) {
+                        updateAlert(res.message);
+                        settime($('#send'));
+                        app.codeSend = true;
+                    } else {
+                        updateAlert(res.message);
+                    }
+                });
+            }
+        },
+        watch: {
+            mobile: function() {
+                var reg = /^1[3578]{1}[0-9]{9}$|14[57]{1}[0-9]{8}$|^[0][9]\d{8}$/;
+                if (reg.test(this.mobile)) {
+                    this.inputMobile = true;
+                } else {
+                    this.inputMobile = false;
+                }
+            },
+            code: function() {
+                var reg = /\d{4}/;
+                if (reg.test(this.code)) {
+                    this.inputCode = true;
+                } else {
+                    this.inputCode = false;
+                }
+            }
+        },
+        computed: {
+            disable: function () {
+                return !(this.inputMobile && this.inputCode && this.codeSend);
+            }
+        }
+    });
+
+    var countdown = 60;
+    function settime(obj) {
+        if (countdown == 0) {
+            obj.removeAttr("disabled");
+            obj.html("获取验证码");
+            countdown = 60;
+            return;
+        } else {
+            obj.attr("disabled", true);
+            obj.html("重新发送(" + countdown + ")");
+            countdown--;
+        }
+        setTimeout(function() {
+            settime(obj)
+        }, 1000)
+    }
+</script>
+@endsection

resources/views/auth/forgot.blade.php

@@ -0,0 +1,98 @@
+@extends('layouts.app')
+
+@section('footer', '')
+
+@section('content')
+
+<!-- 找回密码 Start -->
+<div class="login_logo"><img src="/assets/home/img/logo.jpg" alt=""></div>
+<form action="{{ url()->current() }}" method="POST" accept-charset="utf-8">
+    <div class="login_container" id="forgot">
+        <div class="login_block login_margin">
+            <i class="icon-mobile login_i" style="font-size:1rem"></i>
+            <input type="tel" name="mobile" value="" placeholder="请输入手机号" class="input login_input" v-model="mobile">
+        </div>
+        <div class="login_block">
+            <i class="icon-shield login_i"></i>
+            <input type="text" name="code" value="" placeholder="请输入验证码" class="input login_input" v-model="code">
+            <span class="forget_link" @click="send" :disabled="!inputMobile">|&nbsp;获取验证码</span>
+        </div>
+        @csrf
+        <button type="sublimt" class="btn login_btn ajax-post" :disabled="disable">确定</button>
+        <div class="login-btm">
+            <span class="login-left" @click="window.location.href = '{{ route('register') }}'" >注册账号</span>
+            <span class="login-right" @click="window.location.href = '{{ route('login.bycode') }}'" >手机验证码登录</span>
+        </div>
+    </div>
+    <div class="white_fixed"></div>
+</form>
+<!-- 找回密码 End -->
+@endsection
+
+@section('script')
+<script type="text/javascript">
+    var app = new Vue({
+        el: '#forgot',
+        data: {
+            inputMobile: false,
+            inputCode: false,
+            codeSend: false,
+            mobile: '',
+            code: ''
+        },
+        methods: {
+            send: function() {
+                $.post("{{ route('auth.sms') }}", {mobile: this.mobile, channel: "FORGOT", '_token': '{{ csrf_token() }}'}, function(res) {
+                    if (res.statusCode == 200) {
+                        updateAlert(res.message);
+                        settime($('#send'));
+                        app.codeSend = true;
+                    } else {
+                        updateAlert(res.message);
+                    }
+                });
+            }
+        },
+        watch: {
+            mobile: function() {
+                var reg = /^1[356789]{1}[0-9]{9}$|14[57]{1}[0-9]{8}$|^[0][9]\d{8}$/;
+                if (reg.test(this.mobile)) {
+                    this.inputMobile = true;
+                } else {
+                    this.inputMobile = false;
+                }
+            },
+            code: function() {
+                var reg = /\d{4}/;
+                if (reg.test(this.code)) {
+                    this.inputCode = true;
+                } else {
+                    this.inputCode = false;
+                }
+            }
+        },
+        computed: {
+            disable: function () {
+                return !(this.inputMobile && this.inputCode && this.codeSend);
+            }
+        }
+    });
+
+    var countdown = 60;
+    function settime(obj) {
+        if (countdown == 0) {
+            obj.removeAttr("disabled");
+            obj.html("获取验证码");
+            countdown = 60;
+            return;
+        } else {
+            obj.attr("disabled", true);
+            obj.html("重新发送(" + countdown + ")");
+            countdown--;
+        }
+        setTimeout(function() {
+            settime(obj)
+        }, 1000)
+    }
+</script>
+@endsection

resources/views/auth/login.blade.php

@@ -0,0 +1,69 @@
+@extends('layouts.app')
+@section('footer', '')
+@section('content')
+<!-- 登录 Start -->
+<div class="login_logo"><img src="/assets/home/img/logo_9.png" alt=""></div>
+<div class="login_title">登录</div>
+<form action="{{ url()->current() }}" method="POST" accept-charset="utf-8">
+    <div class="login_container" id="login">
+        <div class="login_block login_margin">
+            <i class="icon-mobile login_i" style="font-size:1rem"></i>
+            <input type="tel" name="mobile" value="" placeholder="请输入手机号" class="input login_input" v-model="mobile">
+        </div>
+        <div class="login_block">
+            <i class="icon-lock login_i"></i>
+            <input type="password" name="password" value="" placeholder="请输入登录密码" class="input login_input" v-model="password">
+            <span class="forget_link" @click="window.location.href = '{{ route('forgot') }}'">忘记密码？</span>
+        </div>
+        <button type="sublimt" class="btn login_btn ajax-post" :disabled="disable">登录</button>
+        <div class="login-btm">
+            <span class="login-left" @click="window.location.href = '{{ route('register') }}'" >注册账号</span>
+            <span class="login-right" @click="window.location.href = '{{ route('login.bycode') }}'" >手机验证码登录</span>
+        </div>
+        @csrf
+        <div class="other_login" @click="window.location.href = '{{ route('login.wechat') }}'" ><i class="icon-wechat"></i>微信登录</div>
+
+    </div>
+    <div class="white_fixed"></div>
+</form>
+<!-- 登录 End -->
+@endsection
+
+@section('script')
+<script type="text/javascript">
+    var app = new Vue({
+        el: '#login',
+        data: {
+            inputMobile: false,
+            inputPassword: false,
+            mobile: '',
+            password: ''
+        },
+        methods: {
+        },
+        watch: {
+            mobile: function() {
+                var reg = /^1[3456789]{1}[0-9]{9}$|14[57]{1}[0-9]{8}$|^[0][9]\d{8}$/;
+                if (reg.test(this.mobile)) {
+                    this.inputMobile = true;
+                } else {
+                    this.inputMobile = false;
+                }
+            },
+            password: function() {
+                var reg = /.{6,32}/;
+                if (reg.test(this.password)) {
+                    this.inputPassword = true;
+                } else {
+                    this.inputPassword = false;
+                }
+            }
+        },
+        computed: {
+            disable: function () {
+                return !(this.inputMobile && this.inputPassword);
+            }
+        }
+    });
+</script>
+@endsection

resources/views/auth/register.blade.php

@@ -0,0 +1,105 @@
+@extends('layouts.app')
+
+@section('footer', '')
+
+@section('content')
+<!-- 注册 Start -->
+<div class="login_logo"><img src="/assets/home/img/logo_9.png" alt=""></div>
+<form action="" method="get" accept-charset="utf-8">
+    <div class="login_container" id="register">
+        <div class="login_block login_margin">
+            <i class="icon-mobile login_i" style="font-size:1rem"></i>
+            <input type="number" name="mobile" value="" v-model="mobile" placeholder="输入手机号" class="input login_input">
+        </div>
+        <div class="login_block login_margin">
+            <i class="icon-lock login_i"></i>
+            <input type="password" name="password" value="" placeholder="输入密码" class="input login_input">
+        </div>
+        <div class="login_block login_margin">
+            <i class="icon-lock login_i"></i>
+            <input type="password" name="password_confirmation" value="" placeholder="确认密码" class="input login_input">
+        </div>
+        <div class="login_block">
+            <i class="icon-shield login_i"></i>
+            <input type="number" name="verify" value="" v-model="code" placeholder="输入验证码" class="input login_input">
+            <span class="forget_link" @click="sendSmsCode">|&nbsp;获取验证码</span>
+        </div>
+        @csrf
+        <button type="sublimt" class="btn login_btn ajax-post" :disabled="disable">注册</button>
+        <div class="login-btm">
+            <span class="login-left" @click="window.location.href = '{{ route('login') }}'">密码登录</span>
+            <span class="login-right" @click="window.location.href = '{{ route('login.bycode') }}'">手机验证码登录</span>
+        </div>
+    </div>
+    <div class="white_fixed"></div>
+</form>
+<!-- 注册 End -->
+@endsection
+
+@section('script')
+<script type="text/javascript">
+    var app = new Vue({
+        el: '#register',
+        data: {
+            inputMobile: false,
+            inputCode: false,
+            codeSend: false,
+            mobile: '',
+            code: ''
+        },
+        methods: {
+            sendSmsCode: function() {
+                $.post("{{ route('auth.sms') }}", {mobile: this.mobile, channel: "DEFAULT", '_token': '{{ csrf_token() }}'}, function(res) {
+                    if (res.statusCode == 200) {
+                        updateAlert(res.message);
+                        settime($('#send'));
+                        app.codeSend = true;
+                    } else {
+                        updateAlert(res.message);
+                    }
+                });
+            }
+        },
+        watch: {
+            mobile: function() {
+                var reg = /^1[3456789]{1}[0-9]{9}$|14[57]{1}[0-9]{8}$|^[0][9]\d{8}$/;
+                if (reg.test(this.mobile)) {
+                    this.inputMobile = true;
+                } else {
+                    this.inputMobile = false;
+                }
+            },
+            code: function() {
+                var reg = /\d{4}/;
+                if (reg.test(this.code)) {
+                    this.inputCode = true;
+                } else {
+                    this.inputCode = false;
+                }
+            },
+        },
+        computed: {
+            disable: function () {
+                return !(this.inputMobile && this.inputCode && this.codeSend);
+            }
+        }
+    });
+
+    var countdown = 60;
+    function settime(obj) {
+        if (countdown == 0) {
+            obj.removeAttr("disabled");
+            obj.html("获取验证码");
+            countdown = 60;
+            return;
+        } else {
+            obj.attr("disabled", true);
+            obj.html("重新发送(" + countdown + ")");
+            countdown--;
+        }
+        setTimeout(function() {
+            settime(obj)
+        }, 1000)
+    }
+</script>
+@endsection

resources/views/auth/reset.blade.php

@@ -0,0 +1,46 @@
+@extends('layouts.app')
+
+@section('footer', '')
+
+@section('content')
+<form action="{{ Request::fullUrl() }}" method="POST" accept-charset="utf-8">
+    <div class="login_container" id="reset">
+        <div class="login_block">
+            <i class="icon-lock login_i"></i>
+            <input type="password" name="password" value="" placeholder="请输入登录密码" class="input login_input" v-model="password">
+        </div>
+        @csrf
+        <button type="sublimt" class="btn login_btn ajax-post" :disabled="disable">重置密码</button>
+    </div>
+    <div class="white_fixed"></div>
+</form>
+@endsection
+
+@section('script')
+<script type="text/javascript">
+    var app = new Vue({
+        el: '#reset',
+        data: {
+            inputPassword: false,
+            password: ''
+        },
+        methods: {
+        },
+        watch: {
+            password: function() {
+                var reg = /.{6,32}/;
+                if (reg.test(this.password)) {
+                    this.inputPassword = true;
+                } else {
+                    this.inputPassword = false;
+                }
+            }
+        },
+        computed: {
+            disable: function () {
+                return !(this.inputPassword);
+            }
+        }
+    });
+</script>
+@endsection