invite.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  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/changePhoneActivity.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. </head>
  14. <body>
  15. <div class="container">
  16. <div class="header">
  17. <img class="bg_img" src="../static/img/changePhoneActivity/bg.png" />
  18. <img class="share" src="../static/img/changePhoneActivity/share.png" />
  19. <img class="logo" src="../static/img/changePhoneActivity/logo.png" />
  20. <img class="theme" src="../static/img/changePhoneActivity/theme.png" />
  21. <img class="activity-bg" src="../static/img/changePhoneActivity/activity-bg.png" />
  22. <img class="time" src="../static/img/changePhoneActivity/time.png" />
  23. <div class="login-container">
  24. <img class="login-bg" src="../static/img/changePhoneActivity/login-bg.png" />
  25. <div class="login-row-select">
  26. <div class="login-row-title">选择:</div>
  27. <input class="login-row-ipt" id="select" placeholder="请选择兑换时长的平台" disabled="true" />
  28. <img class="icon-down-img" src="../static/img/changePhoneActivity/icon-down.png" />
  29. </div>
  30. <div class="options">
  31. <div class="icon-down-first">
  32. <img class="first" src="../static/img/changePhoneActivity/icon-down-first.png" />
  33. <span class="first-text">多多云</span>
  34. </div>
  35. <div class="icon-down-second">
  36. <img class="second" src="../static/img/changePhoneActivity/icon-down-second.png" />
  37. <span class="second-text">红手指</span>
  38. </div>
  39. </div>
  40. <div class="login-row-account">
  41. <div class="login-row-title">账号:</div>
  42. <input class="login-row-ipt" id="account" placeholder="请输入兑换时长的账号" />
  43. </div>
  44. <div class="login-row-password">
  45. <div class="login-row-title">密码:</div>
  46. <input class="login-row-ipt" type="password" id="password" placeholder="请输入兑换时长的密码" />
  47. </div>
  48. <img class="login-btn" src="../static/img/changePhoneActivity/login-btn.png" />
  49. <img class="login-btn-text" src="../static/img/changePhoneActivity/login-btn-text.png" />
  50. </div>
  51. <div class="read-rule">
  52. <img class="selected" src="../static/img/changePhoneActivity/selected.png" />
  53. <img class="no-selected" src="../static/img/changePhoneActivity/no-selected.png" />
  54. <img class="rule-text" src="../static/img/changePhoneActivity/rule-text.png" />
  55. </div>
  56. <div class="entry-QQ">
  57. <img class="entry-QQ-btn" src="../static/img/changePhoneActivity/entry-QQ-btn.png" />
  58. </div>
  59. </div>
  60. <div class="middle">
  61. <img class="middle_bg_img" src="../static/img/changePhoneActivity/middle_bg_img.png" />
  62. <div class="activity-rule">
  63. <img class="activity-rule-btn" src="../static/img/changePhoneActivity/activity-rule-btn.png" />
  64. <img class="activity-rule-text" src="../static/img/changePhoneActivity/activity-rule-text.png" />
  65. </div>
  66. <!-- <img class="rule1" src="../static/img/changePhoneActivity/rule1.png" />
  67. <img class="rule2" src="../static/img/changePhoneActivity/rule2.png" />
  68. <img class="rule3" src="../static/img/changePhoneActivity/rule3.png" /> -->
  69. </div>
  70. <div class="footer">
  71. <img class="footer_bg_img" src="../static/img/changePhoneActivity/footer_bg_img.png" />
  72. <img class="rule4" src="../static/img/changePhoneActivity/rule4.png" />
  73. </div>
  74. <div class="mask">
  75. <div class="dialog">
  76. <img class="dialog-bg" src="../static/img/changePhoneActivity/dialog.png" />
  77. <img class="title" src="../static/img/changePhoneActivity/title.png" />
  78. <img class="content" src="../static/img/changePhoneActivity/content.png" />
  79. <img class="register-btn" src="../static/img/changePhoneActivity/register-btn.png" />
  80. <img class="register-text" src="../static/img/changePhoneActivity/register-text.png" />
  81. </div>
  82. <div class="tip">
  83. <img class="tip-bg" src="../static/img/changePhoneActivity/tip-bg.png" />
  84. <div class="tip-title" id="tip-text"></div>
  85. <img class="sure-btn" src="../static/img/changePhoneActivity/sure-btn.png" />
  86. <img class="sure-text" src="../static/img/changePhoneActivity/sure-text.png" />
  87. </div>
  88. </div>
  89. <input type="text" style="opacity: 0;z-index: -10;position: fixed;" id="inviteCopy" value="">
  90. </div>
  91. <script>
  92. toastr.options.positionClass = 'toast-center-center';
  93. toastr.options.timeOut = '1500';
  94. </script>
  95. <script type="text/javascript">
  96. let timer,flag = true;
  97. let isShow = true;
  98. let fromType = 0,
  99. account = '',
  100. password = '';
  101. var url = window.location.href;
  102. url = url.split('/')
  103. // var baseUrl = 'http://192.168.31.198'
  104. var loc = window.location.search,
  105. n1 = loc.length,//地址的总长度
  106. n2 = loc.indexOf("="),//取得=号的位置
  107. id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
  108. u = navigator.userAgent,
  109. ua = navigator.userAgent.toLowerCase(),
  110. isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  111. isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
  112. imgs = [[1,'../static/img/changePhoneActivity/rule1.png'],[2,'../static/img/changePhoneActivity/rule2.png'],[3,'../static/img/changePhoneActivity/rule3.png']];
  113. //埋点
  114. operate('dt_yhs_活动页面浏览');
  115. function operate(pointName,type){
  116. $.ajax({
  117. url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
  118. type: 'post',
  119. data:JSON.stringify({
  120. pointName: pointName
  121. }),
  122. contentType:"application/json",
  123. dataType: 'json',
  124. cache: false,
  125. success: function (res) {
  126. if(type === 'click'){
  127. changePhone();
  128. }
  129. },
  130. })
  131. }
  132. //异步加载图片
  133. async function loadAsync() {
  134. let promise = function(index,url) {
  135. return new Promise((resolve, reject) => {
  136. const image = new Image();
  137. image.src = url;
  138. image.className = 'rule'+index;
  139. image.onload = function() {
  140. $('.middle')[0].appendChild(image);
  141. resolve('ok');
  142. }
  143. })
  144. }
  145. for(let [index,url] of imgs) {
  146. await promise(index,url);
  147. }
  148. }
  149. loadAsync();
  150. //点击分享
  151. $('.share')[0].addEventListener('click',()=>{
  152. if (isiOS) {
  153. try {
  154. getMessage();
  155. } catch (error) {
  156. console.log(error)
  157. }
  158. try {
  159. window.webkit.messageHandlers.getMessage.postMessage();
  160. } catch (error) {
  161. console.log(error)
  162. }
  163. }else if (isAndroid) {
  164. window.native.onClikWebView()
  165. }else{
  166. stopManyClick(() => {
  167. //加载数据
  168. var copyBefore = JSON.stringify(window.location.href);
  169. var copyUrl = copyBefore.split('"');
  170. $('#inviteCopy').val(copyUrl[1]);
  171. var input = document.getElementById("inviteCopy");
  172. // 选中文本
  173. input.select();
  174. // 执行浏览器复制命令
  175. document.execCommand("copy");
  176. toastr.error('复制成功当前网址成功!')
  177. })
  178. }
  179. },false);
  180. //点击选择框
  181. $('.login-row-select')[0].addEventListener('click',()=>{
  182. $('.options')[0].className = 'options show';
  183. },false);
  184. //点击多多云
  185. $('.icon-down-first')[0].addEventListener('click',()=>{
  186. $('.options')[0].className = 'options';
  187. $('#select').val('多多云');
  188. fromType = 1;
  189. },false);
  190. //点击红手指
  191. $('.icon-down-second')[0].addEventListener('click',()=>{
  192. $('.options')[0].className = 'options';
  193. $('#select').val('红手指');
  194. fromType = 2;
  195. },false);
  196. //点击协议
  197. $('.read-rule')[0].addEventListener('click',()=>{
  198. if(isShow){
  199. $('.selected')[0].className = 'selected hidden';
  200. $('.no-selected')[0].className = 'no-selected show';
  201. }else{
  202. $('.no-selected')[0].className = 'no-selected hidden';
  203. $('.selected')[0].className = 'selected show';
  204. }
  205. isShow = !isShow;
  206. },false);
  207. //点击提示弹窗确定
  208. $('.sure-btn')[0].addEventListener('click',handleClose,false);
  209. $('.sure-text')[0].addEventListener('click',handleClose,false);
  210. function handleClose() {
  211. $('.tip').animate({top: '-6.96rem'},"fast");
  212. $('.mask').hide();
  213. document.documentElement.style.overflow='auto';
  214. }
  215. //点击立即注册
  216. $('.register-text')[0].addEventListener('click',registerHandle,false);
  217. $('.register-btn')[0].addEventListener('click',registerHandle,false);
  218. function registerHandle(){
  219. $('.dialog').animate({top: '-6.96rem'},"fast");
  220. $('.mask').hide();
  221. document.documentElement.style.overflow='auto';
  222. window.location.href = 'http://www.androidscloud.com';
  223. }
  224. //点击免费换机按钮
  225. $('.login-btn-text')[0].addEventListener('click',changePhoneHandle,false);
  226. $('.login-btn')[0].addEventListener('click',changePhoneHandle,false);
  227. function changePhoneHandle(){
  228. account = $('#account').val();
  229. password = $('#password').val();
  230. if(fromType === 0){
  231. $('#tip-text').text('请选择兑换时长的平台');
  232. $('.tip').animate({top: '5.27rem'},"fast");
  233. $('.mask').show();
  234. document.documentElement.style.overflow='hidden';
  235. return
  236. }
  237. if(account === ''){
  238. $('#tip-text').text('请输入兑换时长的账号');
  239. $('.tip').animate({top: '5.27rem'},"fast");
  240. $('.mask').show();
  241. document.documentElement.style.overflow='hidden';
  242. return
  243. }
  244. if(password === ''){
  245. $('#tip-text').text('请输入兑换时长的密码');
  246. $('.tip').animate({top: '5.27rem'},"fast");
  247. $('.mask').show();
  248. document.documentElement.style.overflow='hidden';
  249. return
  250. }
  251. if(!isShow){
  252. $('#tip-text').text('请勾选阅读规则按钮');
  253. $('.tip').animate({top: '5.27rem'},"fast");
  254. $('.mask').show();
  255. document.documentElement.style.overflow='hidden';
  256. return
  257. }
  258. operate('dt_yhs_点击免费换机按钮','click');
  259. }
  260. //调用免费换机接口
  261. function changePhone(){
  262. let data = {
  263. inviteTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
  264. type: fromType,
  265. account: account,
  266. password: password
  267. }
  268. if(!id){
  269. delete data.inviteTime
  270. }
  271. let ajaxObj = {
  272. url: baseUrl + '/api/public/v1/activity/change/phone',
  273. type: 'post',
  274. headers: {
  275. 'Authorization': id //id
  276. },
  277. data:JSON.stringify(data),
  278. contentType: "application/json",
  279. dataType: 'json',
  280. cache: false,
  281. success: function (res) {
  282. if(res.status === 0){
  283. $('.dialog').animate({top: '4.2rem'},"fast");
  284. $('.mask').show();
  285. document.documentElement.style.overflow='hidden';
  286. }else{
  287. $('#tip-text').text(res.msg);
  288. $('.tip').animate({top: '5.27rem'},"fast");
  289. $('.mask').show();
  290. document.documentElement.style.overflow='hidden';
  291. }
  292. }
  293. }
  294. if(!id){
  295. delete ajaxObj.headers
  296. }
  297. $.ajax(ajaxObj)
  298. }
  299. //防止提示一秒内重复显示
  300. function stopManyClick(fn) {
  301. if (flag) {
  302. fn();
  303. }
  304. flag = false;
  305. if(timer){clearTimeout(timer);}
  306. timer = setTimeout(() => {flag = true}, 1500);
  307. }
  308. Date.prototype.Format = function (fmt) { // author: meizz
  309. var o = {
  310. "M+": this.getMonth() + 1, // 月份
  311. "d+": this.getDate(), // 日
  312. "h+": this.getHours(), // 小时
  313. "m+": this.getMinutes(), // 分
  314. "s+": this.getSeconds(), // 秒
  315. "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
  316. "S": this.getMilliseconds() // 毫秒
  317. };
  318. if (/(y+)/.test(fmt))
  319. fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  320. for (var k in o)
  321. if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
  322. return fmt;
  323. }
  324. </script>
  325. </body>
  326. </html>