Geen omschrijving

Invitation.html 5.7KB

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