login.html 6.2 KB
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<include file="public@head_common"/>
	<link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/register_login/login.css" />
	<link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/augly.css" />
	<title>登录</title>
	<style>
		html,body {
			display: flex;
			flex-flow: column;
			background: url("__TMPL__/public/mobile/images/login_bg.png") center no-repeat;
			background-size: 100% 100%;
			overflow: hidden;
			margin: 0;
			/*background-attachment: fixed;*/
		}
		.container {
			display: flex;
			flex: 1;
			flex-direction: column;
			overflow: auto;
		}
		.footer {
			display: flex;
			position: relative;
			height: 1rem;
			color: #BBBBBB;
			background-color: #FFFFFF;
			box-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.6);
		}
		.get_num {
			position: absolute;
			font-size: 0.28rem;
			color: #F4AC30;
			line-height: 1rem;
			right: 1rem;
		}
		/*.footbac{*/
			/*background: url(__TMPL__/public/mobile/images/footbac.png) repeat-x;*/
			/*background-size: 100% 100%;*/
		/*}*/
	</style>
</head>

<body>
<div class="test_num"></div>
<div class="header">
	<div class="return">
        <span class="back_href">
            <i class="iconfont icon-jiantou-copy"></i>返回
        </span>
	</div>
	登录
</div>
<div class="container">
	<!--<div class="header_wrap"></div>-->
	<!--banner-->
	<div class="login_img">
		<div class="baby_img">
			<img src="__TMPL__/public/mobile/images/login_pic1.png" class="img_detail" />
		</div>

		<div class="login_text">
			<p>用户登录</p>
			<span>仅限天津及唐山地区用户</span>
		</div>
	</div>
	<div class="input_num">
		<i class="iconfont icon-icon--"></i>
		<input type="text" name="mobile" id="mobile" value="" class="input_text" placeholder="请输入手机号" />
	</div>
	<div class="input_num">
		<i class="iconfont icon-duanxin"></i>
		<input type="text" name="code" id="code" value="" class="input_text" placeholder="请输入验证码" />
		<p class="get_num">获取验证码</p>
	</div>
	<div class="btn">
		登录
	</div>
	<p class="no_num">还没有账号,<span class="to_register">去注册</span></p>

	<div class="bottom_icon">
		<img src="__TMPL__/public/mobile/images/biglogo@2x.png" class="bottom_img" />
		<p class="bottom_text">{$site_info.site_name}</p>
	</div>
</div>
<div class="footbac"></div>
<script src="__TMPL__/public/mobile/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var h=$(window).height();

    $("body").height(h+"px")

	$('.to_register').click(function(){
        window.location.href = "{:url('user/Register/index')}";
	});
    var popup_switch = true;
    $('.btn').click(function() {
        var mobile = $('input[name=mobile]').val();
        var reg = /^1(3|4|5|7|8|9)\d{9}$/;
        var code = $('input[name=code]').val();
        if(!(reg.test(mobile))){
            _error("手机号码错误");
            return false;
        } else if(code.length != 6){
            _error("验证码错误");
            return false;
        } else {
            var data = {
                mobile: mobile,
                code: code
            };
            $.ajax({
                url: "{:url('user/Login/doLogin')}",
                type: "POST",
                data: data,
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        _error(res.msg);
                        setTimeout(function() {
                            window.location.href = res.url;
                        },1000);
                    } else {
                        _error(res.msg);
                    }
                }
            });
        }
    });
    var get_switch = true;
    $('.get_num').click(function() {
        var mobile = $('input[name=mobile]').val();
        var reg = /^1(3|4|5|7|8|9)\d{9}$/;
        if(!(reg.test(mobile))){
            _error("手机号码错误");
            return false;
        } else {
            if(get_switch) {
                var data = {
                    mobile: mobile,
					is_login: 1
                };
                $.ajax({
                    url: "{:url('user/Common/sendCode')}",
                    type: "POST",
                    data: data,
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            _error(res.msg);
                            get_switchs();
                        } else {
                            _error(res.msg);
                        }
                    }
                });
            }
        }
    });

    // 弹窗提示
    function _error(test) {
        if(popup_switch) {
            popup_switch = false;
            $('.test_num').html(test);
            $('.test_num').removeClass('Augly-fadeout');
            $('.test_num').addClass('Augly-fadein');
            $('.test_num').show();
            setTimeout(function() {
                $('.test_num').removeClass('Augly-fadein');
                $('.test_num').addClass('Augly-fadeout');
                popup_switch = true
            }, 1500)
        } else {
            popup_switch = true
        }
    }
    // 倒计时
    function get_switchs() {
        console.log(get_switch);
        if(get_switch) {
            get_switch = false;
            $('.get_num').html('60' + 's')
            var num = parseInt(60);
            var timer = setInterval(function() {
                if(parseInt($('.get_num').html()) > 1) {
                    num--
                    $('.get_num').html(num + 's')
                } else {
                    get_switch = true;
                    $('.get_num').html('获取')
                    clearInterval(timer)
                }
            }, 1000)
        }
    }
</script>
</body>

</html>