<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ExciteCMS - 后台登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/login.css" media="all">
</head>
<body>
<div class="main-body">
    <div class="login-main">
        <div class="login-top">
            <!-- 标题 -->
            <span>ExciteCMS后台登录</span>
            <span class="bg1"></span>
            <span class="bg2"></span>
        </div>
        <form class="layui-form login-bottom" id="loginFrom">
            <div class="center">
                <!-- 用户名输入框 -->
                <div class="item">
                    <span class="icon icon-2"></span>
                    <label>
                        <input type="text" name="username" placeholder="请输入登录邮箱/手机号" lay-verify="usernameVerify" maxlength="24" autocomplete="off" required/>
                    </label>
                </div>
                <!-- 密码输入框 -->
                <div class="item">
                    <span class="icon icon-3"></span>
                    <label>
                        <input type="password" name="password" placeholder="请输入密码" lay-verify="passwordVerify" maxlength="20" autocomplete="off" required/>
                    </label>
                    <span class="bind-password icon icon-4"></span>
                </div>
                <!-- 验证码模块 -->
                <div id="validatePanel" class="item" style="width: 137px;">
                    <span class="icon icon-1"></span>
                    <label>
                        <input type="text" name="captcha" placeholder="请输入验证码" lay-verify="captchaVerify" maxlength="8" autocomplete="off" required/>
                    </label>
                    <img id="refreshCaptcha" class="validateImg" width="100px" height="38px" alt="" src="">
                </div>
            </div>

            <!-- 记住密码和找回密码按钮 -->
            <div class="tip">
                <input type="checkbox" name="remember" lay-skin="primary" value="1" title="保持登录">
                <a href="javascript:" class="forget-password">忘记密码？</a>
            </div>

            <!--  登录按钮 -->
            <div class="layui-form-item" style="text-align:center; width:100%;height:100%;margin:0;">
                <button type="button" class="login-btn" id="submitButton" lay-submit lay-filter="login">立即登录</button>
            </div>

            <!-- 第三方登录按钮 -->
            <div class="center" style="text-align: center;">
                <a href="javascript:"><i class="layui-icon layui-icon-login-qq" style="color:#3492ed;font-size: 30px"></i></a>  
                <a href="javascript:"><i class="layui-icon layui-icon-login-wechat" style="color:#4daf29;font-size: 30px"></i></a>  
                <a href="javascript:"><i class="layui-icon layui-icon-login-weibo" style="color:#CF1900;font-size: 30px"></i></a>
            </div>
        </form>
    </div>
</div>
<!-- 页脚版权、备案号等信息 -->
<div class="footer">
    ©版权所有 2020-2021 XXX工作室<span class="padding-5">|</span><a target="_blank" href="http://www.miitbeian.gov.cn">网站备案号信息 </a>
</div>
<!-- JS脚本 -->
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<!--RSA-->
<script src="/lib/jsencrypt/jsencrypt.min.js" charset="utf-8"></script>
<script src="/lib/jsencrypt/rsa.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        const $ = layui.jquery,
            form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出iframe框架
        if (top.location !== self.location)
            top.location = self.location;

        // 显示明文密码与否
        $('.bind-password').on('click', function () {
            if ($(this).hasClass('icon-5')) {
                $(this).removeClass('icon-5');
                $("input[name='password']").attr('type', 'password');
            } else {
                $(this).addClass('icon-5');
                $("input[name='password']").attr('type', 'text');
            }
        });

        // 点击刷新验证码
        let captchaUrl = '/tool/captcha/get/image';
        $('#refreshCaptcha').on('click', function () {
            document.getElementById("refreshCaptcha").src = captchaUrl + '?t=' + (new Date).getTime();
        }).trigger('click');

        // 自定义验证规则
        form.verify({
            // 用户名输入框校验
            usernameVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入登录账号！';
                }
            },
            // 密码校验
            passwordVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入密码！';
                }
            },
            // 验证码校验
            captchaVerify: function (value) {
                if (value.length <= 0) {
                    return '请输入验证码！';
                }
            },
        });
        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            // 密码加密
            let encrypt = new JSEncrypt()
            encrypt.setPublicKey(PUBLIC_KEY)
            data.password = encrypt.encrypt(data.password)
            // 加载层
            //loading层
            let index = layer.load(1, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            // 执行请求
            $.post("/system/user/login", data, function (data) {
                if (data.code === 200) {
                    layer.msg('登录成功！', {
                        icon: 1, time: 1000
                    }, function () {
                        window.location = '/system/index';
                    });
                } else {
                    layer.msg(data.msg, {
                        icon: 2, time: 3000
                    }, function () {
                        document.getElementById("refreshCaptcha").src = captchaUrl + '?t=' + (new Date).getTime();
                    });
                }
                layer.close(index)
            });
            return false;
        });
        // 回车键登录
        $('#loginFrom').bind('keypress', function (e) {
            if (e.keyCode === 13) {
                $("#submitButton").trigger("click");
            }
        });
    });
</script>
</body>
</html>
