index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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,maximum-scale=1.0,user-scalable=no"/>
  6. <meta name="misapplication-tap-highlight" content="no"/>
  7. <meta name="HandheldFriendly" content="true"/>
  8. <meta name="MobileOptimized" content="320"/>
  9. <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
  10. <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  11. </head>
  12. <body>
  13. <div class="container">
  14. <div class="loginTitle">欢迎注册喜嗨购</div>
  15. <div class="loginText">请认真填写个人信息</div>
  16. <div class="login-box">
  17. <div class="username">账号</div>
  18. <input class="input-box" type="email" id="phone" name="phone" placeholder="请输入手机号"/>
  19. </div>
  20. <div class="login-box">
  21. <div class="username">验证码</div>
  22. <div class="flex">
  23. <input class="input-box" style="width: 50%" id="code" type="number" name="code" placeholder="请输入验证码">
  24. <div class="code" id="daojishi" onclick="verification()">发送验证码</div>
  25. </div>
  26. </div>
  27. <div class="login-box">
  28. <div class="username">登录密码</div>
  29. <input class="input-box" id="loginPass" type="password" name="loginPass" placeholder="请输入登录密码">
  30. </div>
  31. <div class="login-box">
  32. <div class="username">邀请码</div>
  33. <input class="input-box" id="invitation" type="text" disabled="disabled" name="invitation" placeholder="请输入邀请码">
  34. </div>
  35. <div class="flex">
  36. <div class="login" onclick="fnLogin()">注册</div>
  37. <div class="login"><a href="{:url('down')}">下载APP</a></div>
  38. </div>
  39. </div>
  40. </body>
  41. <script type="text/javascript">
  42. var url = location.search;
  43. if (url.indexOf("?") != -1) {
  44. var str = url.substr(1);
  45. strs = str.split("=");
  46. var invitation = strs[1];
  47. document.getElementById('invitation').value = invitation;
  48. }
  49. function fnLogin() {
  50. var phone = document.getElementById("phone").value;
  51. var loginPass = document.getElementById("loginPass").value;
  52. var code = document.getElementById("code").value;
  53. var invitation = document.getElementById("invitation").value;
  54. var payment_pas = document.getElementById("payment_pas").value;
  55. if (phone == '') {
  56. window.alert("请输入账号");
  57. return false;
  58. }
  59. if (code == '') {
  60. window.alert("请输入验证码");
  61. return false;
  62. }
  63. if (loginPass == '') {
  64. window.alert("请输入登录密码");
  65. return false;
  66. }
  67. if (invitation == '') {
  68. window.alert("请输入邀请码");
  69. return false;
  70. }
  71. $.ajax({
  72. type: "post",
  73. url: "http://xhg.duolio.cn/api/register",
  74. data: {account: phone, captcha: code, password: loginPass, spread: invitation,payment_pas:payment_pas},
  75. dataType: "json",
  76. success: function (data) {
  77. window.alert(data.msg);
  78. if (data.msg === '注册成功')
  79. window.location.href = "{:url('down')}"
  80. }
  81. });
  82. }
  83. function verification() {
  84. var phone = document.getElementById("phone").value;
  85. if (phone == '') {
  86. window.alert("请输入手机号");
  87. return false;
  88. }
  89. if (!/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
  90. window.alert('请输入正确的手机号');
  91. return;
  92. }
  93. var timer = null;
  94. var count = 60;
  95. var codeText = $('#daojishi').text();
  96. if (codeText == '发送验证码') {
  97. timer = setInterval(function () {
  98. count--;
  99. $('#daojishi').text(count);
  100. if (count <= 0) {
  101. clearInterval(timer);
  102. $('#daojishi').text('发送验证码');
  103. }
  104. }, 1000);
  105. }
  106. if (codeText != '发送验证码') {
  107. return
  108. }
  109. $.ajax({
  110. type: "post",
  111. url: "http://xhg.duolio.cn/api/register/verify",
  112. data: {phone: phone, type: 'register'},
  113. dataType: "json",
  114. success: function (data) {
  115. window.alert(data.msg);
  116. }
  117. });
  118. }
  119. </script>
  120. <style type="text/css">
  121. * {
  122. margin: 0;
  123. padding: 0;
  124. font-family: 微软雅黑;
  125. font-size: 12px;
  126. min-height: 100%;
  127. }
  128. .container {
  129. padding: 10% 30px 0px 30px;
  130. }
  131. .loginTitle {
  132. font-weight: bold;
  133. color: #32baff;
  134. font-size: 29px;
  135. padding-bottom: 25px;
  136. }
  137. .loginText {
  138. font-weight: 500;
  139. color: #333333;
  140. font-size: 17px;
  141. margin-bottom: 15px;
  142. }
  143. .login-box {
  144. width: 100%;
  145. font-size: 16px;
  146. padding-top: 15px;
  147. }
  148. .username {
  149. display: block;
  150. padding-bottom: 12px;
  151. font-weight: 500;
  152. color: #333333;
  153. font-size: 16px;
  154. }
  155. .input-box {
  156. border: none;
  157. padding: 10px 8px;
  158. outline: none;
  159. width: 100%;
  160. background-color: #F5F5F5;
  161. border-radius: 9px;
  162. color: #32baff;
  163. }
  164. .input-box::placeholder {
  165. color: #bbbbbb;
  166. }
  167. .code {
  168. background-color: #32baff;
  169. border-radius: 5px;
  170. font-weight: 500;
  171. color: #FFFFFF;
  172. font-size: 13px;
  173. padding: 6px 8px;
  174. }
  175. .login {
  176. background-color: #32baff;
  177. color: #FFFFFF;
  178. text-align: center;
  179. width: 130px;
  180. line-height: 40px;
  181. border-radius: 25px;
  182. margin-top: 30px;
  183. }
  184. .login > a {
  185. color: #FFFFFF;
  186. text-decoration: none;
  187. }
  188. .flex {
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. }
  193. </style>
  194. </html>