|
|
@@ -0,0 +1,335 @@
|
|
|
+<!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>
|
