kkc-go/file/resources/js/handler.js

// const routerArray = [{
//     path: '/', name: '首页',
// }]
// const handler = {
//      JumpRouter, getToken, setToken, GetUserInfo
// }
var loginState = false;

//=======================链接跳转
function JumpRouter(url, query) {
    if (query) {
        window.location.href = url + "?routerlink=" + query;
    } else {
        window.location.href = url
    }
}

function jumpClass(className) {
    // document.querySelector('.to-class' + className).scrollIntoView()
    // 获取元素的网页高度
    var height = document.querySelector('.to-class' + className).offsetTop;
    //这个80是导航栏的高度
    window.scrollTo(0, height - 80);


}

function getToken() {
    return localStorage.getItem("token");
}

function setToken(value) {
    localStorage.setItem("token", value);
    console.log("token set", getToken())
}

function GetUserInfo() {
    console.log("获取用户信息")
    fetch('/api/user/info', {
        method: 'GET', headers: {
            // 'Content-Type': 'application/json',
            "auth-sign": getToken()
        }, // body: JSON.stringify(data)
    })
        .then(response => response.json())
        .then(data => {
            if (data.code !== 200) {
                loginState = false;
                //头像修改
                document.getElementById("not-login").style.display = "black";
                document.getElementById("logged-in").style.display = "none";
                //用户名称
                document.getElementById("login-name").innerText = "登录";
            } else {
                //导航栏头像处理
                if (data.data.avatar) {
                    document.getElementById("not-login").style.display = "none";
                    let logged = document.getElementById("logged-in");
                    logged.style.display = "block"
                    logged.src = data.data.avatar;
                } else {
                    document.getElementById("not-login").style.display = "black";
                    document.getElementById("logged-in").style.display = "none";
                }
                // 导航栏名字问题
                document.getElementById("login-name").innerText = data.data.name;
                loginState = true;
            }
        })
        .catch((error) => {
            loginState = false;
            //头像修改
            document.getElementById("not-login").style.display = "black";
            document.getElementById("logged-in").style.display = "none";
            //用户名称
            document.getElementById("login-name").innerText = "登录";
            console.error('Error:', error);
            // alert("获取登录信息失败");
        });

}

//点击导航栏头像
function clickAvatar() {
    if (loginState) {
        //已经登录的，进入管理页面
        JumpRouter("/manage/info");
    } else {
        let loginBody = document.getElementById("login-body");
        let loginCenter = document.getElementById("login-center");
        let registerCenter = document.getElementById("register-center");
        loginBody.style.display = "";
        loginCenter.style.display = "";
        registerCenter.style.display = "none"
    }
}

//关闭登录框
function closeLoginBody() {
    console.log(6666666666)
    let loginBody = document.getElementById("login-body");
    let loginCenter = document.getElementById("login-center");
    let registerCenter = document.getElementById("register-center");
    loginBody.style.display = "none";
    loginCenter.style.display = "none";
    registerCenter.style.display = "none"
}

//打开登录框
function openLoginBody(type) {
    if (type === "register") {
        let loginBody = document.getElementById("login-body");
        let loginCenter = document.getElementById("login-center");
        let registerCenter = document.getElementById("register-center");
        loginBody.style.display = "";
        loginCenter.style.display = "none";
        registerCenter.style.display = ""
    } else if (type === "login") {
        let loginBody = document.getElementById("login-body");
        let loginCenter = document.getElementById("login-center");
        let registerCenter = document.getElementById("register-center");
        loginBody.style.display = "";
        loginCenter.style.display = "";
        registerCenter.style.display = "none"
    }
}

//登录
document.addEventListener('DOMContentLoaded', () => {
    const selectType = 'email';
    const phoneTab = document.getElementById('phone-tab');
    const emailTab = document.getElementById('email-tab');
    const wxTab = document.getElementById('wx-tab');
    const phoneSection = document.getElementById('phone-section');
    const emailSection = document.getElementById('email-section');
    const wxSection = document.getElementById('wx-section');
    const selectBar = document.getElementById('select-bar');

    const sendCodeBtn = document.getElementById('send-code-btn');
    const phoneLoginBtn = document.getElementById('phone-login-btn');

    const emailLoginBtn = document.getElementById('email-login-btn');
    const refreshWxCode = document.getElementById('refresh-wx-code');

    function setType(type) {
        phoneSection.style.display = 'none';
        emailSection.style.display = 'none';
        wxSection.style.display = 'none';

        if (type === 'phone') {
            phoneSection.style.display = 'block';

            selectBar.style.marginLeft = '-200px';
        } else if (type === 'email') {
            emailSection.style.display = 'block';
            selectBar.style.marginLeft = '0';
        } else if (type === 'wx') {
            wxSection.style.display = 'block';
            selectBar.style.marginLeft = '200px';
        }
    }

    phoneTab.addEventListener('click', () => setType('phone'));
    emailTab.addEventListener('click', () => setType('email'));
    wxTab.addEventListener('click', () => setType('wx'));

    function showTip(msg) {
        alert(msg);
    }

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }

    function validatePhone(phone) {
        const re = /^1[3-9]\d{9}$/;
        return re.test(String(phone));
    }

    function validateCode(code) {
        const re = /^\d{6}$/;
        return re.test(String(code));
    }


    sendCodeBtn.addEventListener('click', () => {
        const phone = document.getElementById('phone-input').value;
        if (!validatePhone(phone)) {
            showTip('手机号格式错误');
            return;
        }
        fetch("/api/user/loginCode", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                phone: phone
            })
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    console.log('Verification code sent successfully:', data);
                } else {
                    console.error('Failed to send verification code:', data.message);
                }
            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
            });
        alert('验证码已发送');


    });

    phoneLoginBtn.addEventListener('click', () => {
        const phone = document.getElementById('phone-input').value;
        const code = document.getElementById('phone-code-input').value;
        if (!validatePhone(phone)) {
            showTip('手机号格式错误');
            return;
        }
        if (!validateCode(code)) {
            showTip('验证码错误');
            return;
        }
        fetch("/api/user/login", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: phone,
                password: code,
                type: "phone"
            })
        }).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)
                //刷新页面
                window.location.reload();
            } else {
                alert(data.msg)
            }
        }).catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });


        alert('手机号登录成功');
    });

    emailLoginBtn.addEventListener('click', () => {
        const email = document.getElementById('email-input').value;
        const password = document.getElementById('email-password-input').value;
        if (!validateEmail(email)) {
            showTip('邮箱格式错误');
            return;
        }
        if (password.length < 6) {
            showTip('密码过短');
            return;
        }
        fetch("/api/user/login", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: email,
                password: password,
                type: "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)
                //刷新页面
                window.location.reload();
            } else {
                alert(data.msg)
            }
        }).catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
    });

    refreshWxCode.addEventListener('click', () => {
        console.log('二维码已刷新');
    });
    setType(selectType);
});
//注册
document.addEventListener('DOMContentLoaded', () => {
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const requirePassword = document.getElementById('requirePassword');
    const phone = document.getElementById('phone');
    const code = document.getElementById('code');
    const sendCodeBtn = document.getElementById('send-register-code');
    const registerBtn = document.getElementById('register-btn');

    let awaitCode = 0;

    function showTip(msg) {
        alert(msg);
    }

    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(String(email).toLowerCase());
    }

    function validatePhone(phone) {
        const re = /^1[3-9]\d{9}$/;
        return re.test(String(phone));
    }

    function validatePassword(password) {
        const re = /^[a-zA-Z0-9,./<>?;'\\:"|\[\]{}~!@#$%^&*()_+=-]{6,32}$/;
        return re.test(String(password));
    }

    function validateCode(code) {
        const re = /^[0-9]{6}$/;
        return re.test(String(code));
    }

    sendCodeBtn.addEventListener('click', () => {
        if (awaitCode === 0) {
            const phoneVal = phone.value;
            if (!validatePhone(phoneVal)) {
                showTip('手机号格式错误');
                return;
            }
            alert('验证码已发送');
            awaitCode = 5;
            const interval = setInterval(() => {
                awaitCode--;
                sendCodeBtn.textContent = awaitCode > 0 ? `${awaitCode}s` : '发送验证码';
                if (awaitCode === 0) {
                    clearInterval(interval);
                }
            }, 1000);
        }
    });

    registerBtn.addEventListener('click', () => {
        const usernameVal = username.value;
        const passwordVal = password.value;
        const requirePasswordVal = requirePassword.value;
        const phoneVal = phone.value;
        const codeVal = code.value;

        if (!validateEmail(usernameVal)) {
            showTip('邮箱格式错误');
            return;
        }
        if (!validatePassword(passwordVal)) {
            showTip('密码格式错误');
            return;
        }
        if (passwordVal !== requirePasswordVal) {
            showTip('两次密码不一致');
            return;
        }
        if (!validatePhone(phoneVal)) {
            showTip('手机号格式错误');
            return;
        }
        if (!validateCode(codeVal)) {
            showTip('验证码错误');
            return;
        }

        alert('注册成功');
        // Here you can make an API request to register the user
    });
});