message.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <view class="main">
  3. <view class="list_item u-margin-top-30 margin-lr-sm flex" v-for="(item,index) in listItem" :key="index">
  4. <view class="">
  5. <u-avatar :src="item.avatar" size="70"></u-avatar>
  6. </view>
  7. <view class="u-margin-left-30" style="width: 100%;">
  8. <view class="order-num u-font-28 u-padding-bottom-10 u-border-bottom">
  9. {{item.name}}
  10. </view>
  11. <view class="margin-top-sm u-font-24" style="color:#909399;">
  12. {{item.message}}
  13. </view>
  14. </view>
  15. </view>
  16. <uni-load-more :loadingType="loadingType" :contentText="contentText" />
  17. <!-- <view class="cu-tabbar-height"></view> -->
  18. <!-- <view class="cu-tabbar-height"></view> -->
  19. </view>
  20. </template>
  21. <script>
  22. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  23. export default {
  24. components: {
  25. uniLoadMore
  26. },
  27. data() {
  28. return {
  29. loadingType: 0,
  30. contentText: {
  31. contentdown: '上拉显示更多',
  32. contentrefresh: '正在加载...',
  33. contentnomore: '没有更多数据了'
  34. },
  35. indexPage: 1,
  36. listItem: []
  37. }
  38. },
  39. onLoad() {
  40. this.getUserMessage()
  41. },
  42. onReachBottom() {
  43. if (this.loadingType !== 0) {
  44. return;
  45. }
  46. this.loadingType = 1;
  47. this.getUserMessage();
  48. },
  49. methods: {
  50. async getUserMessage() {
  51. let res = await this.$u.post("manager/message", {
  52. page: this.indexPage
  53. })
  54. if (res.code == 200) {
  55. this.listItem = this.listItem.concat(res.data.data)
  56. this.indexPage++
  57. if (res.data.current_page == res.data.last_page) {
  58. this.loadingType = 2;
  59. } else {
  60. this.loadingType = 0;
  61. }
  62. }else{
  63. uni.showToast({
  64. icon: 'none',
  65. title: data.message
  66. });
  67. this.loadingType = 0;
  68. }
  69. }
  70. }
  71. }
  72. </script>
  73. <style>
  74. .list_item {
  75. padding: 20rpx;
  76. border-radius: 16rpx;
  77. box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
  78. background: #fff;
  79. }
  80. .order-num::after {
  81. border-color: #bbb;
  82. }
  83. </style>