miaxis
/
jsjp_gw


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极速驾培查询密码</title>
    <style type="text/css">
        div {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        .bg {
            width: 100vw;
            min-height: 100vh;
            background: linear-gradient(180deg, #D6EBFD 0%, #F5FAFF 100%);
            text-align: center;
        }

        .title {
            margin: 0 auto;
            margin-top: 6.4vw;
            margin-bottom: 5.3vw;
        }

        .mid {
            padding: 0 4vw;
            width: 100%;

        }

        .form {
            width: 100%;
            background-color: #fff;
            padding: 0 4vw;
            vertical-align: baseline;
            text-align: left;
            border-radius: 2.5vw;
            margin-bottom: 5.6vw;
        }

        .form-input {
            width: 100%;
            outline: none;
            height: 10.5vw;
            background: #F2F3F5;
            border-radius: 50px 50px 50px 50px;
            opacity: 1;
            padding-left: 4vw;
            margin-top: 1.6vw;
            border: none;
            box-sizing: border-box;
        }

        .form-icon {
            position: absolute;
            width: 8vw;
            right: 4vw;
            font-size: 4vw;
            top: 3vw;
        }

        .form-submit {
            width: 84vw;
            line-height: 10.6vw;
            background: #498EF5;
            border-radius: 40px 40px 40px 40px;
            opacity: 1;
            margin: 0 auto;
            text-align: center;
            color: #fff;
            margin-top: 13vw;
        }

        .res {
            width: 92vw;
            background-color: #fff;
            padding: 0 3.2vw;
            box-sizing: border-box;
            color: #5C6066;
          min-height: 20vw;
            border-radius: 20px 20px 20px 20px;
        }

        .res-title {
            width: 38vw;
        }

        .res-content {
            width: 100%;
            text-align: left;
            margin-top: 5.6vw;
            padding-bottom: 5.6vw;

        }

        .res-search {
           text-align: left;

        }
        .res-err{
            display: none;
        }

        #pop {
            display: none;
            background-color: rgba(0, 0, 0, 0.55);
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;


        }

        .pop-center {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;

        }

        .pop-content {
            background-color: #fff;
            width: 84vw;
            /* min-height: 50vh; */
            height: auto;
            overflow-y: scroll;
            border-radius: 5vw;
        }

        .pop-list {
            text-align: center;
            font-size: 5vw;
            padding: 0 2vw;

        }

        .pop-list-item {
            padding: 2vw 0;
            border-bottom: 1px solid rgb(199, 199, 199);
            box-sizing: border-box;

        }

        .m-toast-pop {
            display: none;
            position: fixed;
            width: 100%;
            top: 0;
            bottom: 0;
            right: 0;
            overflow: auto;
            text-align: center;
        }

        .m-toast-inner {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            text-align: center;
        }

        .m-toast-inner-text {
            display: inline-block;
            margin: 0 22px;
            padding: 19px 21px;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 22px;
            background: rgba(0, 0, 0, 0.72);
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div id="m-toast-pop" class="m-toast-pop">
        <div class="m-toast-inner">
            <div class="m-toast-inner-text" id="m-toast-inner-text"></div>
        </div>
    </div>
    <div id="pop" class="pop-center">
        <div class="pop-content">
            <div class="pop-list">
                <!-- <div class="pop-list-item">福州市</div>  -->
            </div>
        </div>
    </div>
    <div class="toast">

    </div>
    <div class="bg">

        <img class="title" src="./assets/student.png">
        <div class="mid">
            <div class="form">
                <div style="font-size: 4vw;padding-top: 5.3vw;"><span style="color: #FE3B2B;">*</span>证件号码<span
                        style="color: #FE3B2B;">（注意：英文要大写）</span></div>
                <input oninput="bindFormModel(this)" data-field="idcard" class="form-input" />
                <div style="font-size: 4vw;padding-top: 4vw;"><span style="color: #FE3B2B;">*</span>手机号码</div>
                <input oninput="bindFormModel(this)" data-field="phone" class="form-input" />
                <div style="font-size: 4vw;padding-top: 4vw;">
                    <span style="color: #FE3B2B;">*</span>选择地市

                </div>
                <div onclick="showPop()" style="position: relative;">
                    <img class="form-icon"
                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuOTA3MzVlLTA2IDI0TDI0IDI0TDI0IC0zLjgxNDdlLTA2TC0xLjkwNzk4ZS0wNyAtMS43MTY1NWUtMDZMMS45MDczNWUtMDYgMjRaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjAxIi8+CjxwYXRoIGQ9Ik0xMCA4TDE0IDEyTDEwIDE2IiBzdHJva2U9IiM5Nzk2OUYiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" />
                    <input readonly class="form-input" />
                </div>

                <div onclick="studentSearch()" class="form-submit">查询</div>
                <div class="" style="height: 10.6vw;"></div>

            </div>
            <div class="res">
                <img class="res-title" src="./assets/search_res1.png">
                <div class="res-err">
                    <span  style="color: red;">未查询到相关数据</span>
                </div>
                <div class="res-content">
                    <div  class="res-search">学员您好,您的极速驾培信息如下：</div>

                    <div> 帐号：<span class="res-search" style="color: red;"></span></div>

                    <div>密码：<span class="res-search" style="color: red;"></span></div>
                    <div>为了保证您的信息安全,请您妥善保管账号和密码,不将账号和密码告知他人!</div>


                </div>
            </div>
            <div style="height: 10vw;"></div>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            const formModel = {
                city: "",
                idcard: "",
                phone: ""
            }
            document.querySelector('.pop-list').addEventListener('click', function (e) {
                console.log(e)
                hidePop()
                formModel.city = e.target.dataset.index || ""
                document.querySelectorAll('.form-input')[2].value = e.target.innerText

            })

            $.ajax({
                url: "https://jsjp-admin1.zzxcx.net/jsjp-admin/open-api/gzpt/userInfo/type/coach_city"
            }).then(res => {
                res.data.forEach(element => {
                    $('.pop-list').append(`<div class="pop-list-item" data-index=${element.dictValue}>${element.dictLabel}</div>`)

                });
                console.log(res)
            })
            function bindFormModel(e) {

                formModel[e.getAttribute("data-field")] = e.value

                console.log(formModel)
            }
            function showPop() {
                document.querySelector("#pop").style = "display:flex"
            }
            function hidePop() {
                document.querySelector("#pop").style = "display:none"
            }
            function studentSearch() {
                if (!formModel.idcard.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X)$)/)) {
                    message('身份证格式错误')
                    return
                }
                if (!formModel.phone.match(/^1[3-8][0-9]{9}$/)) {
                    message('手机号码格式错误')
                    return
                }
                if (formModel.city == '') {
                    message('请选择地区')
                    return
                }
                $.ajax({
                    url: "https://jsjp-admin1.zzxcx.net/jsjp-admin/open-api/tms/coachInfo/getPasswordByIdcard",
                    method: 'get',
                    data: formModel
                }).then(res => {
                    if (res.data == null) {
                        message('查询不到数据')
                        document.querySelectorAll('.res-err')[0].style = 'display:block'
                        document.querySelectorAll('.res-content')[0].style = 'display:none'
                        return
                    }
                    document.querySelectorAll('.res-err')[0].style = 'display:none'
                    document.querySelectorAll('.res-content')[0].style = 'display:block'
                    document.querySelectorAll('.res-search')[0].innerText = res.data.name + '学员您好,您的极速驾培信息如下：'
                    document.querySelectorAll('.res-search')[1].innerText = res.data.idcard
                    document.querySelectorAll('.res-search')[2].innerText = res.data.password

                })


            }
            function message(message) {
                $('#m-toast-inner-text').text(message);
                $('#m-toast-pop').fadeIn();
                setTimeout(function () {
                    $('#m-toast-pop').fadeOut();
                }, 2500);
            }
            // message("****不能为空");

        </script>

</body>

</html>