index.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <template>
  2. <view class="file-info-container">
  3. <view class="u-page">
  4. <u-list
  5. @scrolltolower="scrolltolower"
  6. >
  7. <u-list-item
  8. v-for="(item, index) in indexList"
  9. :key="index"
  10. >
  11. <view class="file-info-item">
  12. <view class="file-info-item-img">
  13. <image :src="getImageUrl(ICON_CFG.file_icon)" mode="aspectFill" />
  14. </view>
  15. <view class="file-info-item-content">
  16. <view class="file-info-item-title">{{ item.title }}</view>
  17. <view class="file-info-item-date">{{ item.date }}</view>
  18. </view>
  19. </view>
  20. </u-list-item>
  21. </u-list>
  22. <u-loadmore :status="loadStatus" />
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import { fetchFileList } from '@/common/api';
  28. import { ICON_CFG } from '@/common/EnumConst';
  29. import { getImageUrl } from '@/util';
  30. let page = 1;
  31. export default {
  32. name: 'content',
  33. props: {},
  34. data() {
  35. return {
  36. ICON_CFG,
  37. indexList: [],
  38. loadStatus: 'loadmore', // loadmore,loading,nomore
  39. };
  40. },
  41. created() {
  42. },
  43. onLoad() {
  44. this.loadmore();
  45. },
  46. methods: {
  47. getImageUrl,
  48. scrolltolower() {
  49. this.loadmore();
  50. },
  51. loadmore() {
  52. this.loadStatus = 'loading';
  53. fetchFileList({
  54. pageNum: page,
  55. pageSize: 10,
  56. fileType: 1,
  57. }).then(res => {
  58. page += 1;
  59. if (res.rows.length > 0) {
  60. this.indexList = this.indexList.concat(res.rows.map(item => {
  61. return {
  62. id: item.id,
  63. title: item.fileName,
  64. date: item.createTime,
  65. };
  66. }));
  67. }
  68. if (res.rows.length < 10) {
  69. this.loadStatus = 'nomore';
  70. }
  71. });
  72. },
  73. },
  74. };
  75. </script>
  76. <style lang="scss" src="./index.scss" />;