mobile_login.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>众测服务平台</title>
  8. <meta name="keywords" content="" />
  9. <meta name="description" content="" />
  10. <link rel="stylesheet" type="text/css" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
  11. <link rel="stylesheet" type="text/css" th:href="@{/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">
  12. <link rel="stylesheet" type="text/css" th:href="@{/fonts/iconic/css/material-design-iconic-font.min.css}">
  13. <link rel="stylesheet" type="text/css" th:href="@{/css/util.css}">
  14. <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
  15. </head>
  16. <body>
  17. <div class="limiter">
  18. <div class="container-login100" th:style="'background-image:url(/images/bg.jpg);'">
  19. <div class="wrap-login100 p-l-40 p-r-40 p-t-30 p-b-25">
  20. <form th:action="@{/page/mobile/dologin}" method="post" class="login100-form validate-form">
  21. <div id="login-logo" style="text-align: center;">
  22. <img style="width: 80px;" th:src="@{/images/mooctest.png}" >
  23. </div>
  24. <span class="login100-form-title p-b-30">众测服务平台</span>
  25. <div class="wrap-input100 validate-input m-b-23" data-validate="请输入手机号">
  26. <span class="label-input100">手机号</span>
  27. <input id="mobile" class="input100" type="text" name="mobile" placeholder="请输入手机号" required="手机号不可为空">
  28. <span class="focus-input100" data-symbol="&#xf2c8;"></span>
  29. </div>
  30. <div class="wrap-input100 validate-input" data-validate="请输入验证码">
  31. <span class="label-input100">验证码</span>
  32. <input class="input100" type="text" name="verifyCode" placeholder="请输入验证码" required="验证码不可为空">
  33. <span class="focus-input100" data-symbol="&#xf190;"></span>
  34. </div>
  35. <div p-t-8 p-b-20>
  36. <div class="text-left">
  37. <a href="/page/login">账号登录</a>
  38. </div>
  39. <!--<div class="text-right" style="float: right;">-->
  40. <!--<span>&nbsp;&nbsp;</span>-->
  41. <!--</div>-->
  42. </div>
  43. <div class="text-center p-t-6 p-b-6">
  44. <span id="info" style="color: red" th:text="${result==null}?'&nbsp;':${result.msg}"></span>
  45. </div>
  46. <div class="container-login100-form-btn" style="width: 50%; float: left;">
  47. <div class="wrap-login100-form-btn">
  48. <div class="login100-form-bgbtn"></div>
  49. <button type="button" id="sendVerify" class="login100-form-btn" onclick="sendVerifyCode(this)" >获取验证码</button>
  50. </div>
  51. </div>
  52. <div class="container-login100-form-btn">
  53. <div class="wrap-login100-form-btn">
  54. <div class="login100-form-bgbtn"></div>
  55. <button class="login100-form-btn">登 录</button>
  56. </div>
  57. </div>
  58. <div class="txt1 text-center p-t-15 p-b-5">
  59. <span>第三方登录</span>
  60. </div>
  61. <div class="flex-c-m">
  62. <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx60f06d61f21804be&redirect_uri=http://www.mooctest.net/api/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect" target="_blank" class="login100-social-item bg1">
  63. <i class="fa fa-wechat"></i>
  64. </a>
  65. <a href="https://github.com/login/oauth/authorize?client_id=4e8e65b7e3bdeee9229b" class="login100-social-item bg2">
  66. <i class="fa fa-github"></i>
  67. </a>
  68. <!--<a href="#" class="login100-social-item bg3">-->
  69. <!--<i class="fa fa-weibo"></i>-->
  70. <!--</a>-->
  71. </div>
  72. <div class="flex-col-c p-t-10">
  73. <a href="/page/register" class="txt2">立即注册</a>
  74. </div>
  75. </form>
  76. </div>
  77. </div>
  78. </div>
  79. <script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
  80. <script th:src="@{/js/main.js}"></script>
  81. <script type="text/javascript">
  82. function sendVerifyCode(obj) {
  83. var mobile = $("#mobile").val();
  84. if (mobile == null || mobile.trim() == "") {
  85. document.getElementById("info").innerText = "手机号不能为空";
  86. return;
  87. }
  88. if (!mobile.match(/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/)){
  89. document.getElementById("info").innerText = "手机号格式不正确,请重新输入";
  90. return
  91. }
  92. var data = {"mobile":mobile};
  93. $.ajax({
  94. url:"/api/verify/mobile",
  95. type:"PUT",
  96. data:data,
  97. timeout: 3000,
  98. success:function (result) {
  99. console.log(result);
  100. if (result.status != 2000) {
  101. alert("发送失败, 原因:"+result.msg);
  102. document.getElementById("info").innerText = result.msg;
  103. }else{
  104. alert("发送成功,请尽快查收!");
  105. document.getElementById("info").innerHTML = "&nbsp;";
  106. settime(obj);
  107. }
  108. }
  109. })
  110. }
  111. </script>
  112. </body>
  113. </html>