Ei kuvausta

InvitaionRecord.html 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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. </head>
  77. <body>
  78. <div class="recordEmpty">
  79. <img src="../H5/noFriend.png" />
  80. <p>您还没有邀请记录,赶紧邀请小伙伴一起记账吧~</p>
  81. </div>
  82. <div class="recordYes"></div>
  83. </body>
  84. </html>
  85. <script type="text/javascript" src="../jquery-2.1.0.js"></script>
  86. <script type="text/javascript">
  87. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  88. window.onresize = function(){
  89. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  90. }
  91. var arr = [];
  92. var userId = null;
  93. var activity_id = null;
  94. userId = JSON.parse(localStorage.getItem('userId'));
  95. activity_id = JSON.parse(localStorage.getItem('activity_id'));
  96. //页面加载,显示数据
  97. window.onload = function () {
  98. getInviteList()
  99. }
  100. function invitation () {
  101. var html = `<div class="header">
  102. <div>好友</div>
  103. <div>注册时间</div>
  104. <div>奖励</div>
  105. </div>`;
  106. //有邀请记录
  107. for( var i = 0 ; i < arr.length ; i++){
  108. html+=`<div class="friend">
  109. <div>${arr[i].mobile}</div>
  110. <div>${arr[i].created_at}</div>
  111. <div>+${arr[i].score}</div>
  112. </div>`;
  113. };
  114. $('.recordYes').html(html);
  115. }
  116. function getInviteList () {
  117. $.ajax({
  118. type:"post",
  119. url:"/api/V1/getInviteList",
  120. data:{
  121. activity_id:activity_id,
  122. user_id:userId
  123. },
  124. success: function (res) {
  125. if(JSON.parse(res).res == null){
  126. $(".recordEmpty").css('display','block');
  127. $(".recordYes").css("display","none");
  128. }else{
  129. $(".recordEmpty").css('display','none');
  130. $(".recordYes").css("display","block");
  131. arr = JSON.parse(res).res;
  132. invitation();
  133. }
  134. }
  135. });
  136. }
  137. </script>