<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="./js/layui/css/layui.css">
    <link rel="stylesheet" href="./js/layui/css/modules/admin.css">
    <link rel="stylesheet" href="./js/layui/css/modules/login.css">
    <style>
        /* .bg {
            width: 100%;
            height: 100%;
            background: url('../static/js/layui/css/modules/layer/default/bg.png');.
            background-size: 100% 100%;
        } */
    </style>
</head>
<body>
    <div class="bg">
        <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
            <div class="layadmin-user-login-main">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <h2>登录</h2>
                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-username"
                                   for="LAY-user-login-username"></label>
                            <input type="text" name="username" id="LAY-user-login-username" lay-verify="required"
                                   placeholder="用户名" class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                   for="LAY-user-login-password"></label>
                            <input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
                                   placeholder="密码" class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formData">登 录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script>
    layui.use('form', function () {
        const form = layui.form;

        //监听提交
        form.on('submit(formData)', function (data) {
            const username = data.field.username;
            const password = data.field.password;
            const dataJson = JSON.stringify({
                "username": username,
                "password": password,
            })
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                url: '/api/userLogin',
                data: dataJson,
                success: function (r) {
                    if (r?.success) {
                        console.log('r: ', r);
                        layer.msg('登录成功');
                        window.localStorage.setItem('userName',r.data.username)
                        setTimeout(() => window.location.href = '/template', 1500)
                        return
                    }
                    alert(r?.message ?? '发生错误了');
                }
            });
            return false
        });
    });
</script>
</body>
</html>