extraLessonsList.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  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. <u-card :foot-border-top="false" padding="0" margin="10px" borderRadius="40" v-for="(item, index) in tableList" :key="index"
  7. class="card-container">
  8. <view class="card-content" slot="head" style="display: flex;">
  9. <view class="card-img">
  10. <u-avatar :src="item.url" size="100"></u-avatar>
  11. </view>
  12. <view>
  13. <view class="card-title">{{item.name}}</view>
  14. <view class="card-info-text">手机号:{{item.phone}}</view>
  15. <view class="card-info-text">地址:{{item.address}}</view>
  16. </view>
  17. </view>
  18. <view class="card-content" slot="body">
  19. <view class="card-info-text">{{item.remark}}</view>
  20. </view>
  21. <view class="card-content" slot="foot" style="padding-top: 0;">
  22. <view class="card-info-text" style="text-align: right;">{{item.time}}</view>
  23. </view>
  24. </u-card>
  25. <u-divider v-if="isOver" bg-color="transparent">没有更多了</u-divider>
  26. </scroll-view>
  27. <u-top-tips ref="uTips"></u-top-tips>
  28. </view>
  29. </template>
  30. <script>
  31. import {
  32. mapGetters
  33. } from 'vuex'
  34. const NET = require('@/utils/request')
  35. const API = require('@/config/api')
  36. export default {
  37. computed: {
  38. ...mapGetters([
  39. 'mainColor'
  40. ])
  41. },
  42. data() {
  43. return {
  44. triggered: false,
  45. isOver: false,
  46. pageIndex: 1,
  47. tableList: [],
  48. }
  49. },
  50. onLoad() {
  51. this.getTableList()
  52. },
  53. onReady() {},
  54. methods: {
  55. // 下拉刷新
  56. onRefresh() {
  57. this.triggered = true
  58. this.isOver = false
  59. this.pageIndex = 1
  60. this.tableList = []
  61. this.getTableList()
  62. },
  63. // 重置下拉刷新状态
  64. onRestore() {
  65. this.triggered = 'restore'
  66. this.triggered = false
  67. },
  68. // 懒加载
  69. handleLoadMore() {
  70. if (!this.isOver) {
  71. this.pageIndex++
  72. this.getTableList()
  73. }
  74. },
  75. // 获取列表数据
  76. getTableList() {
  77. NET.request(API.getExtraLessonsList, {
  78. page: this.pageIndex,
  79. size: 10,
  80. }, 'POST').then(res => {
  81. this.triggered = false
  82. this.tableList = this.tableList.concat(res.data.row)
  83. this.isOver = res.data.row.length != 10
  84. }).catch(error => {
  85. this.triggered = false
  86. this.$refs.uTips.show({
  87. title: error.message,
  88. type: 'warning',
  89. })
  90. })
  91. }
  92. },
  93. }
  94. </script>
  95. <style>
  96. page {
  97. width: 100%;
  98. height: 100%;
  99. background-color: #f7f7f7;
  100. }
  101. </style>
  102. <style lang="scss" scoped>
  103. @import "@/static/css/themes.scss";
  104. .content {
  105. width: 100%;
  106. float: left;
  107. .scroll-box {
  108. width: 100%;
  109. height: 100vh;
  110. box-sizing: border-box;
  111. padding-bottom: 10px;
  112. .card-container {
  113. .card-content {
  114. padding: 10px 15px;
  115. }
  116. .card-img {
  117. width: 50px;
  118. height: 50px;
  119. margin-right: 10px;
  120. display: flex;
  121. align-items: center;
  122. justify-content: center;
  123. }
  124. .card-title {
  125. font-size: 14px;
  126. line-height: 20px;
  127. }
  128. .card-info-text {
  129. color: #999999;
  130. }
  131. }
  132. }
  133. }
  134. </style>