zhongqiuActivity.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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>下载APP</title>
  7. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  8. <link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
  9. <link rel="stylesheet" href="../static/css/maJiaBaoGoApp.css">
  10. <script src="../static/js/vender/jquery-3.4.1.min.js"></script>
  11. <script src="../static/js/vender/toastr/toastr.min.js"></script>
  12. <script src="../static/js/vender/config.js"></script>
  13. <style>
  14. .middle{
  15. position: relative;
  16. width: 7.5rem;
  17. height: 33.33vh;
  18. }
  19. .btn-content {
  20. position: absolute;
  21. bottom: 8.6vh;
  22. left: 2.12rem;
  23. }
  24. .btn-active {
  25. position: absolute;
  26. bottom: 15vh;
  27. left: 2.12rem;
  28. }
  29. .download-app{
  30. width: 3.26rem;
  31. height: 0.88rem;
  32. }
  33. .imgs{
  34. width: 7.5rem;
  35. height: 33.38vh;
  36. margin-top: -0.05vh;
  37. display: block;
  38. }
  39. .img{
  40. width: 100%;
  41. height: 100%;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div class="container">
  47. <div class="middle">
  48. <div class="btn-content" id="js_btn">
  49. <img class="download-app" src="../static/img/zhongqiuActivity/btn.png" />
  50. </div>
  51. </div>
  52. <div class="mask">
  53. <div class="point">
  54. <img class="point-img" src="../static/img/point.png" />
  55. </div>
  56. </div>
  57. </div>
  58. <script>
  59. toastr.options.positionClass = 'toast-center-center';
  60. toastr.options.timeOut = '1500';
  61. </script>
  62. <script type="text/javascript">
  63. let timer,flag = true;
  64. var url = window.location.href;
  65. url = url.split('/')
  66. // var baseUrl = 'https://test.androidscloud.com/'
  67. var loc = window.location.search,
  68. n1 = loc.length,//地址的总长度
  69. n2 = loc.indexOf("="),//取得=号的位置
  70. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  71. u = navigator.userAgent,
  72. ua = navigator.userAgent.toLowerCase(),
  73. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  74. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
  75. imgs = ['../static/img/zhongqiuActivity/header.png','../static/img/zhongqiuActivity/middle.png','../static/img/zhongqiuActivity/footer.png'];
  76. //长屏判断
  77. if(document.documentElement.clientHeight > 736){
  78. imgs = ['../static/img/zhongqiuActivity/iphoneX01.png','../static/img/zhongqiuActivity/iphoneX02.png','../static/img/zhongqiuActivity/iphoneX03.png'];
  79. const btnContent = document.getElementsByClassName('btn-content')[0];
  80. btnContent.className = 'btn-active';
  81. }
  82. //异步加载图片
  83. async function loadAsync() {
  84. let promise = function(url) {
  85. return new Promise((resolve, reject) => {
  86. const image = new Image();
  87. image.src = url;
  88. image.className = 'imgs';
  89. image.onload = function() {
  90. if(image.src.includes('header.png') || image.src.includes('iphoneX01.png')){
  91. $('.container')[0].insertBefore(image, $('.middle')[0]);
  92. }else{
  93. $('.middle')[0].appendChild(image);
  94. }
  95. resolve('ok');
  96. }
  97. })
  98. }
  99. for(let url of imgs) {
  100. await promise(url);
  101. }
  102. }
  103. loadAsync();
  104. //埋点
  105. if(isAndroid){
  106. operate('中秋活动落地页');
  107. }
  108. if(isiOS){
  109. operate('中秋活动落地页');
  110. }
  111. function operate(pointName,type){
  112. $.ajax({
  113. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  114. type: 'post',
  115. data:JSON.stringify({
  116. pointName: pointName
  117. }),
  118. contentType:"application/json",
  119. dataType: 'json',
  120. cache: false,
  121. success: function (res) {
  122. if(isAndroid && type === 'click'){
  123. getAppDownload();
  124. }
  125. },
  126. })
  127. }
  128. //点击下载APP
  129. $('#js_btn')[0].addEventListener('click',()=>{
  130. if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ\/[0-9]/i)){
  131. $('.point').animate({top: '0.1rem'},"fast");
  132. $('.mask').css('background','rgba(0,0,0,0.7)');
  133. $('.mask').show();
  134. document.documentElement.style.overflow='hidden';
  135. }else if(isAndroid){
  136. operate('中秋活动落地页-安卓','click');
  137. }else if(isiOS){
  138. operate('中秋活动落地页-iOS');
  139. window.location.href = 'https://www.pgyer.com/gemini6';
  140. }else{
  141. operate('中秋活动落地页-安卓','click');
  142. }
  143. },false);
  144. //调用下载接口
  145. function getAppDownload(){
  146. $.ajax({
  147. url: baseUrl + '/api/user/v1/ditchClient/addChannelAppDownload',
  148. type: 'post',
  149. data:JSON.stringify({
  150. code:"j2Di592n8374",
  151. type: "5",
  152. platform:"1",
  153. version:""
  154. }),
  155. contentType: "application/json",
  156. dataType: 'json',
  157. cache: false,
  158. success: function (res) {
  159. if(res.status === 0){
  160. window.location.href = 'https://wjzx.androidscloud.com:9091/file-center/fileOperate/downloadFile?id=610553281';
  161. }else{
  162. stopManyClick(() =>{
  163. toastr.error(res.msg)
  164. })
  165. }
  166. },
  167. })
  168. }
  169. //防止提示一秒内重复显示
  170. function stopManyClick(fn) {
  171. if (flag) {
  172. fn();
  173. }
  174. flag = false;
  175. if(timer){clearTimeout(timer);}
  176. timer = setTimeout(() => {flag = true}, 1500);
  177. }
  178. </script>
  179. </body>
  180. </html>