register.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>邀请注册</title>
  8. <script src="js/mui.min.js"></script>
  9. <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  10. <link href="css/mui.min.css" rel="stylesheet"/>
  11. <link rel="stylesheet" href="./css/register.css">
  12. </head>
  13. <body>
  14. <div class="title">欢迎来到橙π</div>
  15. <div class="content">
  16. <!-- <form action="" onsubmit="return checkForm()">-->
  17. <!-- 手机号 -->
  18. <div class="out-box phone">
  19. <div class="inner-box">
  20. <div class="icon">
  21. <img class="icon-img" src="./images/phone.png">
  22. </div>
  23. <div class="line"></div>
  24. <div class="input">
  25. <input id="phone" type="number" placeholder="请输入手机号码"/>
  26. </div>
  27. </div>
  28. </div>
  29. <!-- 验证码 -->
  30. <div class="out-box validcode">
  31. <div class="inner-box">
  32. <div class="icon">
  33. <img class="icon-img" src="./images/validcode.png">
  34. </div>
  35. <div class="line"></div>
  36. <div class="input">
  37. <input id="valid" type="number" placeholder="请输入验证码"/>
  38. <input type="hidden" id="code_verify">
  39. </div>
  40. <div class="btn-code" id="btn-code">获取验证码</div>
  41. </div>
  42. </div>
  43. <!-- 密码 -->
  44. <div class="out-box password">
  45. <div class="inner-box">
  46. <div class="icon">
  47. <img class="icon-img" src="./images/password.png">
  48. </div>
  49. <div class="line"></div>
  50. <div class="input">
  51. <input id="password" type="password" placeholder="请输入密码"/>
  52. </div>
  53. <div class="btn-password" id="btn-password">
  54. <img class="btn-password-img" src="./images/biyan.png" alt="">
  55. </div>
  56. </div>
  57. </div>
  58. <!-- 邀请码 -->
  59. <div class="out-box yaoqingma">
  60. <div class="inner-box">
  61. <div class="icon">
  62. <img class="icon-img" src="./images/email.png">
  63. </div>
  64. <div class="line"></div>
  65. <div class="input">
  66. <input id="ycode" type="text" placeholder="请输入邀请码"/>
  67. </div>
  68. </div>
  69. </div>
  70. <!-- 协议 -->
  71. <div class="protocol">
  72. <label class="checkbox">
  73. <span id="check1" class="chk" style="width: 0.56rem;
  74. height: 0.56rem;
  75. background-color: transparent;
  76. -webkit-appearance: none;
  77. border: 2px solid #979797;
  78. border-radius: 12px;
  79. outline: none;"></span>
  80. <img id="check2" class="icon-img" src="./images/check.png" style="width: 0.56rem; height: 0.56rem; display: none">
  81. </label>
  82. <p class="txt xiey">登录即表示同意<a href="javascript:void(0)">《用户协议》</a>和<a href="javascript:void(0)">《隐私协议》</a></p>
  83. </div>
  84. <!-- 提交 -->
  85. <input id="submit" type="submit" value="注册"/>
  86. <!-- </form>-->
  87. </div>
  88. <div class="Mask" style="display: none;">
  89. <div id="content">
  90. <p class="name">用户协议</p>
  91. <p class="neir"></p>
  92. <p class="btn">确定</p>
  93. </div>
  94. </div>
  95. <script type="text/javascript" charset="utf-8">
  96. mui.init();
  97. $(function (){
  98. open_app();
  99. })
  100. var yhxy = "";
  101. var ysxy = "";
  102. //协议
  103. $.ajax({
  104. url: 'https://app.orangepai.cn/api/login/xieyi?id=1&cont=1',
  105. type: 'get',
  106. data: {},
  107. dataType: 'json',
  108. success: function (res) {
  109. yhxy = res.data.content;
  110. //$('.neir').append(res.data.content);
  111. }
  112. })
  113. $.ajax({
  114. url: 'https://app.orangepai.cn/api/login/xieyi?id=2&cont=1',
  115. type: 'get',
  116. data: {},
  117. dataType: 'json',
  118. success: function (res) {
  119. ysxy = res.data.content;
  120. //$('.neir').append(res.data.content);
  121. }
  122. })
  123. //获取短信验证码
  124. var codeBtn = true, time = 120, timer;
  125. $("#btn-code").on("click", function () {
  126. if (codeBtn) {
  127. var tel = $("#phone").val();
  128. <!-- var pic=$("#pic").val(); -->
  129. if (tel.length != 11) {
  130. return mui.toast('手机号码格式不对!',{ duration:'long', type:'div' });
  131. }
  132. <!-- if(pic.length!=4){ -->
  133. <!-- return mui.toast('图片验证码错误!'); -->
  134. <!-- } -->
  135. codeBtn = false;
  136. $.ajax({
  137. type: "get",
  138. url: "https://app.orangepai.cn/api/sms/send",
  139. dataType: "JSON",
  140. data: {
  141. mobile: tel,
  142. event: 'login',
  143. },
  144. success: function (data) {
  145. if (data.verifyKey) {
  146. $('#code_verify').val(data.verifyKey)
  147. mui.toast('短信发送成功');
  148. $(".codeBtn").html(time + 's');
  149. timer = setInterval(function () {
  150. if (time > 0) {
  151. time--;
  152. $("#btn-code").html(time + 's');
  153. } else {
  154. clearInterval(timer);
  155. time = 120;
  156. codeBtn = true;
  157. $("#btn-code").html('重新获取');
  158. }
  159. }, 1000)
  160. } else {
  161. // $(".img").click();
  162. codeBtn = true;
  163. }
  164. }
  165. });
  166. }
  167. })
  168. //注册
  169. var regBtn = true, xieyBtn = false;
  170. $("#submit").on("click", function () {
  171. if (regBtn) {
  172. var tel = $("#phone").val();
  173. var msg = $("#valid").val();
  174. var pwd = $("#password").val();
  175. var ycode = $("#ycode").val();
  176. var verifyKey = $("#code_verify").val();
  177. if (tel.length != 11) {
  178. return mui.toast('手机号码格式不对!');
  179. }
  180. if (msg.length != 4) {
  181. return mui.toast('短信验证码错误!');
  182. }
  183. if (!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(pwd))) {
  184. return mui.toast('密码格式错误!');
  185. }
  186. if(verifyKey==''){
  187. return mui.toast('请发送短信验证码!');
  188. }
  189. if (!xieyBtn) {
  190. return mui.toast('请先勾选隐私协议');
  191. }
  192. regBtn = false;
  193. $.ajax({
  194. type: "POST",
  195. url: "https://app.orangepai.cn/api/login/reg_h5",
  196. dataType: "JSON",
  197. data: {
  198. mobile: tel,
  199. password: pwd,
  200. smsCode: msg,
  201. ycode: ycode,
  202. verifyKey: verifyKey
  203. },
  204. success: function (data) {
  205. mui.toast(data.message);
  206. if (data.code == 1) {
  207. setTimeout(function () {
  208. window.location.href = './download.html'
  209. }, 1000)
  210. } else {
  211. regBtn = true;
  212. }
  213. regBtn = true;
  214. }
  215. });
  216. }
  217. })
  218. //
  219. $(".xiey").on("click", function () {
  220. if (xieyBtn) {
  221. xieyBtn = false;
  222. $('#check1').show();
  223. $('#check2').hide();
  224. } else {
  225. xieyBtn = true;
  226. $('#check1').hide();
  227. $('#check2').show();
  228. }
  229. })
  230. //
  231. $(".checkbox").on("click", function () {
  232. if (xieyBtn) {
  233. xieyBtn = false;
  234. $('#check1').show();
  235. $('#check2').hide();
  236. } else {
  237. xieyBtn = true;
  238. $('#check1').hide();
  239. $('#check2').show();
  240. }
  241. })
  242. //打开协议
  243. $(".xiey a:first").on("click", function () {
  244. $('.neir').append(yhxy);
  245. $('.name').html("用户协议");
  246. $(".Mask").fadeIn(300);
  247. })
  248. $(".xiey a:last").on("click", function () {
  249. $('.neir').append(ysxy);
  250. $('.name').html("隐私协议");
  251. $(".Mask").fadeIn(300);
  252. })
  253. //关闭协议
  254. $(".btn").on("click", function () {
  255. $(".Mask").fadeOut(300);
  256. })
  257. //眼睛
  258. $("#btn-password").on("click", function () {
  259. if ($('#password').attr('type') == 'password') {
  260. $(this).children('img').attr('src', 'images/eye.png')
  261. $('#password').attr('type', 'text');
  262. } else {
  263. $(this).children('img').attr('src', 'images/biyan.png')
  264. $('#password').attr('type', 'password');
  265. }
  266. })
  267. function open_app(){
  268. var u = navigator.userAgent;
  269. var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
  270. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
  271. var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  272. // 微信内
  273. if (isWeixin) {
  274. alert('请在浏览器上打开')
  275. } else {
  276. //android端
  277. if (isAndroid) {
  278. //安卓app的scheme协议
  279. window.location.href = 'com.orange_road://';
  280. // setTimeout(function () {
  281. // let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
  282. // if (typeof hidden == "undefined" || hidden == false) {
  283. // //应用宝下载地址 (emmm 找不到淘宝应用宝的地址,这里放的是 lucky coffee 地址)
  284. // window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient";
  285. // }
  286. // }, 2000);
  287. }
  288. //ios端
  289. if (isIOS) {
  290. //ios的scheme协议
  291. window.location.href = 'com.orangeroad.app://'
  292. // setTimeout(function () {
  293. // let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
  294. // if (typeof hidden == "undefined" || hidden == false) {
  295. // //App store下载地址
  296. // window.location.href = "http://itunes.apple.com/app/id387682726";
  297. // }
  298. // }, 2000);
  299. }
  300. }
  301. }
  302. </script>
  303. </body>
  304. </html>
  305. <script type="text/javascript">
  306. $(function () {
  307. $('#ycode').val(getUrlParam('invoce'));
  308. });
  309. function getUrlParam(name) {
  310. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");//构造一个含有目标参数的正则表达式对象
  311. var r = window.location.search.substr(1).match(reg);//匹配目标参数
  312. if (r != null) return unescape(r[2]);
  313. return null;//返回参数值
  314. }
  315. </script>
  316. </body>
  317. </html>