yunActivity.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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=0">
  6. <title>落地页活动</title>
  7. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  8. <link rel="stylesheet" href="../static/js/vender/bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
  10. <link rel="stylesheet" href="../static/css/yunActivity.css">
  11. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  12. <script src="../static/js/vender/toastr/toastr.min.js"></script>
  13. <script src="../static/js/vender/config.js"></script>
  14. <script src="../static/js/vender/crypto-js.js"></script>
  15. <script src="../static/js/vender/ase.js"></script>
  16. </head>
  17. <body>
  18. <div class="containers">
  19. <div class="banner-wrap">
  20. <div class="img-title">
  21. <img class="banner-img" src="../static/img/yunActivity/title.png">
  22. </div>
  23. <div class="img-middle">
  24. <img class="time-img" src="../static/img/yunActivity/time.png">
  25. </div>
  26. <div class="img-bottom">
  27. <img class="game-img" src="../static/img/yunActivity/banner.png">
  28. </div>
  29. </div>
  30. <div class="receive-code">
  31. <div class="take-phone">
  32. 领取云机激活码
  33. </div>
  34. <div class="send-phone">
  35. <img class="img-code" src="../static/img/yunActivity/phone.png">
  36. <input class="phone-ipt ipt" type="number" placeholder="请输入手机号" />
  37. </div>
  38. <div class="phone-tip">手机号码不正确,请重新输入!</div>
  39. <div class="ipt-row">
  40. <img class="img-code" src="../static/img/yunActivity/code.png">
  41. <input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
  42. <div class="get-code">获取验证码</div>
  43. </div>
  44. <div class="code-tip">请输入正确的验证码</div>
  45. <div class="donwlond-receive">
  46. <!-- <img class="btn-img" src="../static/img/yunActivity/takedowlond.png"> -->
  47. <div class="btn-receive">
  48. 立即领取
  49. </div>
  50. </div>
  51. </div>
  52. <div class="direction">
  53. <p>用绑定手机号打开双子星云手机APP,</p>
  54. <p>登录并进入<b>“我的-我的工具-激活码”</b>兑换使用</p>
  55. </div>
  56. <div class="copy-mask">
  57. <div class="copy-dialog">
  58. <div class="dialog-title">
  59. 恭喜新人专享激活码
  60. </div>
  61. <div class="free-try">
  62. 云手机3天套餐免费用
  63. </div>
  64. <!-- <div class="activation-code">
  65. </div> -->
  66. <div class="copy-code">
  67. <img class="donwlond-code" onclick="copyCodeUrl()" src="../static/img/yunActivity/btn.png">
  68. </div>
  69. <div class="take-code">进入<b>“我的-我的工具-激活码”</b>兑换使用</div>
  70. </div>
  71. <img class="close" src="../static/img/yunActivity/close.png" />
  72. </div>
  73. </div>
  74. <script>
  75. toastr.options.positionClass = 'toast-center-center';
  76. toastr.options.timeOut = '1500';
  77. </script>
  78. <script type="text/javascript">
  79. let timer, flag = true;
  80. let time = 60, codeTimer = null, isStart = false, myCode = '';
  81. var url = window.location.href;
  82. url = url.split('/')
  83. var loc = window.location.search,
  84. n1 = loc.length,//地址的总长度
  85. n2 = loc.indexOf("="),//取得=号的位置
  86. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  87. u = navigator.userAgent,
  88. ua = navigator.userAgent.toLowerCase(),
  89. isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  90. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  91. // 点击立即领取按钮
  92. $('.btn-receive')[0].addEventListener('click',() => {
  93. let phone = $('.phone-ipt').eq(0).val();
  94. phone = phone.replace(/\s+/g,"");
  95. let code = $('.code-ipt').eq(0).val();
  96. code = code.replace(/\s+/g,"");
  97. let phoneFlag = checkPhone()
  98. if(!phoneFlag || phone.length < 11) {
  99. $('.phone-tip').eq(0).css('display','block');
  100. return false
  101. }
  102. let codeFlag = checkCode();
  103. if(!codeFlag){
  104. $('.code-tip').eq(0).css('display', 'block');
  105. return false
  106. }
  107. if(code.length < 6){
  108. $('.code-tip').eq(0).css('display', 'block');
  109. return false;
  110. }
  111. let dataObj = {
  112. phone: phone,
  113. code: code
  114. }
  115. $.ajax({
  116. // url: baseUrl + '/api/user/web/register/qqWallet',
  117. url: baseUrl + '/api/user/web/register/qqWallet', // 地址
  118. type: 'post',
  119. data: JSON.stringify(dataObj),
  120. contentType: "application/json",
  121. dataType: 'json',
  122. cache: false,
  123. success: function (res) {
  124. if(res.status == 0){
  125. myCode = res.data;
  126. // $('.copy-dialog').animate({top: '1.8rem'},"fast");
  127. $('.copy-dialog').show()
  128. $('.copy-mask').show();
  129. $('.close').show()
  130. document.documentElement.style.overflow='hidden';
  131. }else{
  132. toastr.error(res.msg);
  133. }
  134. }
  135. })
  136. },false)
  137. // 点击关闭按钮
  138. $('.close')[0].addEventListener('click',() =>{
  139. $('.copy-mask').hide();
  140. });
  141. // 点击获取验证码
  142. $('.get-code')[0].addEventListener('click',() => {
  143. if(isStart){
  144. return
  145. }
  146. let phone = $('.phone-ipt').eq(0).val();
  147. phone = phone.replace(/\s+/g,"");
  148. let phoneFlag = checkPhone();
  149. if(!phoneFlag || phone.length < 11){
  150. $('.phone-tip').eq(0).css('display', 'block');
  151. return false
  152. }
  153. getCode();
  154. },false);
  155. // 获取验证码接口
  156. function getCode() {
  157. let phone = $('.phone-ipt').eq(0).val();
  158. phone = phone.replace(/\s+/g,"");
  159. $.ajax({
  160. url: baseUrl + '/api/user/v1/phone/v_code/send',
  161. type: 'post',
  162. data: JSON.stringify({
  163. type: 'regist',
  164. phone: phone
  165. }),
  166. contentType: "application/json",
  167. dataType: 'json',
  168. cache:false,
  169. success: function (res) {
  170. if(res.status == 0) {
  171. toastr.error(`验证码已发送`);
  172. isStart = true;
  173. $('.get-code').eq(0).text('60s');
  174. $('.get-code')[0].className = 'get-code get-code-active';
  175. codeTimer = setInterval(() => {
  176. time--;
  177. if(time > 0){
  178. $('.get-code').eq(0).text(`${time}s`);
  179. }else{
  180. isStart = false;
  181. time = 60;
  182. clearInterval(codeTimer);
  183. $('.get-code').eq(0).text('获取验证码');
  184. $('.get-code-active')[0].className = 'get-code';
  185. }
  186. }, 1000);
  187. }else{
  188. toastr.error(res.msg)
  189. }
  190. }
  191. })
  192. }
  193. // 手机号提示校验
  194. $('.phone-ipt')[0].oninput = checkPhone;
  195. function checkPhone(){
  196. let phone = $('.phone-ipt').eq(0).val();
  197. phone = phone.replace(/\s+/g,"");
  198. if(phone.length > 11){
  199. phone = phone.slice(0,11);
  200. $('.phone-ipt').eq(0).val(phone);
  201. }
  202. let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  203. if(!phone){
  204. $('.phone-tip').eq(0).css('display', 'block');
  205. return false;
  206. }else if(!reg_tel.test(phone) && phone.length == 11){
  207. $('.phone-tip').eq(0).css('display', 'block');
  208. return false;
  209. }else{
  210. $('.phone-tip').eq(0).css('display', 'none');
  211. return true;
  212. }
  213. }
  214. $('.phone-ipt')[0].addEventListener('blur',() => {
  215. let phone = $('.phone-ipt').eq(0).val();
  216. phone = phone.replace(/\s+/g,"");
  217. let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  218. if(!reg_tel.test(phone)){
  219. $('.phone-tip').eq(0).css('display', 'block');
  220. }
  221. // if(phone == '') {
  222. // $('.phone-tip').eq(0).css('display', 'none');
  223. // }
  224. if(phone !== '') {
  225. $(".btn-dowlond").attr({"style":"background: #E85A4B;"});
  226. }else{
  227. $(".btn-dowlond").attr({"style":"background: linear-gradient(0deg, #E85A4B 1%, #EF9878 99%);"});
  228. $('.phone-tip').eq(0).css('display', 'none');
  229. }
  230. },false);
  231. // 验证码提示校验
  232. $('.code-ipt')[0].oninput = checkCode;
  233. function checkCode() {
  234. let code = $('.code-ipt').eq(0).val();
  235. code = code.replace(/\s+/g,"");
  236. if(code.length > 6){
  237. code = code.slice(0,6);
  238. $('.code-ipt').eq(0).val(code);
  239. }
  240. if(!code){
  241. $('.code-tip').eq(0).css('display', 'block');
  242. return false;
  243. }else{
  244. $('.code-tip').eq(0).css('display', 'none');
  245. return true;
  246. }
  247. if(code == '') {
  248. $('.code-tip').eq(0).css('display', 'none');
  249. }
  250. }
  251. $('.code-ipt')[0].addEventListener('blur',() => {
  252. let code = $('.code-ipt').eq(0).val();
  253. code = code.replace(/\s+/g,"");
  254. if(code.length < 6){
  255. $('.code-tip').eq(0).css('display', 'block');
  256. }
  257. },false);
  258. function download() {
  259. if (isAndroid) {
  260. if (baseUrl == 'https://prese.phone.androidscloud.com') {
  261. window.location.href = 'http://prese.phone.androidscloud.com:8888'
  262. } else {
  263. window.location.href = 'http://www.androidscloud.com?timestamp=' + Math.random();
  264. }
  265. } else if (isIOS) {
  266. document.location.href = 'https://www.pgyer.com/gemini6?timestamp=' + Math.random();
  267. } else {
  268. document.location.href = 'https://www.androidscloud.com?timestamp=' + Math.random();
  269. }
  270. }
  271. // 复制
  272. function copyCodeUrl() {
  273. var oInput = document.createElement('input'); // 创建一个input
  274. oInput.setAttribute("readonly", "readonly"); // 设置只读
  275. setTimeout(() => {
  276. oInput.value = myCode;
  277. // oInput.select(); // 选择对象 ios不支持
  278. document.body.appendChild(oInput)
  279. selectText(oInput, 0, oInput.value.length);
  280. document.execCommand("Copy"); // 执行浏览器复制命令
  281. toastr.error(`复制成功`);
  282. // $('.copy-dialog').animate({top: '-6.96rem'},"fast");
  283. $('.copy-mask').hide();
  284. document.documentElement.style.overflow='auto';
  285. oInput.style.display = 'none'; // 将input隐藏
  286. oInput.blur();
  287. oInput.remove(); // 将input销毁
  288. setTimeout(() => {
  289. download();
  290. }, 1000)
  291. }, 400)
  292. }
  293. $('.copy-code')[0].addEventListener('click', (e) => {
  294. // operate('QQQB_下载APP并复制激活码');
  295. // if (isIOS) {
  296. // // $('.copy-dialog').animate({top: '-6.96rem'},"fast");
  297. // $('.copy-mask').hide();
  298. // // $('.ios-dialog').animate({top: '5.75rem'},"fast");
  299. // // $('.ios-mask').show();
  300. // } else {
  301. // copyUrl();
  302. // }
  303. copyUrl();
  304. });
  305. </script>
  306. </body>
  307. </html>