exchangePhoneActivity.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  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/exchangePhoneActivity.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="time_lines">
  21. <img class="time_line" src="../static/img/exchangePhoneActivity/time_line_left.png">
  22. <div class="time-text">活动时间:2022年3月1日-3月31日</div>
  23. <img class="time_line" src="../static/img/exchangePhoneActivity/time_line_right.png">
  24. </div>
  25. <div class="logo-wrap">
  26. <img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
  27. </div>
  28. <div class="title-wrap">
  29. <img class="titles" src="../static/img/exchangePhoneActivity/title.png">
  30. </div>
  31. <div class="tip-wrap">
  32. <img class="tips" src="../static/img/exchangePhoneActivity/tips.png">
  33. </div>
  34. <div class="logo-wrap">
  35. <img class="logo" src="../static/img/exchangePhoneActivity/logo.png">
  36. </div>
  37. <img class="banner-img" src="../static/img/exchangePhoneActivity/banner.png">
  38. <div class="main-wrap">
  39. <div class="middle-wrap">
  40. <div class="ipt-row selectNode">
  41. <img class="img" src="../static/img/exchangePhoneActivity/custer.png">
  42. <input class="phone-ipt ipt select-ipt" value="某手指用户" disabled />
  43. <img class="right_icon" src="../static/img/exchangePhoneActivity/right_icon.png">
  44. <div class="select-wrap">
  45. <div class="select selected" data-index="1">某手指用户</div>
  46. <div class="select" data-index="2">新人福利</div>
  47. </div>
  48. </div>
  49. <div class="ipt-row">
  50. <img class="img" src="../static/img/exchangePhoneActivity/phone.png">
  51. <input class="phone-ipt ipt" type="number" placeholder="请输入11位手机号码" />
  52. </div>
  53. <div class="phone-tip">*请输入正确的手机号码</div>
  54. <div class="ipt-row">
  55. <img class="img" src="../static/img/exchangePhoneActivity/code.png">
  56. <input class="code-ipt ipt" type="number" placeholder="请输入验证码" />
  57. <div class="get-code">获取验证码</div>
  58. </div>
  59. <div class="code-tip">*请输入正确的验证码</div>
  60. <div class="btns">
  61. <img class="btn-img" src="../static/img/exchangePhoneActivity/btn.png">
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="bottom-wrap">
  67. <div class="procedure-wrap">
  68. <img class="procedure-img" src="../static/img/exchangePhoneActivity/procedure.png">
  69. </div>
  70. <div class="rule-wrap">
  71. <img class="rule-img" src="../static/img/exchangePhoneActivity/rule.png">
  72. <div class="rule-list">
  73. <div class="rule-point">1、本次活动奖励为赠送云机和折扣券,奖励内容为千人千面;</div>
  74. <div class="rule-point">2、折扣券为限时折扣券,请注意使用时间;</div>
  75. <div class="rule-point">3、折扣券适配全部机型,同一账号仅可获得一种类型礼包;</div>
  76. <div class="rule-point">4、所填写的手机号码,若未注册双子星将默认自动注册双子星账号。</div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="rule-mask">
  81. <div class="dialogs">
  82. <div class="rule-dialog-wrap">
  83. <div class="rule-title-wrap">
  84. <div class="rule-text">活动规则</div>
  85. <img class="rule-close" src="../static/img/exchangePhoneActivity/rule-close.png">
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. <div class="copy-mask">
  91. <div class="copy-dialog">
  92. <div class="imgs-block">
  93. <img class="imgs" src="../static/img/icon-copy.png" />
  94. <div class="imgs-text">注册成功</div>
  95. <img class="imgs" src="../static/img/icon-copy.png" />
  96. </div>
  97. <div class="copy-tip">温馨提示:激活码使用教程</div>
  98. <div class="point1">1、在双子星APP的工具栏,点击 <span class="my">[我的]</span></div>
  99. <img class="point-img" src="../static/img/point1.png" />
  100. <div class="point1 point2">2、找到 我的工具 - <span class="my">[激活码] </span>,点击激活码
  101. 即可兑换使用激活码啦。</div>
  102. <img class="point-img" src="../static/img/point2.png" />
  103. <div class="get-success-block">
  104. <div class="get-success">下载APP并复制激活码</div>
  105. </div>
  106. <img class="close" src="img/close.png" />
  107. </div>
  108. </div>
  109. <div class="ios-mask">
  110. <div class="ios-dialog">
  111. <div class="txt1">仅差一步领取成功<br />限时奖励等你来拿</div>
  112. <div class="ios-btnlist">
  113. <img class="btn2" onclick="copyIosUrl()" style="margin-right: 0.3rem;" src="../static/img/exchangePhoneActivity/btn2.png" alt="">
  114. <img class="btn3" onclick="copyCodeUrl()" src="../static/img/exchangePhoneActivity/btn3.png" alt="">
  115. </div>
  116. <img class="close1" src="img/close.png" />
  117. </div>
  118. </div>
  119. </div>
  120. <script>
  121. toastr.options.positionClass = 'toast-center-center';
  122. toastr.options.timeOut = '1500';
  123. </script>
  124. <script type="text/javascript">
  125. // var baseUrl = 'https://per.cs.se.androidscloud.com'
  126. let timer, flag = true;
  127. let time = 60, codeTimer = null, isStart = false, myCode = '';
  128. var url = window.location.href;
  129. url = url.split('/')
  130. var loc = window.location.search,
  131. n1 = loc.length,//地址的总长度
  132. n2 = loc.indexOf("="),//取得=号的位置
  133. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  134. u = navigator.userAgent,
  135. ua = navigator.userAgent.toLowerCase(),
  136. isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  137. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
  138. //点击获取验证码
  139. $('.get-code')[0].addEventListener('click',() => {
  140. if(isStart){
  141. return
  142. }
  143. let phone = $('.phone-ipt').eq(0).val();
  144. phone = phone.replace(/\s+/g,"");
  145. let phoneFlag = checkPhone();
  146. if(!phoneFlag || phone.length < 11){
  147. $('.phone-tip').eq(0).css('display', 'block');
  148. return false
  149. }
  150. getCode();
  151. },false);
  152. // 获取验证码接口
  153. function getCode() {
  154. let phone = $('.phone-ipt').eq(0).val();
  155. phone = phone.replace(/\s+/g,"");
  156. $.ajax({
  157. url: baseUrl + '/api/user/v1/phone/v_code/send',
  158. type: 'post',
  159. data: JSON.stringify({
  160. type: 'regist',
  161. phone: phone
  162. }),
  163. contentType: "application/json",
  164. dataType: 'json',
  165. cache: false,
  166. success: function (res) {
  167. if(res.status == 0){
  168. toastr.error(`验证码已发送`);
  169. isStart = true;
  170. $('.get-code').eq(0).text('60s');
  171. $('.get-code')[0].className = 'get-code get-code-active';
  172. codeTimer = setInterval(() => {
  173. time--;
  174. if(time > 0){
  175. $('.get-code').eq(0).text(`${time}s`);
  176. }else{
  177. isStart = false;
  178. time = 60;
  179. clearInterval(codeTimer);
  180. $('.get-code').eq(0).text('获取验证码');
  181. $('.get-code-active')[0].className = 'get-code';
  182. }
  183. }, 1000);
  184. }else{
  185. toastr.error(res.msg);
  186. }
  187. }
  188. });
  189. }
  190. //点击下拉框选择
  191. $('.selectNode')[0].addEventListener('click',(e) => {
  192. let index = e.target.dataset.index;
  193. let className = e.target.className;
  194. $('.select-wrap').eq(0).css('opacity', '1');
  195. if(className == 'select' || className == 'select selected'){
  196. if(index == 1){
  197. $('.select')[0].className = 'select selected';
  198. $('.select')[1].className = 'select';
  199. $('.select-ipt').eq(0).val('某手指用户');
  200. }else{
  201. $('.select')[0].className = 'select';
  202. $('.select')[1].className = 'select selected';
  203. $('.select-ipt').eq(0).val('新人福利');
  204. }
  205. $('.right_icon')[0].className = 'down_icon right_icon';
  206. $('.right_icon')[0].src = '../static/img/exchangePhoneActivity/right_icon.png';
  207. $('.select-wrap').eq(0).css('opacity', '0');
  208. } else {
  209. $('.right_icon')[0].src = '../static/img/exchangePhoneActivity/down_icon.png';
  210. $('.right_icon')[0].className = 'down_icon';
  211. }
  212. })
  213. //点击立即领取按钮
  214. $('.btns')[0].addEventListener('click',() => {
  215. let phone = $('.phone-ipt').eq(0).val();
  216. phone = phone.replace(/\s+/g,"");
  217. let code = $('.code-ipt').eq(0).val();
  218. code = code.replace(/\s+/g,"");
  219. let dataObj = {
  220. phone: phone,
  221. code: code
  222. }
  223. let phoneFlag = checkPhone();
  224. if(!phoneFlag || phone.length < 11){
  225. $('.phone-tip').eq(0).css('display', 'block');
  226. return false
  227. }
  228. let codeFlag = checkCode();
  229. if(!codeFlag){
  230. $('.code-tip').eq(0).css('display', 'block');
  231. return false
  232. }
  233. if(code.length < 6){
  234. $('.code-tip').eq(0).css('display', 'block');
  235. return false;
  236. }
  237. $.ajax({
  238. url: baseUrl + '/api/user/web/register/qqWallet',
  239. type: 'post',
  240. data: JSON.stringify(dataObj),
  241. contentType: "application/json",
  242. dataType: 'json',
  243. cache: false,
  244. success: function (res) {
  245. if(res.status == 0){
  246. myCode = res.data;
  247. $('.copy-dialog').animate({top: '1.8rem'},"fast");
  248. $('.copy-mask').show();
  249. document.documentElement.style.overflow='hidden';
  250. }else{
  251. toastr.error(res.msg);
  252. }
  253. }
  254. })
  255. },false);
  256. //点击下载APP并复制激活码
  257. $('.get-success-block')[0].addEventListener('click', (e) => {
  258. operate('QQQB_下载APP并复制激活码');
  259. if (isIOS) {
  260. $('.copy-dialog').animate({top: '-6.96rem'},"fast");
  261. $('.copy-mask').hide();
  262. $('.ios-dialog').animate({top: '5.75rem'},"fast");
  263. $('.ios-mask').show();
  264. } else {
  265. copyUrl();
  266. }
  267. });
  268. $('.phone-ipt')[0].oninput = checkPhone;
  269. function checkPhone(){
  270. let phone = $('.phone-ipt').eq(0).val();
  271. phone = phone.replace(/\s+/g,"");
  272. if(phone.length > 11){
  273. phone = phone.slice(0,11);
  274. $('.phone-ipt').eq(0).val(phone);
  275. }
  276. 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}$/;
  277. if(!phone){
  278. $('.phone-tip').eq(0).css('display', 'block');
  279. return false;
  280. }else if(!reg_tel.test(phone) && phone.length == 11){
  281. $('.phone-tip').eq(0).css('display', 'block');
  282. return false;
  283. }else{
  284. $('.phone-tip').eq(0).css('display', 'none');
  285. return true;
  286. }
  287. }
  288. $('.code-ipt')[0].oninput = checkCode;
  289. function checkCode(e){
  290. let code = $('.code-ipt').eq(0).val();
  291. code = code.replace(/\s+/g,"");
  292. if(code.length > 6){
  293. code = code.slice(0,6);
  294. $('.code-ipt').eq(0).val(code);
  295. }
  296. if(!code){
  297. $('.code-tip').eq(0).css('display', 'block');
  298. return false;
  299. }else{
  300. $('.code-tip').eq(0).css('display', 'none');
  301. return true;
  302. }
  303. }
  304. $('.phone-ipt')[0].addEventListener('blur',() => {
  305. let phone = $('.phone-ipt').eq(0).val();
  306. phone = phone.replace(/\s+/g,"");
  307. 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}$/;
  308. if(!reg_tel.test(phone)){
  309. $('.phone-tip').eq(0).css('display', 'block');
  310. }
  311. },false);
  312. $('.code-ipt')[0].addEventListener('blur',() => {
  313. let code = $('.code-ipt').eq(0).val();
  314. code = code.replace(/\s+/g,"");
  315. if(code.length < 6){
  316. $('.code-tip').eq(0).css('display', 'block');
  317. }
  318. },false);
  319. function download() {
  320. if (isAndroid) {
  321. if (baseUrl == 'https://per.cs.se.androidscloud.com') {
  322. window.location.href = 'http://per.cs.se.androidscloud.com:8888'
  323. } else {
  324. window.location.href = 'http://www.androidscloud.com?timestamp=' + Math.random();
  325. }
  326. } else if (isIOS) {
  327. document.location.href = 'https://www.pgyer.com/gemini6?timestamp=' + Math.random();
  328. } else {
  329. document.location.href = 'https://www.androidscloud.com?timestamp=' + Math.random();
  330. }
  331. }
  332. $('.close')[0].addEventListener('click', (e) => {
  333. $('.copy-dialog').animate({top: '-6.96rem'},"fast");
  334. $('.copy-mask').hide();
  335. document.documentElement.style.overflow='auto';
  336. });
  337. $('.close1')[0].addEventListener('click', (e) => {
  338. $('.ios-dialog').animate({top: '-6.96rem'},"fast");
  339. $('.ios-mask').hide();
  340. document.documentElement.style.overflow='auto';
  341. });
  342. //复制
  343. function copyUrl() {
  344. var oInput = document.createElement('input'); //创建一个input
  345. oInput.setAttribute("readonly", "readonly"); //设置只读,否则移动端使用复制功能时可能会造成软件盘弹出
  346. setTimeout(() => {
  347. oInput.value = myCode;
  348. // oInput.select(); // 选择对象 ios不支持
  349. document.body.appendChild(oInput)
  350. selectText(oInput, 0, oInput.value.length);
  351. document.execCommand("Copy"); // 执行浏览器复制命令
  352. toastr.error(`复制成功`);
  353. $('.copy-dialog').animate({top: '-6.96rem'},"fast");
  354. $('.copy-mask').hide();
  355. document.documentElement.style.overflow='auto';
  356. oInput.style.display = 'none'; // 将input隐藏
  357. oInput.blur();
  358. oInput.remove(); // 将input销毁
  359. setTimeout(() => {
  360. download();
  361. }, 1000)
  362. }, 400)
  363. }
  364. //复制
  365. function copyIosUrl() {
  366. var oInput = document.createElement('input'); //创建一个input
  367. oInput.setAttribute("readonly", "readonly"); //设置只读,否则移动端使用复制功能时可能会造成软件盘弹出
  368. setTimeout(() => {
  369. oInput.value = 'https://www.pgyer.com/gemini6';
  370. // oInput.select(); // 选择对象 ios不支持
  371. document.body.appendChild(oInput)
  372. selectText(oInput, 0, oInput.value.length);
  373. document.execCommand("Copy"); // 执行浏览器复制命令
  374. toastr.error(`复制成功`);
  375. // $('.ios-dialog').animate({top: '-6.96rem'},"fast");
  376. // $('.ios-mask').hide();
  377. document.documentElement.style.overflow='auto';
  378. oInput.style.display = 'none'; // 将input隐藏
  379. oInput.blur();
  380. oInput.remove(); // 将input销毁
  381. }, 400)
  382. }
  383. //复制
  384. function copyCodeUrl() {
  385. var oInput = document.createElement('input'); //创建一个input
  386. oInput.setAttribute("readonly", "readonly"); //设置只读,否则移动端使用复制功能时可能会造成软件盘弹出
  387. setTimeout(() => {
  388. oInput.value = myCode;
  389. // oInput.select(); // 选择对象 ios不支持
  390. document.body.appendChild(oInput)
  391. selectText(oInput, 0, oInput.value.length);
  392. document.execCommand("Copy"); // 执行浏览器复制命令
  393. toastr.error(`复制成功`);
  394. // $('.ios-dialog').animate({top: '-6.96rem'},"fast");
  395. // $('.ios-mask').hide();
  396. document.documentElement.style.overflow='auto';
  397. oInput.style.display = 'none'; // 将input隐藏
  398. oInput.blur();
  399. oInput.remove(); // 将input销毁
  400. }, 400)
  401. }
  402. // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
  403. // 选择文本。createTextRange(setSelectionRange)是input方法
  404. function selectText(textbox, startIndex, stopIndex) {
  405. if (textbox.createTextRange) {//ie
  406. const range = textbox.createTextRange();
  407. range.collapse(true);
  408. range.moveStart('character', startIndex);//起始光标
  409. range.moveEnd('character', stopIndex - startIndex);//结束光标
  410. range.select();//不兼容苹果
  411. } else {//firefox/chrome
  412. textbox.setSelectionRange(startIndex, stopIndex);
  413. textbox.focus();
  414. }
  415. }
  416. function operate(pointName) {
  417. $.ajax({
  418. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  419. type: 'post',
  420. data: JSON.stringify({
  421. pointName: pointName
  422. }),
  423. contentType: "application/json",
  424. dataType: 'json',
  425. cache: false,
  426. success: function (res) {},
  427. })
  428. }
  429. //防止提示一秒内重复显示
  430. function stopManyClick(fn) {
  431. if (flag) {
  432. fn();
  433. }
  434. flag = false;
  435. if (timer) { clearTimeout(timer); }
  436. timer = setTimeout(() => { flag = true }, 1500);
  437. }
  438. </script>
  439. </body>
  440. </html>