kkc-go/file/static/mobileLogin.tmpl

<div class="router-bar-user-login-view" id="mobile-login" style="display: none">
    <div class="mobile-login-header">
        <div class="mobile-login-header-back" id="mobile-login-header-back">
            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="m8.786 7.981 4.609-4.585a.555.555 0 1 0-.784-.789l-4.61 4.586L3.43 2.61a.556.556 0 0 0-.788.786l4.57 4.583-4.608 4.583a.555.555 0 1 0 .784.788l4.608-4.584 4.612 4.626a.553.553 0 0 0 .787.001.556.556 0 0 0 0-.786l-4.61-4.625Z"
                      fill="#999"></path>
            </svg>
        </div>
    </div>
    <div class="mobile-login-form" id="mobile-login-form">
        <form>
            <div class="select-login-type">
                <!--                <div class="select-login-type-item " id="mobile-login-phone">手机登录</div>-->
                <div class="select-login-type-item login-type-select" id="mobile-login-email">邮箱登录</div>
            </div>
            <div class="login-view-phone"></div>
            <div class="login-view-email">
                <div class="login-view-email-input">
                    <input name="email" placeholder="请输入邮箱"/>
                </div>

                <div class="login-view-email-input">
                    <input name="password" placeholder="请输入密码" type="password"/>
                    <div class="show-password" id="show-password">
                        <img id="show-eye"
                             src="/api/static/image/bar/login_eyeopen.png">
                    </div>
                </div>

                <div class="login-view-email-btn" id="login-email-btn">
                    登录
                </div>
                <div class="other-handler">
                    <div class="register-now">立即注册</div>
                    <div class="forgot-password">忘记密码</div>
                </div>
            </div>
        </form>
    </div>
    <div class="mobile-register-form" id="mobile-register-form" style="display: none">
        <div class="mobile-register-form-title">注册</div>
        <form>
            <div class="login-view-register-input">
                <input name="register-email" placeholder="请输入邮箱"/>
            </div>
            <div class="login-view-register-input">
                <input name="register-password" placeholder="请输入密码" type="password"/>
                <div class="show-password" id="show-register-password">
                    <img id="show-eye-register"
                         src="/api/static/image/bar/login_eyeopen.png">
                </div>
            </div>
            <div class="login-view-register-input">
                <input name="verify-password" placeholder="请输入确认密码" type="password"/>
                <div class="show-password" id="show-verify-password">
                    <img id="show-eye-verify"
                         src="/api/static/image/bar/login_eyeopen.png">
                </div>
            </div>
            <div class="login-view-register-input">
                <input name="verify-code" placeholder="请输入验证码" type="text"/>
                <div class="register-code" id="send-code">发送验证码</div>
            </div>
            <div class="login-view-email-btn" id="btn-register">
                注册
            </div>
            <div class="other-handler">
                <div class="to-login">登录</div>
                <div class="forgot-password">忘记密码</div>
            </div>
        </form>
    </div>
</div>
<script>
    function init() {
        let toLogin = document.getElementsByClassName("to-login");
        let forgotPassword = document.getElementsByClassName("forgot-password");
        let registerNow = document.getElementsByClassName("register-now");

        for (let i = 0; i < toLogin.length; i++) {
            let item = toLogin[i];
            item.addEventListener("click", function () {
                document.getElementById("mobile-forgotPassword-login").style.display = "none";
                document.getElementById("mobile-register-form").style.display = "none";
                document.getElementById("mobile-login-form").style.display = "";
            })
        }
        for (let i = 0; i < registerNow.length; i++) {
            let item = registerNow[i];
            item.addEventListener("click", function () {
                document.getElementById("mobile-login-form").style.display = "none";
                document.getElementById("mobile-register-form").style.display = "";
                document.getElementById("mobile-forgotPassword-login").style.display = "none";
            })
        }

        for (let i = 0; i < forgotPassword.length; i++) {
            let item = forgotPassword[i];
            item.addEventListener("click", function () {
                document.getElementById("mobile-login-form").style.display = "none";
                document.getElementById("mobile-register-form").style.display = "none";
                document.getElementById("mobile-forgotPassword-login").style.display = "";
            })
        }
        document.getElementById("mobile-login-header-back").addEventListener("click", function () {
            closeLoginPage()
        })

    }

    function closeLoginPage() {
        let ele1 = document.getElementById("mobile-login");
        if (ele1) ele1.style.display = "none";
        let ele2 = document.getElementById("mobile-login-form");
        if (ele2) ele2.style.display = "";
        let ele3 = document.getElementById("mobile-register-form");
        if (ele3) ele3.style.display = "none";
        let ele4 = document.getElementById("mobile-forgotPassword-login");
        if (ele4) ele4.style.display = "none";
    }

    document.getElementById("login-email-btn").addEventListener('click', () => {
        // 获取用户输入的邮箱和密码
        const email = document.querySelector("input[name='email']").value;
        const password = document.querySelector("input[name='password']").value;

        // 校验邮箱格式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert("请输入有效的邮箱地址");
            return;
        }

        // 校验密码长度
        if (password.length < 6) {
            alert("密码长度至少为 6 位");
            return;
        }

        // 进行邮箱登录的 API 请求
        fetch("/api/user/login", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: email,
                password: password,
                type: "email" // 将类型修改为 "email"
            })
        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        }).then(data => {
            if (data.code === 200) {
                setToken(data.data.token)
                closeLoginPage()
                getMobileUserInfo()
                //刷新页面
                window.location.reload();
            } else {
                alert(data.msg)
            }
        }).catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
        //获取用户钱包
    });

    function setToken(value) {
        localStorage.setItem("token", value);
    }

    // 修改1: API URL 配置
    const API_BASE_URL = '/api'; // 假设 API 根路径为 /api

    // 修改2: 发送验证码请求提取为独立函数
    function sendVerificationCode(email) {
        return fetch(`${API_BASE_URL}/send-verification-code`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({email}),
        })
            .then(response => response.json())
            .catch(error => {
                console.error('Error sending verification code:', error);
            });
    }

    // 修改3: 注册请求提取为独立函数
    function registerUser(email, password, verifyCode) {
        return fetch(`${API_BASE_URL}/register`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email,
                password,
                verifyCode,
            }),
        })
            .then(response => response.json())
            .catch(error => {
                console.error('Error registering user:', error);
            });
    }

    // 原密码显示功能部分
    let showPassword = [false, false, false];

    let showPasswordImg = document.getElementById("show-password");
    let showRegisterPasswordImg = document.getElementById("show-register-password");
    let showVerifyPasswordImg = document.getElementById("show-verify-password");

    showPasswordImg.addEventListener("click", function () {
        showPasswordByEye(this, 0)
    })
    showRegisterPasswordImg.addEventListener("click", function () {
        showPasswordByEye(this, 1)
    })
    showVerifyPasswordImg.addEventListener("click", function () {
        showPasswordByEye(this, 2)
    })

    function showPasswordByEye(ele, index) {

        showPassword[index] = !showPassword[index];
        let eye = ele.children[0];
        let inputField = ele.parentNode.getElementsByTagName("input")[0];
        if (showPassword[index]) {
            eye.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAyxJREFUWEftVUFIVFEUvfc5iGALF6JCQQlG7WqRpmRk0MJF0KJFRS2ECkEEJ/z/jdCiEVr43/tDIxUUGBgRuGkhtAmCJiioMdCoyF0GLWR0MYsWwh/nxh3el+84+sc0MPhv9/597/5zzzn3PoQ9tnCP4YEIUJgiEUMRQ2EMhMUjD/3/DEkpryLiV8dxPodVs5O4lPIIAFzO5XLO5OTkip9rzUPDw8MHhRAPEPE8ACwQUZfWenEnP93sbjweb6itrZ0FgENENAcAg1rr93x+DZBlWSeFEBkAqOMAEc0DwNndBmXbdgsAvEHEowbwChH1aq3frgPEGynldQCYCFS2wIw5jvNtN5gyMr0EgDY/HxHFtdbjGyTzP9i2PYSI6QAA1vduLpdLBbXeDsCenp5YR0fHEOfxFTD3R5RSTjBXxTnExjZMleQza5GIxjzPe5pOp/PVAGKvxGKxi0KIkSArAMBFDiqlnpTn2QCIq2lvb+/nahCxocKPWfMMIr4GgDnP834KIXyAjTU1NfsB4AQRdSPiuTJGSumIaBkRrWw2+zyTyRQ2Zci27UuIyLSuaVwNE397hjuMiJKu605v8JBlWXeEEMmy5IuImCwUCi+EEDyfXACIbRPA72Kx6CLiYwDgglk+7rTgSiqlRtd1mZTyABF9YZmIKE9E6UKhMO77xbA3FeiOCURsIaJORGz0pQCAT6XEiL3+2WKx2Om67kfeDwwM7Kuvr7+NiHEjJ/vpsFLq1zpAvDEd1ra6ujqaSqWW/YR9fX11TU1NPwKVTSmlrnBcSnkPADg5r7RS6pbxIRfnz5oP2Wz2dNAvPI8QMYGI847jMHulVdVrL6W8z11h7rCpW/2BWQmQKe4UIr4L6HKjUleVyx8KKJFIHCMilqHkHSLiMf/QT7QZIAPqGSJeM/fynue1ho2MUEC2bc8i4nGTdG5paakrOCBDALF5v/vjg4gmtNY3y1kJ7qsBxJ0xZh7Cbv8RrIYhPpNIJPqJ6BG/jUKIuOM4r3YEiC+zqZubm89USrYVQ3zXGPzCzMzMdPkQrAQslKGtqvkXsQhQGKsRQxFDYQyExSMPhTH0B2nxWTRHozuQAAAAAElFTkSuQmCC";
            inputField.type = "text";
        } else {
            eye.src = "/api/static/image/bar/login_eyeopen.png";
            inputField.type = "password";
        }
    }


    // 修改4: 发送验证码按钮点击事件修改为调用 sendVerificationCode
    document.getElementById("send-code").addEventListener("click", function () {
        let email = document.querySelector("input[name='register-email']").value;
        if (email === "") {
            alert("请填写邮箱");
            return;
        }

        sendVerificationCode(email).then(result => {
            if (result && result.code === 0) {
                alert("验证码已发送");
                let lastSendTime = 60;
                this.innerText = lastSendTime;
                let si = setInterval(() => {
                    lastSendTime -= 1;
                    document.getElementById("send-code").innerText = lastSendTime;
                    if (lastSendTime <= 0) {
                        document.getElementById("send-code").innerText = "发送验证码";
                        clearInterval(si);
                    }
                }, 1000);
            } else {
                alert("发送验证码失败: " + (result && result.msg ? result.msg : "未知错误"));
            }
        });
    });

    // 修改5: 注册按钮点击事件修改为调用 registerUser
    document.getElementById("btn-register").addEventListener("click", function (event) {
        event.preventDefault();
        let email = document.querySelector("input[name='register-email']").value;
        let password = document.querySelector("input[name='register-password']").value;
        let verifyPassword = document.querySelector("input[name='verify-password']").value;
        let verifyCode = document.querySelector("input[name='verify-code']").value;
        console.log(email, password, verifyPassword, verifyCode)
        if (email === "" || password === "" || verifyPassword === "" || verifyCode === "") {
            alert("请填写所有字段");
            return;
        }

        if (password !== verifyPassword) {
            alert("密码和确认密码不匹配");
            return;
        }

        registerUser(email, password, verifyCode).then(result => {
            if (result && result.code === 0) {
                alert("注册成功");
                // 注册成功后进行页面跳转或其他操作
            } else {
                alert("注册失败: " + (result && result.msg ? result.msg : "未知错误"));
            }
        });
    });
    init()
</script>