web-work/VoiceService/target/classes/static/login.html

<link rel="stylesheet" type="text/css" href="/analysis/css/styles.css">
<script src="/analysis/js/jquery-3.2.1.min.js"></script>
<script src="/analysis/js/jquery.validate-1.19.3.min.js"></script>
<script src="/analysis/js/layer.js"></script>
<script src="/analysis/js/md5.js"></script>
<div class="inputDiv1">
    <div class="inputDiv2">
        <form id="form1">
            <div>手机号码</div>
            <div><input id="phone" name="phone" value="" type="text"
                        required minlength="11" maxlength="11" number="true"
                        data-msg-required="请输入手机号码"
                        data-msg-minlength="手机号码不正确"
                        data-msg-maxlength="手机号码不正确"
                        data-msg-number="手机号码不正确"
            ></div>
            <div>密码</div>
            <div><input id="password" name="password" value="" type="password"
                        required maxlength="11" minlength="8"
                        data-msg-required="请输入密码"
                        data-msg-maxlength="密码长度必须8-11位数"
                        data-msg-minlength="密码长度必须8-11位数"
            ></div>
            <div>&nbsp;</div>
        </form>
        <div style="text-align: center; margin: 0 auto">
            <!--                <a href="javascript:login()" style="text-decoration: none; color: #ffffff; width: 300px">-->
            <button class="blueBtnDiv" onclick="login()" style="cursor:pointer; border: 0">登录</button>
            <!--                <button style="width: 300px; height: ">登录</button>-->
            <!--                </a>-->
        </div>

    </div>
</div>
<script type="text/javascript">
    function validate() {
        if ($("#phone").val().length != 11) {
            layer.alert("请输入正确的手机号码", {icon: 2});
            return false
        } else {
            return true
        }
    }

    function login() {
        if (!$("#form1").valid()) {
            return
        }
        // alert("aa")
        // alert(btoa($("#phone")))
        // return;
        // alert($("#form1").valid())
        const t = $("#form1").serializeArray()
        var data = {};
        $.each(t, function (i, field) {
            data[field.name] = field.value;
        });
        data.password = hex_md5(data.password)
        data.phone = btoa(data.phone)
        const LAYER_LOAD_ID = layer.load(2)
        $.ajax({
            url: '/analysis/login/login',
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: 'json',
            success: function (res) {
                // layer.close(LAYER_LOAD_ID)
                if (res.code == 0) {
                    window.parent.isLogin = true
                    layer.alert("成功登录", {icon: 1, closeBtn: 0}, function () {
                        layer.closeAll()
                        window.parent.layer.close(window.parent.LAYER_ID)
                        window.parent.afterLogin(res.data)
                    });
                } else {
                    window.parent.isLogin = false
                    layer.alert(res.message, {icon: 2});
                }
            },
            error: function (xhr, status, error) {
                // layer.close(LAYER_LOAD_ID)
                console.error('访问服务器错误:', error);
                window.parent.isLogin = false
                layer.alert("服务器繁忙，请稍后重试！", {icon: 2});
            },
            complete: function (XHR, TS) {
                layer.close(LAYER_LOAD_ID)
            }
        });
    }
</script>