sign_in_list.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}签到明细{/block}
  12. {block name="head_top"}
  13. <style>
  14. body {
  15. background: #f5f5f5;
  16. }
  17. .loading {
  18. font-size: .4rem;
  19. text-align: center;
  20. color: #999;
  21. }
  22. .loaded {
  23. font-size: .28rem;
  24. line-height: .72rem;
  25. text-align: center;
  26. color: #999;
  27. }
  28. .nothing {
  29. position: absolute;
  30. top: 30%;
  31. left: 50%;
  32. width: 4rem;
  33. height: 4rem;
  34. -webkit-transform: translate(-50%, -50%);
  35. transform: translate(-50%, -50%);
  36. }
  37. </style>
  38. {/block}
  39. {block name="content"}
  40. <div v-cloak id="app">
  41. <div class="sign-list">
  42. <div v-if="signList.length" class="list">
  43. <div v-for="(item, index) in signList" class="item">
  44. <div class="text">
  45. <div class="name">签到</div>
  46. <div class="time">{{ item.add_time }}</div>
  47. </div>
  48. <div class="num">+{{ item.number }}</div>
  49. </div>
  50. </div>
  51. <div v-show="loading" class="loading">
  52. <span class="fa fa-spinner"></span>
  53. </div>
  54. <div v-if="loadend && signList.length" class="loaded">{{loadTitle}}</div>
  55. <div v-if="!signList.length && !loading">
  56. <img class="nothing" src="/wap/first/zsff/images/no_data_available.png">
  57. </div>
  58. </div>
  59. <quick-menu></quick-menu>
  60. </div>
  61. <script>
  62. require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, $h, store) {
  63. var app = new Vue({
  64. el: '#app',
  65. data: {
  66. signList: [],
  67. limit: 20,
  68. page: 1,
  69. loadend: false,
  70. loading: false,
  71. loadTitle:''
  72. },
  73. computed: {
  74. },
  75. mounted: function () {
  76. this.$nextTick(function () {
  77. var that = this;
  78. that.getSignList();
  79. window.addEventListener('scroll', function () {
  80. var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
  81. scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight,
  82. scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  83. if (clientHeight + scrollTop >= scrollHeight) {
  84. that.getSignList();
  85. }
  86. });
  87. });
  88. },
  89. methods: {
  90. getSignList: function () {
  91. var that = this;
  92. if (this.loadend) return;
  93. if (this.loading) return;
  94. this.loading = true;
  95. store.baseGet($h.U({ c: 'auth_api', a: 'getUserSignList', p: { page: that.page, limit: that.limit } }), function (res) {
  96. var list = res.data.data;
  97. var signList = $h.SplitArray(list, that.signList);
  98. that.loading = false;
  99. that.loadend = list.length < that.limit;
  100. that.loadTitle = that.loadend ? '已全部加载' : '上拉加载更多';
  101. that.page = that.page + 1;
  102. that.$set(that, 'signList', signList);
  103. }, function (params) {
  104. that.loadTitle = '上拉加载更多';
  105. that.loading = false;
  106. });
  107. }
  108. }
  109. });
  110. });
  111. </script>
  112. {/block}