login.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542
  1. /**
  2. * 登录相关js
  3. *
  4. * @author CaiAoLin
  5. * @date 2017/6/8
  6. * @version
  7. */
  8. $(document).ready(function () {
  9. let referer = scUrlUtil.GetQueryString('referer');
  10. // 载入时先获取相关参数
  11. // $.ajax({
  12. // url: '/captcha',
  13. // type: 'get',
  14. // data: '',
  15. // timeout: 5000,
  16. // error: function() {
  17. // $("#captcha-box").html('验证码加载失败');
  18. // },
  19. // beforeSend: function() {
  20. // $("#captcha-box").html('正在加载验证码');
  21. // },
  22. // success: function(response) {
  23. // $("#captcha-box").html('');
  24. // if (response.success === 0) {
  25. // alert('验证码初始化失败!');
  26. // return false;
  27. // }
  28. //
  29. // initGeetest({
  30. // // 以下配置参数来自服务端 SDK
  31. // gt: response.gt,
  32. // challenge: response.challenge,
  33. // offline: !response.success,
  34. // new_captcha: response.new_captcha,
  35. // width: '100%'
  36. // }, handler);
  37. // }
  38. // });
  39. // const handler = function(captchaObj) {
  40. // captchaObj.appendTo('#captcha-box');
  41. // captchaObj.onSuccess(function () {
  42. // $(".btn-area").slideDown("fast");
  43. // // $('#login').click();
  44. // // captchaObj.getValidate();
  45. // });
  46. $("#login").click(function () {
  47. if (!valid()) {
  48. return false;
  49. }
  50. if ($('#changeLogin').attr('data-status') === 'user') {
  51. let account = $("#inputEmail").val();
  52. if(/^1[3456789]\d{9}$/.test(account) || /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
  53. login();
  54. } else {
  55. $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
  56. }
  57. } else {
  58. let account = $("#mobileLogin").val();
  59. if(/^1[3456789]\d{9}$/.test(account)) {
  60. login();
  61. } else {
  62. $('#phoneHelp').text('您输入的 手机 格式不对');
  63. }
  64. }
  65. // let account = $("#inputEmail").val();
  66. // let pw = $("#inputPassword").val();
  67. // 判断输入的邮箱/手机是否格式正确
  68. // if(/^1[3456789]\d{9}$/.test(account) || /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
  69. // // 先判断是否是专业版用户,是的话弹出短信验证
  70. // $.ajax({
  71. // url: '/accountIsPro',
  72. // type: 'post',
  73. // async: true,
  74. // data: {"account": account, "pw": pw},
  75. // success: function (response) {
  76. // if (response.error === 0) {
  77. // const ispro = response.result;
  78. // if (!ispro) {
  79. // login(captchaObj);
  80. // } else {
  81. // $('#phonepass').modal('show');
  82. // $('#proMobile').val(response.data);
  83. // $('#pro_mobile').text(response.data.substr(0, 3) + '****' + response.data.substr(7, 11));
  84. // }
  85. // } else if(response.error === 2) {
  86. // $('#check_ssoId').val(response.ssoId);
  87. // $('#phone').modal('show');
  88. // } else {
  89. // let msg = response.msg !== undefined ? response.msg : '未知错误';
  90. // showError(msg, $("input"));
  91. // }
  92. // }
  93. // // });
  94. // } else {
  95. // $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
  96. // }
  97. });
  98. // $('#loginPro').click(function () {
  99. // if ($('#smsCode').val() === '') {
  100. // showValidError('请输入验证码',$('#smsCode'));
  101. // } else {
  102. // login(captchaObj);
  103. // }
  104. // });
  105. $('#check-code').click(function () {
  106. const mobile = $("#mobile").val();
  107. const ssoId = $("#check_ssoId").val();
  108. const code = $("#code").val();
  109. if(!validMobile(mobile)) {
  110. return false;
  111. }
  112. if(ssoId === undefined || ssoId === '') {
  113. showValidError('账号有误!', $('#code'));
  114. return false;
  115. }
  116. if($.trim(code) === '') {
  117. showValidError('验证码不能为空!', $('#code'));
  118. return false;
  119. }
  120. $.ajax({
  121. url: '/sms/mobile',
  122. type: 'post',
  123. data: {ssoId: ssoId, mobile: mobile, code: code},
  124. error: function() {
  125. showValidError('接口出错!',$('#code'));
  126. },
  127. beforeSend: function() {
  128. },
  129. success: function(response) {
  130. if (response.err === 0) {
  131. $("#login").click();
  132. $('#phone').modal('hide');
  133. } else {
  134. showValidError(response.msg,$('#code'));
  135. }
  136. }
  137. })
  138. });
  139. // };
  140. $("input").blur(function () {
  141. cleanError();
  142. cleanValidError($(this));
  143. });
  144. $('#inputEmail').blur(function () {
  145. let account = $("#inputEmail").val();
  146. if(!/^1[3456789]\d{9}$/.test(account) && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
  147. $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
  148. }
  149. });
  150. $(".form-control").on('input', function () {
  151. $('#hint').html(' ');
  152. });
  153. $("#get-code").click(function() {
  154. const mobile = $("#mobile").val();
  155. if(!validMobile(mobile)){
  156. return false;
  157. }
  158. const btn = $(this);
  159. if(!btn.hasClass('disabled')){
  160. $.ajax({
  161. url: '/sms/code',
  162. type: 'post',
  163. data: { mobile: mobile, type: 1},
  164. error: function() {
  165. showValidError('短信接口出错!',$('#mobile'));
  166. },
  167. beforeSend: function() {
  168. },
  169. success: function(response) {
  170. if (response.err === 0) {
  171. codeSuccess(btn);
  172. } else {
  173. showValidError(response.msg,$('#mobile'));
  174. }
  175. }
  176. });
  177. }
  178. });
  179. // 切换登录方式
  180. $('#changeLogin').click(function () {
  181. if ($(this).attr('data-status') === 'user') {
  182. $(this).attr('data-status', 'sms');
  183. $('.change-login-p').text('短信登录');
  184. $(this).text('账号登录');
  185. $('.sms-login-modal').show();
  186. $('.user-login-modal').hide();
  187. $('.sms-login-modal input').attr('disabled', false);
  188. $('.user-login-modal input').attr('disabled', true);
  189. } else {
  190. $(this).attr('data-status', 'user');
  191. $('.change-login-p').text('账号登录');
  192. $(this).text('短信登录');
  193. $('.sms-login-modal').hide();
  194. $('.user-login-modal').show();
  195. $('.sms-login-modal input').attr('disabled', true);
  196. $('.user-login-modal input').attr('disabled', false);
  197. }
  198. });
  199. // 切换到短信登录
  200. $('#changeSmsLogin').click(function () {
  201. $('#changeLogin').attr('data-status', 'sms');
  202. $('.change-login-p').text('短信登录');
  203. $('#changeLogin').text('账号登录');
  204. $('.sms-login-modal').show();
  205. $('.user-login-modal').hide();
  206. $('.sms-login-modal input').attr('disabled', false);
  207. $('.user-login-modal input').attr('disabled', true);
  208. $('#phonepass').modal('hide');
  209. });
  210. $("#get-code2").click(function() {
  211. const mobile = $("#mobileLogin").val();
  212. if(!validMobile(mobile, 0)){
  213. return false;
  214. }
  215. const btn = $(this);
  216. if(!btn.hasClass('disabled')){
  217. // 判断该手机号是否已注册通行账号
  218. // $.ajax({
  219. // url: '/sms/check/mobile',
  220. // type: 'post',
  221. // data: {mobile: mobile},
  222. // error: function() {
  223. // $('#phoneHelp').text('号码查询接口出错!');
  224. // },
  225. // beforeSend: function() {
  226. // },
  227. // success: function(response) {
  228. // if (response.err === 0) {
  229. $.ajax({
  230. url: '/sms/code',
  231. type: 'post',
  232. data: { mobile: mobile, type: 3},
  233. error: function() {
  234. $('#phoneHelp').text('短信接口出错!');
  235. },
  236. beforeSend: function() {
  237. },
  238. success: function(response) {
  239. if (response.err === 0) {
  240. codeSuccess(btn);
  241. } else {
  242. $('#phoneHelp').text(response.msg);
  243. }
  244. }
  245. });
  246. // } else {
  247. // $('#phoneHelp').text(response.msg);
  248. // }
  249. // }
  250. // })
  251. }
  252. });
  253. });
  254. function login() {
  255. $.ajax({
  256. url: '/captcha?t='+ (new Date()).getTime(),
  257. type: 'get',
  258. dataType: 'json',
  259. timeout: 5000,
  260. error: function() {
  261. // $("#captcha-box").html('验证码加载失败');
  262. },
  263. beforeSend: function() {
  264. // $("#captcha-box").html('正在加载验证码');
  265. },
  266. success: function(response) {
  267. $("#captcha-box").html('');
  268. if (response.success === 0) {
  269. alert('验证码初始化失败!');
  270. return false;
  271. }
  272. initGeetest({
  273. // 以下配置参数来自服务端 SDK
  274. gt: response.gt,
  275. challenge: response.challenge,
  276. offline: !response.success,
  277. new_captcha: response.new_captcha,
  278. // width: '100%',
  279. product: "bind"
  280. }, function (catpchaObj) {
  281. catpchaObj.onReady(function () {
  282. catpchaObj.verify();
  283. }).onClose(function () {
  284. }).onSuccess(function () {
  285. /* 延迟到动画结束后再alert */
  286. var lastUTC = new Date(), duration = 1100;
  287. function _alert(msg) {
  288. var elapsed = new Date() - lastUTC;
  289. if (elapsed >= duration) { return alert(msg) }
  290. setTimeout(function () { alert(msg) }, duration - elapsed);
  291. }
  292. var result = catpchaObj.getValidate();
  293. if (!result) {return alert('请完成验证');}
  294. $('#login').attr('disabled', true);
  295. let geetest_challenge = $('input[name="geetest_challenge"]').val();
  296. let geetest_validate = $('input[name="geetest_validate"]').val();
  297. let geetest_seccode = $('input[name="geetest_seccode"]').val();
  298. const postData = {
  299. geetest_challenge: geetest_challenge,
  300. geetest_validate: geetest_validate,
  301. geetest_seccode: geetest_seccode,
  302. };
  303. if ($('#changeLogin').attr('data-status') === 'user') {
  304. let account = $("#inputEmail").val();
  305. let pw = $("#inputPassword").val();
  306. postData.account = account;
  307. postData.pw = pw;
  308. } else {
  309. let mobile = $('#mobileLogin').val();
  310. let code = $("#codeLogin").val();
  311. postData.mobile = mobile;
  312. postData.code = code;
  313. }
  314. $.ajax({
  315. url: '/login',
  316. type: 'post',
  317. data: postData,
  318. success: function (response) {
  319. if (response.error === 0) {
  320. // $('#phonepass').modal('hide');
  321. const url = response.last_page !== null && response.last_page !== undefined && response.last_page !== '' ?
  322. response.last_page : '/pm';
  323. if (response.login_ask === 0) {
  324. location.href = url;
  325. } else {
  326. response.compilation_list = response.compilation_list === undefined || response.compilation_list === '' ?
  327. null : JSON.parse(response.compilation_list);
  328. if (response.compilation_list === null || response.compilation_list.length <= 0) {
  329. location.href = url;
  330. return false;
  331. }
  332. console.log(response.compilation_list);
  333. setVersion(response.compilation_list);
  334. $('#ver').modal('show');
  335. }
  336. } else if(response.error === 2) {
  337. // $('#phonepass').modal('hide');
  338. // captchaObj.reset();
  339. $('#check_ssoId').val(response.ssoId);
  340. $('#phone').modal('show');
  341. $('#login').removeAttr('disabled');
  342. } else if(response.error === 3) {
  343. // captchaObj.reset();
  344. $('#phonepass').modal('show');
  345. $('#mobileLogin').val(response.data);
  346. $('#login').removeAttr('disabled');
  347. } else {
  348. // $('#phonepass').modal('hide');
  349. let msg = response.msg !== undefined ? response.msg : '未知错误';
  350. showError(msg, $("input"));
  351. $('#login').removeAttr('disabled');
  352. // captchaObj.reset();
  353. }
  354. },
  355. error: function (result) {
  356. showError('内部程序错误', null);
  357. $('#login').removeAttr('disabled');
  358. }
  359. });
  360. })
  361. });
  362. }
  363. });
  364. }
  365. /**
  366. * 获取成功后的操作
  367. *
  368. * @param {Object} btn - 点击的按钮
  369. * @return {void}
  370. */
  371. function codeSuccess(btn) {
  372. let counter = 60;
  373. btn.removeClass('btn-primary').addClass('btn-outline-secondary disabled').text(counter + '秒 重新获取');
  374. btn.parents().siblings('div').children('input').removeAttr('readonly');
  375. const countDown = setInterval(function() {
  376. const countString = counter - 1 <= 0 ? '' : ' ' + (counter - 1) + '秒 ';
  377. // 倒数结束后
  378. if (countString === '') {
  379. clearInterval(countDown);
  380. btn.removeClass('btn-outline-secondary disabled').addClass('btn-primary').text('获取验证码');
  381. }
  382. const text = countString + '重新获取';
  383. btn.text(text);
  384. counter -= 1;
  385. }, 1000);
  386. }
  387. /**
  388. * 验证手机号是否正确
  389. *
  390. * @return {boolean}
  391. */
  392. function validMobile(mobile, status = 1) {
  393. let result = true;
  394. if($.trim(mobile) === ''){
  395. if (status === 1) {
  396. showValidError('手机号不能为空!',$('#mobile'));
  397. } else {
  398. $('#phoneHelp').text('手机号不能为空!');
  399. }
  400. return false;
  401. }
  402. let mobileValid = /^1[3456789]\d{9}$/;
  403. if(!mobileValid.test(mobile)){
  404. if (status === 1) {
  405. showValidError('手机号码格式有误!',$('#mobile'));
  406. } else {
  407. $('#phoneHelp').text('手机号码格式有误!');
  408. }
  409. return false;
  410. }
  411. return result;
  412. }
  413. /**
  414. * 提示验证信息错误
  415. *
  416. * @param {string} msg
  417. * @param {object} element
  418. * @return {void}
  419. */
  420. function showValidError(msg, element) {
  421. if (element !== null) {
  422. element.addClass('is-invalid');
  423. element.siblings().text(msg);
  424. }
  425. }
  426. /**
  427. * 清除验证信息错误提示
  428. *
  429. * @return {void}
  430. */
  431. function cleanValidError(element) {
  432. element.removeClass('is-invalid');
  433. element.siblings().text('');
  434. }
  435. /**
  436. * 验证数据
  437. *
  438. * @return {boolean}
  439. */
  440. function valid() {
  441. let result = true;
  442. if ($('#changeLogin').attr('data-status') === 'user') {
  443. let account = $("#inputEmail").val();
  444. if (account === undefined || account === '') {
  445. showError('用户名不能为空!', $("#inputEmail"));
  446. return false;
  447. }
  448. let password = $("#inputPassword").val();
  449. if (password === undefined || password === '') {
  450. showError('密码不能为空!', $("#inputPassword"));
  451. return false;
  452. }
  453. } else {
  454. let mobile = $('#mobileLogin').val();
  455. if (mobile === undefined || mobile === '') {
  456. showError('手机号码不能为空!', $("#mobileLogin"));
  457. return false;
  458. }
  459. let code = $('#codeLogin').val();
  460. if (code === undefined || code === '') {
  461. showError('验证码不能为空!', $("#codeLogin"));
  462. return false;
  463. }
  464. }
  465. return result;
  466. }
  467. /**
  468. * 提示错误
  469. *
  470. * @param {string} msg
  471. * @param {object} element
  472. * @return {void}
  473. */
  474. function showError(msg, element) {
  475. if (element !== null) {
  476. element.parent().addClass('has-danger');
  477. }
  478. $("#message").html(msg);
  479. $("#error-tips").show("fast");
  480. }
  481. /**
  482. * 清除错误提示
  483. *
  484. * @return {void}
  485. */
  486. function cleanError() {
  487. $("input").parent().removeClass('has-danger');
  488. $("#message").text('');
  489. $("#error-tips").hide("fast");
  490. }
  491. /**
  492. * 设置版本信息
  493. *
  494. * @param {Object} versionData
  495. * @return {void}
  496. */
  497. function setVersion(versionData) {
  498. let html = '';
  499. for (let version of versionData) {
  500. let description = version.description ? version.description : '介绍内容';
  501. let tmpHtml = '<div class="col-sm-6 mb-3">' +
  502. '<div class="card card-block">' +
  503. '<div class="card-body">' +
  504. '<h3 class="card-title">'+ version.name +'</h3>' +
  505. '<p class="card-text">' + description + '</p>' +
  506. '<a class="btn btn-primary" href="/boot/'+ version._id.toString() +'">开始使用</a>' +
  507. '</div>' +
  508. '</div>' +
  509. '</div>';
  510. html += tmpHtml;
  511. }
  512. $("#version-area").html(html);
  513. }