todayEnroll.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="content">
  3. <scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
  4. :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
  5. @refresherrestore="onRestore">
  6. <view class="census-box">
  7. <view class="census-text">{{censusInfo.time}}</view>
  8. <view class="census-text">新增学员:<text>{{censusInfo.newCount}}</text></view>
  9. </view>
  10. <u-card :show-head="false" :show-foot="false" margin="10px 15px" borderRadius="40" v-for="(item, index) in tableList"
  11. :key="index" class="card-box">
  12. <view slot="body" class="card-content">
  13. <view class="student-info">
  14. <view class="info-name">{{item.studentName}}</view>
  15. <view class="info-type" :class="item.status == 1 ? 'info-type-active' : ''">{{item.status == 0 ? '未报名' : '已报名'}}</view>
  16. <view class="info-name" style="clear: left;">{{item.parentName}}</view>
  17. <view class="info-phone">{{item.parentPhone}}</view>
  18. </view>
  19. <u-image width="28px" height="28px" :src="item.type == 1 ? iconPath1 : iconPath2"></u-image>
  20. </view>
  21. </u-card>
  22. <u-divider v-if="isOver" bg-color="transparent" :style="{paddingTop : tableList.length == 0 ? '10px' : ''}">没有更多了</u-divider>
  23. </scroll-view>
  24. <u-top-tips ref="uTips"></u-top-tips>
  25. </view>
  26. </template>
  27. <script>
  28. import {
  29. mapGetters
  30. } from 'vuex'
  31. const NET = require('@/utils/request')
  32. const API = require('@/config/api')
  33. export default {
  34. computed: {
  35. ...mapGetters([
  36. 'mainColor'
  37. ])
  38. },
  39. data() {
  40. return {
  41. censusInfo: {
  42. time: '',
  43. newCount: '',
  44. },
  45. iconPath1: API.getServerImg + 'weibaoming.png',
  46. iconPath2: API.getServerImg + 'xianshangkehu.png',
  47. triggered: false,
  48. isOver: false,
  49. pageIndex: 1,
  50. tableList: [],
  51. }
  52. },
  53. onLoad() {
  54. this.getCensusData()
  55. this.getTableList()
  56. },
  57. onReady() {},
  58. methods: {
  59. // 获取新增统计数据
  60. getCensusData() {
  61. NET.request(API.getCensusInfo, {}, 'POST').then(res => {
  62. this.censusInfo = res.data
  63. }).catch(error => {
  64. this.$refs.uTips.show({
  65. title: error.message,
  66. type: 'warning',
  67. })
  68. })
  69. },
  70. // 下拉刷新
  71. onRefresh() {
  72. this.triggered = true
  73. this.isOver = false
  74. this.pageIndex = 1
  75. this.tableList = []
  76. this.getTableList()
  77. this.getCensusData()
  78. },
  79. // 重置下拉刷新状态
  80. onRestore() {
  81. this.triggered = 'restore'
  82. this.triggered = false
  83. },
  84. // 懒加载
  85. handleLoadMore() {
  86. if (!this.isOver) {
  87. this.pageIndex++
  88. this.getTableList()
  89. }
  90. },
  91. // 获取列表数据
  92. getTableList() {
  93. NET.request(API.getCensusList, {
  94. page: this.pageIndex,
  95. size: 10,
  96. }, 'POST').then(res => {
  97. this.triggered = false
  98. this.tableList = this.tableList.concat(res.data.row)
  99. this.isOver = res.data.row.length != 10
  100. }).catch(error => {
  101. this.triggered = false
  102. this.$refs.uTips.show({
  103. title: error.message,
  104. type: 'warning',
  105. })
  106. })
  107. }
  108. },
  109. }
  110. </script>
  111. <style>
  112. page {
  113. width: 100%;
  114. height: 100%;
  115. background-color: #f7f7f7;
  116. }
  117. </style>
  118. <style lang="scss" scoped>
  119. @import "@/static/css/themes.scss";
  120. .content {
  121. width: 100%;
  122. float: left;
  123. .census-box {
  124. display: flex;
  125. padding: 5px 15px;
  126. background-color: #fff;
  127. .census-text {
  128. flex: 1;
  129. font-size: 12px;
  130. line-height: 20px;
  131. color: #999999;
  132. text-align: center;
  133. }
  134. text {
  135. color: $mainColor;
  136. }
  137. }
  138. .scroll-box {
  139. width: 100%;
  140. height: 100vh;
  141. .card-box {
  142. .card-content {
  143. display: flex;
  144. align-items: center;
  145. .student-info {
  146. flex: 1;
  147. .info-name {
  148. width: 64px;
  149. float: left;
  150. line-height: 28px;
  151. font-size: 14px;
  152. font-weight: bold;
  153. }
  154. .info-type {
  155. padding: 0 10px;
  156. margin-top: 3px;
  157. border-radius: 20px;
  158. float: left;
  159. line-height: 20px;
  160. font-size: 10px;
  161. color: #FFFFFF;
  162. background-color: #999999;
  163. }
  164. .info-type-active {
  165. background-color: $mainColor;
  166. }
  167. .info-phone {
  168. width: calc(100% - 64px);
  169. float: left;
  170. line-height: 28px;
  171. font-size: 12px;
  172. color: #999999;
  173. }
  174. }
  175. }
  176. }
  177. }
  178. }
  179. </style>