Nav apraksta

Invitation.html 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. <style type="text/css">
  9. body,html{
  10. font-size: 0.16rem;
  11. height: 100vh;
  12. }
  13. body, div, button, h3, h6, span, ul, li, p, a,input{
  14. font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
  15. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  16. padding: 0;
  17. margin: 0;
  18. box-sizing: inherit;
  19. font-weight: normal;
  20. }
  21. button{
  22. outline: none;
  23. }
  24. a, a:visited{
  25. text-decoration: none;
  26. }
  27. body{
  28. width: 100%;
  29. height: 100%;
  30. background: #FFFAE6;
  31. }
  32. .bg{
  33. background: url(../H5/invitationBg_jn.png) no-repeat;
  34. background-size: 100%;
  35. width: 100%;
  36. height: 100%;
  37. }
  38. .invitation{
  39. width: 2rem;
  40. height: 0.4rem;
  41. line-height: 0.4rem;
  42. text-align: center;
  43. background: url(../H5/recordBg.png) no-repeat;
  44. background-size: 100%;
  45. position: absolute;
  46. top: 2.67rem;
  47. left: 0;
  48. right: 0;
  49. margin: auto;
  50. border: none;
  51. border-radius: 0.2rem;
  52. }
  53. .invitationRecord{
  54. text-align: center;
  55. color: #333333;
  56. font-size: 0.12rem;
  57. line-height: 0.17rem;
  58. position: absolute;
  59. top: 3.22rem;
  60. left: 0;
  61. right: 0;
  62. margin: auto;
  63. }
  64. .shareMask{
  65. display: none;
  66. width: 100%;
  67. height: 100%;
  68. background: rgba(0,0,0,0.5036);
  69. position: absolute;
  70. top: 0;
  71. left: 0;
  72. }
  73. .weixin{
  74. position: fixed;
  75. bottom: 0;
  76. background: #ffffff;
  77. width: 100%;
  78. }
  79. .weixins{
  80. background: rgba(216,216,216,0.2);
  81. width: 100%;
  82. display: -webkit-flex;
  83. display: -webkit-box;
  84. display: -moz-box;
  85. display: -ms-flexbox;
  86. display: flex;
  87. justify-content: space-around;
  88. }
  89. .weixins div{
  90. text-align: center;
  91. }
  92. .weixins div img{
  93. display: block;
  94. width: 0.44rem;
  95. height: 0.44rem;
  96. margin: auto;
  97. margin-top: 0.22rem;
  98. margin-bottom: 0.12rem;
  99. }
  100. .weixins div span{
  101. font-size: 0.12rem;
  102. line-height: 0.17rem;
  103. color: #555555;
  104. margin-bottom: 0.16rem;
  105. display: inline-block;
  106. }
  107. .cancel{
  108. line-height: 0.4rem;
  109. font-size: 0.15rem;
  110. color: #555555;
  111. text-align: center;
  112. }
  113. </style>
  114. </head>
  115. <body>
  116. <div class="bg">
  117. <button class="invitation"></button>
  118. <a class="invitationRecord" href="../InvitationRecord/InvitaionRecord.html">邀请记录 ></a>
  119. </div>
  120. <div class="shareMask">
  121. <div class="weixin">
  122. <div class="weixins">
  123. <div class="weixinShare" onclick="shareWeixin()">
  124. <img src="../H5/weixin.png" />
  125. <span>微信</span>
  126. </div>
  127. <div class="pengyouquan" onclick="sharePengyouquan()">
  128. <img src="../H5/weixinQuan.png"/>
  129. <span>朋友圈</span>
  130. </div>
  131. </div>
  132. <div class="cancel">取消分享</div>
  133. </div>
  134. </div>
  135. </body>
  136. </html>
  137. <script type="text/javascript" src="../jquery-2.1.0.js"></script>
  138. <script type="text/javascript">
  139. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  140. window.onresize = function(){
  141. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  142. }
  143. var userId = null;
  144. var activity_id = null;
  145. var share_code = null;
  146. var appName = "金牛记账";
  147. var str=location.href; //取得整个地址栏
  148. var num=str.indexOf("?");
  149. str=str.substr(num+1); //str得到?之后的字符串
  150. var brr=str.split("&");
  151. for(var i = 0 ; i<brr.length; i++){
  152. if(brr[i].indexOf('userId') != -1){
  153. userId = brr[i].split('=')[1];//用户id
  154. localStorage.setItem('userId', userId);
  155. }
  156. if(brr[i].indexOf('activity_id') != -1){
  157. activity_id = brr[i].split('=')[1];//活动id
  158. localStorage.setItem('activity_id', activity_id);
  159. }
  160. if(brr[i].indexOf('share_code') != -1){
  161. share_code = brr[i].split('=')[1];
  162. }
  163. if(brr[i].indexOf('appName') != -1){
  164. appName = brr[i].split('=')[1];
  165. appName = decodeURI(appName);
  166. }
  167. }
  168. $(".shareMask").click(function(e){
  169. $(".shareMask").css('display','none')
  170. })
  171. $(".weixins").click(function(e){
  172. e.preventDefault();
  173. return false
  174. })
  175. var jsons = {
  176. title:'金牛记账',
  177. desc:'每个月都不知道钱花哪里了?金牛记账一款能赚会省的记账软件,我只告诉你,快来和我一起记账吧!',
  178. url:'http://bill.h5.726p.com/register/register.html?share_code=' + share_code + '&appName=' + appName
  179. };
  180. if(appName == '钱多记账'){
  181. jsons = {
  182. title:'钱多记账',
  183. desc:'每个月都不知道钱花哪里了?钱多记账一款能赚会省的记账软件,我只告诉你,快来和我一起记账吧!',
  184. url:'http://bill.h5.726p.com/register/register.html?share_code=' + share_code + '&appName=' + appName
  185. };
  186. $(".bg").css({"background":"url(../H5/invitationBg_qd.png) no-repeat","background-size":"100%"})
  187. }
  188. jsons = JSON.stringify(jsons);
  189. function shareWeixin () {
  190. if(navigator.userAgent.indexOf('Android') != -1){
  191. messageHandlers.shareWithWechatSession(jsons)
  192. }else{
  193. window.webkit.messageHandlers.shareWithWechatSession.postMessage(jsons)
  194. }
  195. }
  196. function sharePengyouquan () {
  197. if(navigator.userAgent.indexOf('Android') != -1){
  198. messageHandlers.shareWithWechatTimeline(jsons)
  199. }else{
  200. window.webkit.messageHandlers.shareWithWechatTimeline.postMessage(jsons)
  201. }
  202. }
  203. $(".invitation").click(function () {
  204. $(".shareMask").css('display','block')
  205. })
  206. $(".cancel").click(function () {
  207. $(".shareMask").css('display','none')
  208. })
  209. </script>