暫無描述

Invitation.html 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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. <script>
  116. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  117. window.onresize = function(){
  118. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  119. }
  120. </script>
  121. </head>
  122. <body>
  123. <div class="bg">
  124. <button class="invitation"></button>
  125. <a class="invitationRecord" href="../InvitationRecord/InvitaionRecord.html">邀请记录 ></a>
  126. </div>
  127. <div class="shareMask">
  128. <div class="weixin">
  129. <div class="weixins">
  130. <div class="weixinShare" onclick="shareWeixin()">
  131. <img src="../H5/weixin.png" />
  132. <span>微信</span>
  133. </div>
  134. <div class="pengyouquan" onclick="sharePengyouquan()">
  135. <img src="../H5/weixinQuan.png"/>
  136. <span>朋友圈</span>
  137. </div>
  138. </div>
  139. <div class="cancel">取消分享</div>
  140. </div>
  141. </div>
  142. </body>
  143. </html>
  144. <script type="text/javascript" src="../jquery-2.1.0.js"></script>
  145. <script type="text/javascript">
  146. var userId = null;
  147. var activity_id = null;
  148. var share_code = null;
  149. var appName = "金牛记账";
  150. var str=location.href; //取得整个地址栏
  151. var num=str.indexOf("?");
  152. str=str.substr(num+1); //str得到?之后的字符串
  153. var brr=str.split("&");
  154. for(var i = 0 ; i<brr.length; i++){
  155. if(brr[i].indexOf('userId') != -1){
  156. userId = brr[i].split('=')[1];//用户id
  157. localStorage.setItem('userId', userId);
  158. }
  159. if(brr[i].indexOf('activity_id') != -1){
  160. activity_id = brr[i].split('=')[1];//活动id
  161. localStorage.setItem('activity_id', activity_id);
  162. }
  163. if(brr[i].indexOf('share_code') != -1){
  164. share_code = brr[i].split('=')[1];
  165. }
  166. if(brr[i].indexOf('appName') != -1){
  167. appName = brr[i].split('=')[1];
  168. appName = decodeURI(appName);
  169. }
  170. }
  171. $(".shareMask").click(function(e){
  172. $(".shareMask").css('display','none')
  173. })
  174. $(".weixins").click(function(e){
  175. e.preventDefault();
  176. return false
  177. })
  178. var jsons = {
  179. title:'金牛记账',
  180. desc:'每个月都不知道钱花哪里了?金牛记账一款能赚会省的记账软件,我只告诉你,快来和我一起记账吧!',
  181. url:BASEURL + '/register/register.html?share_code=' + share_code + '&appName=' + appName
  182. };
  183. if(appName == '钱多记账'){
  184. jsons = {
  185. title:'钱多记账',
  186. desc:'每个月都不知道钱花哪里了?钱多记账一款能赚会省的记账软件,我只告诉你,快来和我一起记账吧!',
  187. url:BASEURL + '/register/register.html?share_code=' + share_code + '&appName=' + appName
  188. };
  189. $(".bg").css({"background":"url(../H5/invitationBg_qd.png) no-repeat","background-size":"100%"})
  190. }
  191. jsons = JSON.stringify(jsons);
  192. function shareWeixin () {
  193. if(navigator.userAgent.indexOf('Android') != -1){
  194. messageHandlers.shareWithWechatSession(jsons)
  195. }else{
  196. window.webkit.messageHandlers.shareWithWechatSession.postMessage(jsons)
  197. }
  198. }
  199. function sharePengyouquan () {
  200. if(navigator.userAgent.indexOf('Android') != -1){
  201. messageHandlers.shareWithWechatTimeline(jsons)
  202. }else{
  203. window.webkit.messageHandlers.shareWithWechatTimeline.postMessage(jsons)
  204. }
  205. }
  206. $(".invitation").click(function () {
  207. $(".shareMask").css('display','block')
  208. })
  209. $(".cancel").click(function () {
  210. $(".shareMask").css('display','none')
  211. })
  212. </script>