Bez popisu

Invitation.html 6.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <!DOCTYPE html>
  2. <html>
  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,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <title>分享领红包</title>
  8. <link rel="stylesheet" type="text/css" href="public/public_css.css"/>
  9. <style type="text/css">
  10. body,html{font-size: 0.16rem;height: 100vh;}
  11. body, div, button, h3, h6, span, ul, li, p, a,input{font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; box-sizing: inherit; font-weight: normal;}
  12. .success{margin: auto;text-align: center;border-bottom:0.005rem solid #707070;}
  13. .success p:nth-child(1){font-size: 0.18rem;color: #FB3D38;padding-top: 0.86rem;padding-bottom: 0.145rem;}
  14. .success p:nth-child(2){font-size: 0.12rem;color: #FB3D38;padding-bottom: 0.655rem;}
  15. .success p:nth-child(4){font-size: 0.14rem;color: #666666;padding-top: 0.215rem;padding-bottom: 0.595rem;}
  16. #share{width: 0.94rem;height: 0.26rem;margin:auto;color:#FFF;font-size:0.15rem;line-height: 0.26rem;text-align:center;background:#FB3D38;border-radius:0.075rem;box-shadow:0.02rem 0.045rem 0.05rem rgba(143,141,141,0.22);}
  17. .download{}
  18. .download .tit{color:#3333333;font-size:0.18rem;text-align: center;padding-top: 0.62rem;padding-bottom: 0.455rem;}
  19. .download .leidou{padding-left: 0.16rem;padding-right: 0.15rem;}
  20. .download .leidou .liedouImg{width: 0.525rem;float: left;}
  21. .download .leidou .introduce{float: left;padding-left: 0.055rem;}
  22. .download .leidou .introduce span{width:1.36rem;font-size: 0.13rem;color: #333333;}
  23. .download .leidou .introduce img{width: 0.8rem;height: 0.195rem;padding-top: 0.06rem;padding-bottom: 0.1rem;}
  24. .download .leidou .down{float: right;width: 0.755rem;height: 0.23rem;color: #fff;font-size: 0.13rem;line-height: 0.24rem;margin-top: 0.28rem;text-align: center;background: #FB3D38;border-radius: 0.075rem;box-shadow: 0.02rem 0.045rem 0.05rem rgba(143,141,141,0.22);}
  25. .btom{clear: both;width: 100%;margin:auto;color:#FB3D38;font-size:0.14rem;text-align:center;padding-top: 0.5rem;padding-bottom: 0.56rem;}
  26. .shareMask{display: none;width: 100%;height: 100%;background: rgba(0,0,0,0.5036);position: absolute;top: 0;left: 0;}
  27. button{
  28. outline: none;
  29. }
  30. a, a:visited{
  31. text-decoration: none;
  32. }
  33. body{
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .shareMask{
  38. display: none;
  39. width: 100%;
  40. height: 100%;
  41. background: rgba(0,0,0,0.5036);
  42. position: absolute;
  43. top: 0;
  44. left: 0;
  45. }
  46. .weixin{
  47. position: fixed;
  48. bottom: 0;
  49. background: #ffffff;
  50. width: 100%;
  51. }
  52. .weixins{
  53. background: rgba(216,216,216,0.2);
  54. width: 100%;
  55. display: -webkit-flex;
  56. display: -webkit-box;
  57. display: -moz-box;
  58. display: -ms-flexbox;
  59. display: flex;
  60. justify-content: space-around;
  61. }
  62. .weixins div{
  63. text-align: center;
  64. }
  65. .weixins div img{
  66. display: block;
  67. width: 0.44rem;
  68. height: 0.44rem;
  69. margin: auto;
  70. margin-top: 0.22rem;
  71. margin-bottom: 0.12rem;
  72. }
  73. .weixins div span{
  74. font-size: 0.12rem;
  75. line-height: 0.17rem;
  76. color: #555555;
  77. margin-bottom: 0.16rem;
  78. display: inline-block;
  79. }
  80. .cancel{
  81. line-height: 0.4rem;
  82. font-size: 0.15rem;
  83. color: #555555;
  84. text-align: center;
  85. }
  86. </style>
  87. <script type="text/javascript">
  88. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  89. window.onresize = function(){
  90. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  91. }
  92. </script>
  93. </head>
  94. <body>
  95. <div class="success">
  96. <p>恭喜你,已复制淘口令</p>
  97. <p>请前往淘宝领取红包</p>
  98. <p id="share">分享</p>
  99. <p>分享给朋友,有奖一起分</p>
  100. </div>
  101. <div class="download">
  102. <p class="tit">获取更多大额红包,下载猎豆优选</p>
  103. <div class="leidou">
  104. <img src="images/liedou.png" class="liedouImg"/>
  105. <p class="introduce"><img src="images/logo.png" alt="" /><span>购物先领券,下单赚佣金</span></p>
  106. <a class="down" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon_liedou">下载APP</a>
  107. </div>
  108. </div>
  109. <div class="btom">在淘宝/天猫购物之前,先来“猎豆优选App”</div>
  110. <div class="shareMask">
  111. <div class="weixin">
  112. <div class="weixins">
  113. <div class="weixinShare" onclick="shareWeixin()">
  114. <img src="../H5/weixin.png" />
  115. <span>微信</span>
  116. </div>
  117. <div class="pengyouquan" onclick="sharePengyouquan()">
  118. <img src="../H5/weixinQuan.png"/>
  119. <span>朋友圈</span>
  120. </div>
  121. </div>
  122. <div class="cancel">取消分享</div>
  123. </div>
  124. </div>
  125. </body>
  126. </html>
  127. <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
  128. <script type="text/javascript">
  129. var userId = null;
  130. var activity_id = null;
  131. var share_code = null;
  132. var str=location.href; //取得整个地址栏
  133. var num=str.indexOf("?");
  134. str=str.substr(num+1); //str得到?之后的字符串
  135. var brr=str.split("&");
  136. for(var i = 0 ; i<brr.length; i++){
  137. if(brr[i].indexOf('userId') != -1){
  138. userId = brr[i].split('=')[1];//用户id
  139. localStorage.setItem('userId', userId);
  140. }
  141. if(brr[i].indexOf('activity_id') != -1){
  142. activity_id = brr[i].split('=')[1];//活动id
  143. localStorage.setItem('activity_id', activity_id);
  144. }
  145. if(brr[i].indexOf('share_code') != -1){
  146. share_code = brr[i].split('=')[1];
  147. }
  148. }
  149. $(".shareMask").click(function(e){
  150. $(".shareMask").css('display','none')
  151. })
  152. $(".weixins").click(function(e){
  153. e.preventDefault();
  154. return false
  155. })
  156. var jsons = {
  157. title:'@你,快来瓜分10000个红包!',
  158. desc:'福利放送!淘宝无门槛购物红包天天领!来看看你的手气~',
  159. url:'http://mzb.quyaqu.com/share/index.html?userId=' + userId
  160. };
  161. jsons = JSON.stringify(jsons);
  162. function shareWeixin () {
  163. if(navigator.userAgent.indexOf('Android') != -1){
  164. messageHandlers.shareWithWechatSession(jsons)
  165. }else{
  166. window.webkit.messageHandlers.shareWithWechatSession.postMessage(jsons)
  167. }
  168. }
  169. function sharePengyouquan () {
  170. if(navigator.userAgent.indexOf('Android') != -1){
  171. messageHandlers.shareWithWechatTimeline(jsons)
  172. }else{
  173. window.webkit.messageHandlers.shareWithWechatTimeline.postMessage(jsons)
  174. }
  175. }
  176. $("#share").click(function () {
  177. $(".shareMask").css('display','block')
  178. share();
  179. })
  180. $(".cancel").click(function () {
  181. $(".shareMask").css('display','none')
  182. })
  183. var num = 0;
  184. //分享
  185. function share() {
  186. $.ajax({
  187. type:"post",
  188. url:"/api/V2/share",
  189. data:{
  190. type:1,
  191. count: num
  192. },
  193. success: function (res) {
  194. var data =JSON.parse(res)
  195. num = data.res.count;
  196. }
  197. })
  198. }
  199. </script>