login.html 9.8 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_ucda0dtgz1.css">
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/assets/css/login.css">
    <script src="__TMPL__/public/assets/js/base.js"></script>


    <style>
        .icon-Fill{
            font-size: 0.5rem;
            color: #B3B3B3;
        }
        .icon-mima{
            font-size: 0.5rem;
            color: #B3B3B3;
        }
        .icon-yanzhengma{
            font-size: 0.5rem;
            color: #B3B3B3;
        }
        .margin_item{
            margin-top: 0.35rem;
        }
        .codebtn{
            color:#fff;
            background-color: inherit;
            border-radius: 10px;
            border: none;
            outline: none;
            -webkit-appearance: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    </style>

</head>
<body>
<div class="container">
    <!--头部-->
    <div class="head">

        <!--头像图片-->
        <div class="head_pic">
            <img src="__TMPL__/public/assets/images/bpic02@2x.png">
        </div>
    </div>
    <!--登录注册-->
    <div class="mid">
        <div class="mid_item item_color">
            账号登录
        </div>
        <div class="mid_item">
            立即注册
        </div>

    </div>

    <div class="bottom_box">
        <!--登录输入框-->
        <div class="bottom" style="display: flex">
            <div class="bottom_item">
                <div class="iconfont icon-Fill"></div>
                <input type="tel" placeholder="请输入手机号" class="phone" id="mobile2" value="{$mobile}">
            </div>
            <div class="bottom_item">
                <div class="iconfont icon-mima"></div>
                <input type="password" placeholder="请输入密码" id="password2" value="{password}">
            </div>

            <!--登录框-->
            <div class="bottom_sub login">
                立即登录
            </div>

            <!--记住密码 立即注册-->
            <div class="bottom_t">
                <div class="bottom_t_item">
                    <input type="checkbox" id="rememberCode" <eq name="$is_remember_password" value="1">checked</eq> /> <span>记住密码</span>
                </div>
                <div class="bottom_t_item">
                    <div>忘记密码？立即注册</div>
                </div>
            </div>
        </div>

        <!--注册输入框-->
        <div class="bottom" style="display: none">
            <div class="bottom_item ">
                <div class="iconfont icon-Fill"></div>
                <input type="tel" placeholder="请输入手机号" id="mobile" value="">
            </div>
            <!--输入验证码-->
            <div class="bottom_small margin_item">
                <!--验证码输入框-->
                <div class="bottom_small_left">
                    <div class="iconfont icon-yanzhengma"></div>
                    <input type="text" placeholder="输入验证码" id="mobile_code">
                </div>
                <!--获取验证码框-->
                <div class="bottom_small_right">
                    <input type="button" onclick="sendCode(this)" value="获取验证码" class="codebtn" />
                </div>
            </div>

            <div class="bottom_item margin_item">
                <div class="iconfont icon-mima"></div>
                <input type="password" placeholder="请输入密码" id="password">
            </div>

            <!--登录框-->
            <div class="bottom_sub margin_item register">
                立即注册
            </div>

            <!--记住密码 立即注册-->
            <div class="bottom_text">
                已有账号，立即登录
            </div>
        </div>
    </div>
    <!--土司弹框-->
    <div class="pop_fn"></div>
</div>
<script src="__TMPL__/public/assets/js/jquery.min.js"></script>

<script>
    //颜色切换
    $(".mid_item").click(function () {
        var index = $(this).index()
        $(this).addClass("item_color").siblings(".mid_item").removeClass("item_color")
        // 内容切换
        $(".mid_item").eq($(".bottom_box>.bottom").index()).siblings()
        $(".bottom_box>.bottom").css("display","none").eq($(this).index()).css("display","flex");
    })

    //土司弹框
    function popup(message) {
        $('.pop_fn').css('top', 3 + 'rem').html(message);
        setTimeout(function() {
            $('.pop_fn').css('top', '-' + 2 + 'rem').html(message);
        }, 1800)
    }
    //登录功能正则验证
    $(".login").click(function () {
        var password = $('#password2').val();
        var phone_number = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        var mobile = $(".phone").val();
        if (!phone_number.test(mobile)){
            popup("手机号输入格式有误");
        }else{
            $.ajax({
                type : 'POST',
                url : "{:url('login/ajax_login')}",
                data : {
                    'mobile' : mobile,
                    'password' : password
                },
                dataType : 'json',
                success :function(data){
                    if(data.code == 1){
                        location.href = "/portal/index/homePage";
                    }else{
                        popup(data.msg);
                    }
                }
            })
        }
    });
    //注册功能正则验证
    $(".register").click(function () {
        var phone_number = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        var mobile = $("#mobile").val();
        var mobile_code = $('#mobile_code').val();
        var password = $('#password').val();
        if (!phone_number.test(mobile)){
            popup("手机号格式有误");
        }else{
            $.ajax({
                type : 'POST',
                url : "{:url('login/ajax_register')}",
                data : {
                    'mobile' : mobile,
                    'mobile_code' : mobile_code,
                    'password' : password
                },
                dataType : 'json',
                success :function(data){
                    if(data.code == 1){
                        location.href = "{:url('login/login')}";
                    }else{
                        popup(data.msg)
                    }
                }
            })
        }
    });
    //苹果input自动下滑兼容
    $("input").blur(function(){
        setTimeout(function() {
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 300);
    })
    //聚焦监听
    $('input').focus(function() {
        if((/Android/gi).test(navigator.userAgent)) {
            window.addEventListener('resize', function() {
                if(document.activeElement.tagName == 'INPUT' ||
                    document.activeElement.tagName == 'TEXTAREA') {
                    window.setTimeout(function() {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            });
        }
    })
</script>

<script>
    //记住密码
    $('#rememberCode').click(function () {
        var mobile = $('#mobile2').val();
        var password = $('#password2').val();
        var ischeck = $(this).is(':checked');
        if(ischeck){
            $.ajax({
                type : 'POST',
                url : "{:url('login/ajax_remember_password')}",
                data : {
                    'mobile' : mobile,
                    'password' : password,
                    'ischeck' : ischeck,
                },
                dataType : 'json',
                success :function(data){
                    if(data.code != 1){
                        $('#rememberCode').attr('checked',null);
                        popup(data.msg)
                    }
                }
            })
        }else{
            //取消记住密码
            $.ajax({
                type : 'POST',
                url : "{:url('login/ajax_cencel_remember_password')}",
                data : {},
                dataType : 'json',
                success :function(data){
                    //成功
                }
            })
        }

    });
    //注册发送验证码
    function sendCode(val){
        var mobile = $('#mobile').val();
        var phone_number = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!phone_number.test(mobile)) {
            popup("手机号格式有误");
        } else {
            $.ajax({
                type: 'POST',
                url: "{:url('common/sendMobileCode')}",
                data: {
                    'mobile': mobile
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        var countdown = 60;
                        settime(val, countdown)
                    } else {
                        popup(data.msg)
                    }
                }
            })
        }
    }
    //倒计时
    function settime(val,countdown) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 10;
        } else {
            val.setAttribute("disabled", true);
            val.value= countdown +"s";
            countdown--;
            setTimeout(function() {
                settime(val,countdown)
            },1000)
        }
    }
</script>
</body>
</html>