password2.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <title>教练管家查询密码</title>
  9. <style type="text/css">
  10. div {
  11. box-sizing: border-box;
  12. }
  13. body {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. ul,
  18. ol {
  19. list-style: none;
  20. }
  21. .bg {
  22. width: 100vw;
  23. min-height: 100vh;
  24. background: #06203A;
  25. text-align: center;
  26. }
  27. .title {
  28. margin: 0 auto;
  29. margin-top: 6.4vw;
  30. margin-bottom: 5.3vw;
  31. }
  32. .mid {
  33. padding: 0 4vw;
  34. width: 100%;
  35. }
  36. .form {
  37. width: 100%;
  38. color: #fff;
  39. background: #0B2B4D;
  40. padding: 0 4vw;
  41. vertical-align: baseline;
  42. text-align: left;
  43. border-radius: 2.5vw;
  44. margin-bottom: 5.6vw;
  45. }
  46. .form-input {
  47. width: 100%;
  48. outline: none;
  49. height: 10.5vw;
  50. background: #26486B;
  51. color: #fff;
  52. opacity: 1;
  53. padding-left: 4vw;
  54. margin-top: 1.6vw;
  55. border: none;
  56. box-sizing: border-box;
  57. font-size: 4vw;
  58. }
  59. .form-icon {
  60. position: absolute;
  61. width: 8vw;
  62. right: 4vw;
  63. font-size: 4vw;
  64. top: 3vw;
  65. }
  66. .form-submit {
  67. width: 84vw;
  68. line-height: 10.6vw;
  69. background: #35BF5E;
  70. opacity: 1;
  71. margin: 0 auto;
  72. text-align: center;
  73. color: #fff;
  74. margin-top: 13vw;
  75. }
  76. .res {
  77. width: 92vw;
  78. background-color: #0B2B4D;
  79. padding: 0 3.2vw;
  80. box-sizing: border-box;
  81. color: #5C6066;
  82. min-height: 20vw;
  83. border-radius: 20px 20px 20px 20px;
  84. color: #fff;
  85. }
  86. .res-title {
  87. width: 38vw;
  88. }
  89. .res-content {
  90. width: 100%;
  91. text-align: left;
  92. margin-top: 5.6vw;
  93. padding-bottom: 5.6vw;
  94. }
  95. .res-search {
  96. text-align: left;
  97. }
  98. .res-err {
  99. display: none;
  100. }
  101. #pop {
  102. display: none;
  103. background-color: rgba(0, 0, 0, 0.55);
  104. width: 100vw;
  105. height: 100vh;
  106. position: fixed;
  107. top: 0;
  108. left: 0;
  109. z-index: 999;
  110. }
  111. .pop-center {
  112. display: flex;
  113. justify-content: center;
  114. align-items: center;
  115. align-content: center;
  116. }
  117. .pop-content {
  118. background-color: #fff;
  119. width: 84vw;
  120. /* min-height: 50vh; */
  121. height: auto;
  122. overflow-y: scroll;
  123. border-radius: 5vw;
  124. }
  125. .pop-list {
  126. text-align: center;
  127. font-size: 5vw;
  128. padding: 0 2vw;
  129. }
  130. .pop-list-item {
  131. padding: 2vw 0;
  132. border-bottom: 1px solid rgb(199, 199, 199);
  133. box-sizing: border-box;
  134. }
  135. .m-toast-pop {
  136. display: none;
  137. position: fixed;
  138. width: 100%;
  139. top: 0;
  140. bottom: 0;
  141. right: 0;
  142. overflow: auto;
  143. text-align: center;
  144. z-index: 999;
  145. }
  146. .m-toast-inner {
  147. position: absolute;
  148. left: 50%;
  149. top: 50%;
  150. width: 100%;
  151. transform: translate(-50%, -50%);
  152. -webkit-transform: translate(-50%, -50%);
  153. text-align: center;
  154. z-index: 999;
  155. }
  156. .m-toast-inner-text {
  157. display: inline-block;
  158. margin: 0 22px;
  159. padding: 19px 21px;
  160. font-size: 16px;
  161. color: #FFFFFF;
  162. letter-spacing: 0;
  163. line-height: 22px;
  164. background: rgba(0, 0, 0, 0.72);
  165. border-radius: 10px;
  166. }
  167. .back {
  168. position: absolute;
  169. top: 3vw;
  170. left: 3vw;
  171. width:3vw;
  172. }
  173. </style>
  174. </head>
  175. <body>
  176. <a href="./downloadApp2.html"> <img class="back"
  177. src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAAXNSR0IArs4c6QAAAiBJREFUSEullT9oFEEUxr83mzMcimIhxC4QxcYuhU1MIOmSbKKCY5KVvbsiiIWVjemusrIKQUh158ZzvUDInztjAv4Bo4W2ikUQ7MRGRRHvSO7mye7dLvGS3O05U+3CfL9578037xH+Y2Xcp92CKptgvKZ29fMLS6c7Y0e2COhh8M+2ALlc8WTF4FcAznsHK/BMZIDjbB7l2M5zEC54YmbMJSfNW5EAs7PrnSdOVdZBNOiLASc5YSa9z5aAdDrd0X2ud4kIY369CMtxKl2VUlZrv00WM9ODfHGBAMvfpvAs3lEakVLuBLKmAOdx4T4DN/3NjLflYxi8YZp/9p55KMBxC3eZMFPP+X2sSgOWNfqjMeADAU6+eJuZ79U28ydVKl9MpeTXg7LdB8i4q9OCxLxXH2b+sruLvml77PNhpfoHkM2vSSi4RCTA/M0wVP91eeljs0KHgExuZVgIYwWEGMC/Ua0OJazL71pZ3Qdk86v9xGIDQBxAGaSGE9fGX7YS+z7ILhZ7SfELAMcBVEjhij1lFqKIawB3bZuIzvo+YVipSfNRVHEdUNgmggdgKGUnpsYftgfQTUG7iEG4+6+RhhKWGe0aA8heIzHwXYAG7InRD5GMFEbSYGVhoM+WEa0cQLQeUwjRec4hRKeh+J1At6V5EK2mGqSi1dbDeugMlgDSONrAdKflYGl0YWbxSZdQagvAGWb+1TbAA9bH+wYYb/4Cxs8UGN18JtYAAAAASUVORK5CYII="
  178. alt="" /></a>
  179. <div id="m-toast-pop" class="m-toast-pop">
  180. <div class="m-toast-inner">
  181. <div class="m-toast-inner-text" id="m-toast-inner-text"></div>
  182. </div>
  183. </div>
  184. <div id="pop" class="pop-center">
  185. <div class="pop-content">
  186. <div class="pop-list">
  187. <!-- <div class="pop-list-item">福州市</div> -->
  188. </div>
  189. </div>
  190. </div>
  191. <div class="toast">
  192. </div>
  193. <div class="bg">
  194. <img class="title" src="https://t1-1305573081.file.myqcloud.com/test/adown/teacher.png">
  195. <div class="mid">
  196. <div class="form">
  197. <div style="font-size: 4vw;padding-top: 5.3vw;"><span style="color: #FE3B2B;">*</span>证件号码<span
  198. style="color: #FE3B2B;">(注意:英文要大写)</span></div>
  199. <input oninput="bindFormModel(this)" data-field="idcard" class="form-input" />
  200. <div style="font-size: 4vw;padding-top: 4vw;"><span style="color: #FE3B2B;">*</span>手机号码</div>
  201. <input oninput="bindFormModel(this)" data-field="phone" class="form-input" />
  202. <div style="font-size: 4vw;padding-top: 4vw;">
  203. <span style="color: #FE3B2B;">*</span>选择地市
  204. </div>
  205. <div onclick="showPop()" style="position: relative;">
  206. <img class="form-icon"
  207. src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuOTA3MzVlLTA2IDI0TDI0IDI0TDI0IC0zLjgxNDdlLTA2TC0xLjkwNzk4ZS0wNyAtMS43MTY1NWUtMDZMMS45MDczNWUtMDYgMjRaIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjAxIi8+CjxwYXRoIGQ9Ik0xMCA4TDE0IDEyTDEwIDE2IiBzdHJva2U9IiM5Nzk2OUYiIHN0cm9rZS13aWR0aD0iMS4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" />
  208. <input readonly class="form-input" />
  209. </div>
  210. <div onclick="studentSearch()" class="form-submit">查询</div>
  211. <div class="" style="height: 10.6vw;"></div>
  212. </div>
  213. <div class="res">
  214. <img class="res-title" src="https://t1-1305573081.file.myqcloud.com/test/adown/search_res2.png">
  215. <div class="res-err">
  216. <span style="color: red;">未查询到相关数据</span>
  217. </div>
  218. <div class="res-content">
  219. <div class="res-search">教练您好,您的教练管家信息如下:</div>
  220. <div> 帐号:<span class="res-search" style="color: red;"></span></div>
  221. <div>密码:<span class="res-search" style="color: red;"></span></div>
  222. <div>为了保证您的信息安全,请您妥善保管账号和密码,不将账号和密码告知他人!</div>
  223. </div>
  224. </div>
  225. <div style="height: 10vw;"></div>
  226. </div>
  227. <div id="banner_2_0"></div>
  228. <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  229. <script type="text/javascript">
  230. // 腾讯广告全局申明只需运行一次
  231. window.TencentGDT = window.TencentGDT || [];
  232. // 广告示例声明
  233. TencentGDT.push({
  234. app_id: '1205690058',
  235. placement_id: '9037822631845911', // 广告位id,请从联盟平台广告位获取
  236. type: 'native', // 广告类型
  237. display_type: 'banner', // 广告播放类型: banner广告
  238. carousel: 3000, // 轮播时间,> 3000数字类型,否则轮播会被取消
  239. containerid: 'banner_2_0', // 广告容器
  240. onComplete: function (res) {
  241. if (res.ret == 0) {
  242. console.log('广告播放成功');
  243. } else {
  244. console.log('广告播放失败', res);
  245. }
  246. }
  247. });
  248. // H5 SDK接入全局只需运行一次
  249. // (function () {
  250. // var doc = document,
  251. // h = doc.getElementsByTagName('head')[0],
  252. // s = doc.createElement('script');
  253. // s.async = true;
  254. // s.src = '//qzs.qq.com/qzone/biz/res/i.js';
  255. // h && h.insertBefore(s, h.firstChild);
  256. // })();
  257. </script>
  258. <script src="//qzs.gdtimg.com/union/res/union_sdk/page/h5_sdk/i.js"></script>
  259. <script>
  260. const formModel = {
  261. city: "",
  262. idcard: "",
  263. phone: ""
  264. }
  265. document.querySelector('.pop-list').addEventListener('click', function (e) {
  266. console.log(e)
  267. hidePop()
  268. formModel.city = e.target.dataset.index || ""
  269. document.querySelectorAll('.form-input')[2].value = e.target.innerText
  270. })
  271. $.ajax({
  272. url: "https://jsjp-admin1.zzxcx.net/jsjp-admin/open-api/gzpt/userInfo/type/coach_city"
  273. }).then(res => {
  274. res.data.forEach(element => {
  275. $('.pop-list').append(`<div class="pop-list-item" data-index=${element.dictValue}>${element.dictLabel}</div>`)
  276. });
  277. console.log(res)
  278. })
  279. function bindFormModel(e) {
  280. formModel[e.getAttribute("data-field")] = e.value
  281. console.log(formModel)
  282. }
  283. function showPop() {
  284. document.querySelector("#pop").style = "display:flex"
  285. }
  286. function hidePop() {
  287. document.querySelector("#pop").style = "display:none"
  288. }
  289. function studentSearch() {
  290. if (!formModel.idcard.match(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X)$)/)) {
  291. message('身份证格式错误')
  292. return
  293. }
  294. if (!formModel.phone.match(/^1[3-8][0-9]{9}$/)) {
  295. message('手机号码格式错误')
  296. return
  297. }
  298. if (formModel.city == '') {
  299. message('请选择地区')
  300. return
  301. }
  302. $.ajax({
  303. url: "https://jsjp-admin1.zzxcx.net/jsjp-admin/open-api/tms/coachInfo/getPasswordByCoachIdcard",
  304. method: 'get',
  305. data: formModel
  306. }).then(res => {
  307. if (res.data == null) {
  308. message('查询不到数据')
  309. document.querySelectorAll('.res-err')[0].style = 'display:block'
  310. document.querySelectorAll('.res-content')[0].style = 'display:none'
  311. return
  312. }
  313. document.querySelectorAll('.res-err')[0].style = 'display:none'
  314. document.querySelectorAll('.res-content')[0].style = 'display:block'
  315. document.querySelectorAll('.res-search')[0].innerText = res.data.name + '教练您好,您的教练管家信息如下:'
  316. document.querySelectorAll('.res-search')[1].innerText = res.data.idcard
  317. document.querySelectorAll('.res-search')[2].innerText = res.data.password
  318. })
  319. }
  320. function message(message) {
  321. $('#m-toast-inner-text').text(message);
  322. $('#m-toast-pop').fadeIn();
  323. setTimeout(function () {
  324. $('#m-toast-pop').fadeOut();
  325. }, 2500);
  326. }
  327. // message("****不能为空");
  328. </script>
  329. </body>
  330. </html>