暫無描述

index.html 7.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"
  7. />
  8. <title>天猫女王节</title>
  9. <link rel="stylesheet" href="../common/reset.css">
  10. <script type="text/javascript">
  11. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + "px";
  12. window.onresize  =  function () {
  13. document.documentElement.style.fontSize  =  100  *  (document.documentElement.clientWidth / 375)  +  "px";
  14. }
  15. </script>
  16. <style>
  17. body {min-height: 100vh;background-image: url("https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/H5-liedou/newRedEnvelopes/queen.jpg");background-size: 100% 100%;position: relative;}
  18. .list {
  19. background-size: 100% 100%;
  20. width: 100%;
  21. padding: 0 .15rem;
  22. position: absolute;
  23. left: 50%;
  24. top: 85%;
  25. transform: translate(-50%,0);
  26. display: flex;
  27. justify-content: space-around;
  28. align-items: center;
  29. box-sizing: border-box;
  30. }
  31. .button {background-size: 100% 100%;width: 1.4rem;}
  32. #copy_1,#copy_2,#taokouling{position: absolute;left: -1000rem;}
  33. .mask {width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0,0,0,.6);display: none;}
  34. .toast {width: 3.11rem;height: 2rem;background: #fff;border-radius: .11rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;}
  35. .icon {display: inline-block;width: .85rem;height: .49rem;margin-top: .21rem;}
  36. p {font-size: .18rem;line-height: .25rem;color: #333333;margin-top: .14rem;margin-bottom: .18rem;font-weight: bold;}
  37. span {font-size: .14rem;line-height: .2rem;display: block;}
  38. .exit {width: .26rem;height: .37rem;position: absolute;right: .2rem;top: -.37rem;}
  39. .exit .img {width: .26rem;height: .26rem;background-image: url(./img/exit.png);background-size: 100% 100%;}
  40. .exit span {width: .01rem;height: .11rem;display: block;background: #fff;margin: auto;}
  41. .alert-info {position: fixed;top: 1.74rem;right: 0;left: 0;bottom: 0;text-align: center;z-index: 2;}
  42. .alert-info p {display: inline-block;height: 0.38rem;color: #fff;font-size: 0.14rem;line-height: 0.38rem;padding: 0 0.10rem;background-color: rgba(0, 0, 0, 0.7);border-radius: 5px;}
  43. </style>
  44. </head>
  45. <body>
  46. <input id="copy_1" type="text" readOnly="true" value=""/>
  47. <div id="copy_2"></div>
  48. <text id="taokouling"></text>
  49. <div class="list">
  50. <img class="button" onclick="toTaobao()" src="./img/button.png">
  51. <img class="button" onclick="copyPassword()" src="./img/share.png" alt="">
  52. </div>
  53. <div class="mask">
  54. <div class="toast">
  55. <div class="exit">
  56. <div class="img" onclick="exit()"></div>
  57. <span></span>
  58. </div>
  59. <img class="icon" src="./img/icon.png" alt="">
  60. <p>淘口令复制成功</p>
  61. <span>分享给好友领红包赚钱吧~</span>
  62. </div>
  63. </div>
  64. <div class="alert-info" style="display: none;">
  65. <!-- tip提示,3s后消失 -->
  66. <p></p>
  67. </div>
  68. <script src="../common/jquery-2.1.0.js"></script>
  69. <script>
  70. var token=''
  71. var tbUrl=''
  72. $().ready(function () {
  73. getToken()
  74. })
  75. // 获取token
  76. function getToken() {
  77. var param = {
  78. "js_callback" : "callbackLogin"
  79. };
  80. param = JSON.stringify(param)
  81. try {
  82. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  83. window.webkit.messageHandlers.app_h5_login.postMessage(param);
  84. }
  85. if (navigator.userAgent.match(/android/i)) {
  86. obj4H5.app_h5_login(param);
  87. }
  88. } catch (e) {
  89. // token='4f422467a11afa2cedaa593686f9b1d4257657'
  90. // todayTbkPassword()
  91. }
  92. }
  93. function callbackLogin(data) {//app token 回调
  94. var data = JSON.parse(data); //上线时添加
  95. token=data.token; //上线时添加
  96. if(token) {
  97. todayTbkPassword()
  98. }
  99. }
  100. //获取淘口令
  101. function todayTbkPassword(type) {
  102. if(token) {
  103. $.ajax({
  104. type: "post",
  105. url: "/api/v2/adzone/double12taoToken",
  106. typeData: 'json',
  107. headers:{
  108. token:token
  109. },
  110. success: function (res) {
  111. if (res && res.errno == 0) {
  112. var tkl=res.rst.data.wenan
  113. tbUrl=res.rst.data.m_url
  114. $("#taokouling").text(tkl);
  115. }else {
  116. showMsg(res.err)
  117. }
  118. }
  119. });
  120. }else {
  121. getToken();
  122. }
  123. }
  124. // 复制文字
  125. function copyPassword() {
  126. if(token) {
  127. var data = document.getElementById("taokouling").innerHTML;
  128. copy_2.innerHTML = data;
  129. copy_1.value = data;
  130. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  131. //区分iPhone设备
  132. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  133. var Url2 = document.getElementById("copy_2");//要复制文字的节点
  134. var range = document.createRange();
  135. // 选中需要复制的节点
  136. range.selectNode(Url2);
  137. // 执行选中元素
  138. window.getSelection().addRange(range);
  139. // 执行 copy 操作
  140. var successful = document.execCommand('copy');
  141. // 移除选中的元素
  142. window.getSelection().removeAllRanges();
  143. } else {
  144. var Url2 = document.getElementById("copy_1");//要复制文字的节点
  145. Url2.select(); // 选择对象
  146. document.execCommand("Copy"); // 执行浏览器复制命令
  147. }
  148. $(".mask").show()
  149. }else {
  150. getToken()
  151. }
  152. }
  153. // 打开淘宝
  154. function toTaobao() {
  155. if(token) {
  156. var param = {
  157. "taobaoUrl" : tbUrl,//淘宝链接
  158. }
  159. param = JSON.stringify(param)
  160. try {
  161. if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
  162. window.webkit.messageHandlers.app_h5_open_taobao_url.postMessage(param);
  163. }
  164. if(navigator.userAgent.match(/android/i)){
  165. obj4H5.app_h5_open_taobao_url(param);
  166. }
  167. } catch (error) {
  168. }
  169. }else {
  170. getToken()
  171. }
  172. }
  173. function exit(){
  174. $(".mask").hide();
  175. }
  176. function showMsg(msg) {
  177. //弹框
  178. var msgBox = document.getElementsByClassName('alert-info')[0];
  179. msgBox.children[0].innerText = msg;
  180. msgBox.style.display="block";
  181. setTimeout(function() {
  182. msgBox.style.display="none";
  183. }, 1500);
  184. }
  185. </script>
  186. </body>
  187. </html>