template/app/login.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>登录-华易门店会员卡营销项目</title>
    <meta name="keywords" content="华易门店会员卡营销项目">
    <meta name="description" content="华易门店会员卡营销项目">
    <link href="__PUBLIC__static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="__PUBLIC__app/css/common.css" rel="stylesheet">
    <link href="__PUBLIC__app/css/login.css" rel="stylesheet">
    
</head>

<body>

    <div class="content">
        <div class="form-wp">
            <div class="title">手机快捷登录</div>
                <div class="form-box">

                    <div class="input-box">
                        <label> 手机号&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="mobile" name="mobile" placeholder="请输入手机号码"></label>
                    </div>
                    <div class="input-box">
                        <label> 验证码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="captcha" name="captcha" placeholder="请输入验证码 ">
                        <div class="verify"><img class="verifyimg" src="{:url('/app/login/verify')}" onclick="this.src='{:url('/app/login/verify')}'" alt="captcha"></div>
                        </label>
                    </div>
                    <div class="input-box">
                        <label>动态码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="sms_captcha" name="sms_captcha" placeholder="请输入动态码">
                            <button id="sendOutCode">获取动态码</button>
                        </label>
                    </div>
                    <input type="hidden" id="mobile_is_has" value="1">
                    <button class="submit-btn primary" onclick="login()">登录</button>
                    <a class="submit-btn register-immediately" href="{:url('/app/login/register')}">立即注册</a>
                </div>
            </div>
        </div>    
    </div>
    <script src="__PUBLIC__app/js/jquery-3.2.1.min.js"></script>
    <script src="__PUBLIC__static/layer_mobile/layer.js"></script>
    <script>
        var timeout = 0; //剩余时间计时
        var cansend = true; //是否能发短信    
        //计时
        function showProgress() {
            if (timeout <= 0) {
                $('#sendOutCode').html('获取验证码');
                cansend = true;
                $('#sendOutCode').attr('disabled', false);
                return;
            }
            
            $('#sendOutCode').html('剩余 ' + timeout + '秒');
            timeout--;
            setTimeout('showProgress()', 1000);
            $('#sendOutCode').attr('disabled', true);