Sin descripción

InvitaionRecord.html 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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. }
  12. body, div, button, h3, h6, span, ul, li, p, a, input{
  13. font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
  14. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  15. padding: 0;
  16. margin: 0;
  17. box-sizing: inherit;
  18. font-weight: normal;
  19. }
  20. button{
  21. outline: none;
  22. }
  23. a, a:visited{
  24. text-decoration: none;
  25. }
  26. body{
  27. width: 100%;
  28. }
  29. .recordEmpty{
  30. padding-top: 1.13rem;
  31. display: none;
  32. }
  33. .recordEmpty img{
  34. width: 1.3rem;
  35. height: 1.14rem;
  36. display: block;
  37. margin: auto;
  38. }
  39. .recordEmpty p{
  40. color: #999999;
  41. font-size: 0.12rem;
  42. line-height: 0.17rem;
  43. margin-top: 0.41rem;
  44. text-align: center;
  45. }
  46. .header,.friend{
  47. width: 3.39rem;
  48. margin: auto;
  49. font-size: 0.14rem;
  50. color: #333333;
  51. white-space: nowrap;
  52. }
  53. .header{
  54. border-bottom: 0.01rem solid #D8D8D8;
  55. }
  56. .header div,.friend div{
  57. width: 33.3%;
  58. text-align: center;
  59. display: inline-block;
  60. }
  61. .header div{
  62. line-height: 0.5rem;
  63. font-weight: bold;
  64. }
  65. .friend{
  66. margin-top:0.28rem;
  67. }
  68. .friend:nth-of-type(1){
  69. margin-top: 0.24rem;
  70. }
  71. .friend div:nth-of-type(3){
  72. color: #FFC600;
  73. font-size: 0.2rem;
  74. }
  75. </style>
  76. <script>
  77. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  78. window.onresize = function(){
  79. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  80. }
  81. </script>
  82. </head>
  83. <body>
  84. <div class="recordEmpty">
  85. <img src="../H5/noFriend.png" />
  86. <p>您还没有邀请记录,赶紧邀请小伙伴一起记账吧~</p>
  87. </div>
  88. <div class="recordYes"></div>
  89. </body>
  90. </html>
  91. <script type="text/javascript" src="../jquery-2.1.0.js"></script>
  92. <script type="text/javascript">
  93. var arr = [];
  94. var userId = null;
  95. var activity_id = null;
  96. userId = JSON.parse(localStorage.getItem('userId'));
  97. activity_id = JSON.parse(localStorage.getItem('activity_id'));
  98. //页面加载,显示数据
  99. window.onload = function () {
  100. getInviteList()
  101. }
  102. function invitation () {
  103. var html = `<div class="header">
  104. <div>好友</div>
  105. <div>注册时间</div>
  106. <div>奖励</div>
  107. </div>`;
  108. //有邀请记录
  109. for( var i = 0 ; i < arr.length ; i++){
  110. html+=`<div class="friend">
  111. <div>${arr[i].mobile}</div>
  112. <div>${arr[i].created_at}</div>
  113. <div>+${arr[i].score}</div>
  114. </div>`;
  115. };
  116. $('.recordYes').html(html);
  117. }
  118. function getInviteList () {
  119. $.ajax({
  120. type:"post",
  121. url:"/api/V1/getInviteList",
  122. data:{
  123. activity_id:activity_id,
  124. user_id:userId
  125. },
  126. success: function (res) {
  127. if(JSON.parse(res).res == null){
  128. $(".recordEmpty").css('display','block');
  129. $(".recordYes").css("display","none");
  130. }else{
  131. $(".recordEmpty").css('display','none');
  132. $(".recordYes").css("display","block");
  133. arr = JSON.parse(res).res;
  134. invitation();
  135. }
  136. }
  137. });
  138. }
  139. </script>