signList.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="content">
  3. <u-subsection mode="subsection" :active-color="mainColor" :list="tabList" :current="current" @change="tabsChange"></u-subsection>
  4. <swiper :current="swiperCurrent" @animationfinish="animationfinish" class="swiper-box">
  5. <swiper-item class="swiper-item" v-for="(item, index1) in tabList" :key="index1">
  6. <scroll-view scroll-y class="scroll-box" @scrolltolower="handleLoadMore" :refresher-enabled="true"
  7. :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white" @refresherrefresh="onRefresh"
  8. @refresherrestore="onRestore">
  9. <u-card :head-border-bottom="false" :foot-border-top="false" padding="0px" margin="0" borderRadius="0" v-for="(site, index2) in item.tableList"
  10. :key="index2" class="class-card" @click="goToStudent(site)">
  11. <view class="class-content" slot="body">
  12. <view class="class-info-img">
  13. <u-avatar :src="site.url" size="100"></u-avatar>
  14. </view>
  15. <view class="class-info-text">{{site.name}}</view>
  16. <u-icon name="arrow-right" color="#aaaaaa" size="36"></u-icon>
  17. </view>
  18. </u-card>
  19. <u-divider v-if="item.isOver" bg-color="transparent">没有更多了</u-divider>
  20. </scroll-view>
  21. </swiper-item>
  22. </swiper>
  23. <u-top-tips ref="uTips"></u-top-tips>
  24. </view>
  25. </template>
  26. <script>
  27. import {
  28. mapGetters
  29. } from 'vuex'
  30. const NET = require('@/utils/request')
  31. const API = require('@/config/api')
  32. export default {
  33. computed: {
  34. ...mapGetters([
  35. 'mainColor',
  36. 'handleCustomStyle',
  37. 'handleDefaultCustomStyle',
  38. ])
  39. },
  40. data() {
  41. return {
  42. triggered: false,
  43. tabList: [{
  44. name: '5次未签到',
  45. isOver: false,
  46. pageIndex: 1,
  47. tableList: [],
  48. }, {
  49. name: '10次以上未签到',
  50. isOver: false,
  51. pageIndex: 1,
  52. tableList: [],
  53. }],
  54. current: 0,
  55. swiperCurrent: 0,
  56. }
  57. },
  58. onLoad() {
  59. this.getTableList(0)
  60. this.getTableList(1)
  61. },
  62. onReady() {},
  63. methods: {
  64. // tab页面切换
  65. tabsChange(index) {
  66. this.swiperCurrent = index;
  67. },
  68. // swiper滑动结束,分别设置tabs和swiper的状态
  69. animationfinish(e) {
  70. let current = e.detail.current;
  71. this.swiperCurrent = current;
  72. this.current = current;
  73. },
  74. // 下拉刷新
  75. onRefresh() {
  76. if (!this.triggered) {
  77. this.triggered = true
  78. this.tabList[this.current].isOver = false
  79. this.tabList[this.current].pageIndex = 1
  80. this.tabList[this.current].tableList = []
  81. this.getTableList(this.current, 'refresh')
  82. }
  83. },
  84. // 重置下拉刷新状态
  85. onRestore() {
  86. this.triggered = 'restore'
  87. this.triggered = false
  88. },
  89. // 懒加载
  90. handleLoadMore() {
  91. if (!this.tabList[this.current].isOver) {
  92. this.tabList[this.current].pageIndex++
  93. this.getTableList(this.current)
  94. }
  95. },
  96. // 获取列表数据
  97. getTableList(index, refresh) {
  98. NET.request(API.getSignList, {
  99. type: index,
  100. page: this.tabList[index].pageIndex,
  101. size: 10,
  102. }, 'POST').then(res => {
  103. this.triggered = false
  104. this.tabList[index].tableList = this.tabList[index].tableList.concat(res.data.row)
  105. this.tabList[index].isOver = res.data.row.length != 10
  106. }).catch(error => {
  107. this.triggered = false
  108. this.$refs.uTips.show({
  109. title: error.message,
  110. type: 'warning',
  111. })
  112. })
  113. },
  114. // 跳转学生详情
  115. goToStudent(site) {
  116. uni.navigateTo({
  117. url: '/pagesMain/studentInfo?type=3&id=' + site.id
  118. });
  119. }
  120. },
  121. }
  122. </script>
  123. <style>
  124. page {
  125. width: 100%;
  126. height: 100%;
  127. background-color: #f7f7f7;
  128. }
  129. </style>
  130. <style lang="scss" scoped>
  131. @import "@/static/css/themes.scss";
  132. .content {
  133. width: 100%;
  134. float: left;
  135. .swiper-box {
  136. height: calc(100vh - 34px);
  137. .swiper-item {
  138. height: calc(100vh - 34px);
  139. .scroll-box {
  140. width: 100%;
  141. height: calc(100vh - 34px);
  142. box-sizing: border-box;
  143. padding-bottom: 10px;
  144. .class-card {
  145. border-bottom: 1px solid #cccccc;
  146. .class-content {
  147. padding: 5px 15px;
  148. display: flex;
  149. align-items: center;
  150. .class-info-img {
  151. width: 50px;
  152. height: 50px;
  153. margin-right: 5px;
  154. display: flex;
  155. align-items: center;
  156. justify-content: center;
  157. }
  158. .class-info-text {
  159. line-height: 20px;
  160. font-size: 14px;
  161. flex: 1;
  162. }
  163. }
  164. }
  165. .class-card:last-child {
  166. border-bottom: none;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. </style>