qqActivity.html 16 KB

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