inbox.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <view>
  3. <uni-fab
  4. horizontal="right"
  5. vertical="bottom"
  6. @fabClick="toAdd"
  7. ></uni-fab>
  8. <u-search :show-action="false" v-model="searchForm.mailDTO.title" @change="inputWord" margin="20rpx 50rpx"></u-search>
  9. <view>
  10. <u-swipe-action>
  11. <view
  12. v-for="(obj, index) in dataList"
  13. :key="index">
  14. <u-swipe-action-item @click="del(obj.id)" :key="obj.id" :threshold="60" duration="500"
  15. :options="[ {
  16. text: '删除',
  17. style: {
  18. backgroundColor: '#f56c6c'
  19. }
  20. }]">
  21. <u-cell-group>
  22. <u-cell @click="toDetail(obj)">
  23. <u-avatar slot="icon" size="32" :src="obj.sender.photo"></u-avatar>
  24. <view slot="title" class="content">
  25. <view class="text-bold text-grey">
  26. <view class="ellipsis-description">
  27. 标题:{{obj.mailDTO && obj.mailDTO.title}}
  28. </view>
  29. </view>
  30. <view class="text-grey text-sm">
  31. <view class="ellipsis-description">
  32. 发件人:{{obj.sender.name}}, {{obj.sendTime}}
  33. </view>
  34. </view>
  35. <view class="text-sm">
  36. <view class="ellipsis-description" v-html="`内容:${obj.mailDTO && obj.mailDTO.content || ''}`"></view>
  37. </view>
  38. </view>
  39. <view slot="right-icon" class="action">
  40. <u-tag v-if="obj.readStatus === '1'" text="已读" plain shape="circle" type="success"></u-tag>
  41. <u-tag v-else text="未读" plain shape="circle" type="error"></u-tag>
  42. </view>
  43. </u-cell>
  44. </u-cell-group>
  45. </u-swipe-action-item>
  46. </view>
  47. </u-swipe-action>
  48. </view>
  49. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  50. <u-gap height="20" bgColor="#fff"></u-gap>
  51. <u-back-top :scrollTop="0" mode="square"></u-back-top>
  52. </view>
  53. </template>
  54. <script>
  55. import mailBoxService from "@/api/mail/mailBoxService";
  56. export default {
  57. data() {
  58. return {
  59. status: 'loadmore',
  60. searchForm: {
  61. mailDTO: {
  62. title: "",
  63. }
  64. },
  65. dataList: [],
  66. tablePage: {
  67. pages: 0,
  68. currentPage: 0,
  69. pageSize: 10,
  70. orders: [{ column: "a.create_time", asc: false }],
  71. },
  72. loading: false,
  73. }
  74. },
  75. onLoad() {
  76. this.loadmore()
  77. },
  78. methods: {
  79. // 跳转到详细页面
  80. toDetail (mail) {
  81. uni.navigateTo({
  82. url: '/pages/apps/mail/receivedMailDetail?id='+mail.id
  83. })
  84. },
  85. toAdd (){
  86. uni.navigateTo({
  87. url: '/pages/apps/mail/sendEmailForm'
  88. })
  89. },
  90. // 输入监听
  91. inputWord(e){
  92. this.searchTimer && clearTimeout(this.searchTimer)
  93. this.searchTimer = setTimeout(()=>{
  94. this.doSearch()
  95. },300)
  96. },
  97. // 搜索
  98. doSearch(){
  99. this.dataList = [];
  100. this.tablePage.currentPage = 0;
  101. this.tablePage.pageSize = 10;
  102. this.tablePage.pages = 0;
  103. this.loadmore()
  104. },
  105. onReachBottom() {
  106. this.loadmore()
  107. },
  108. loadmore() {
  109. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  110. this.status = 'nomore';
  111. return;
  112. }
  113. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  114. //联网加载数据
  115. this.status = 'loading';
  116. mailBoxService.list({
  117. current: this.tablePage.currentPage,
  118. size: this.tablePage.pageSize,
  119. orders: this.tablePage.orders,
  120. ...this.searchForm
  121. }).then((data)=>{
  122. //追加新数据
  123. this.dataList=this.dataList.concat(data.records);
  124. this.tablePage.pages = data.pages;
  125. if(this.tablePage.pages <= this.tablePage.currentPage){
  126. this.status = 'nomore'
  127. } else {
  128. this.status = 'loadmore'
  129. }
  130. })
  131. },
  132. del (id) {
  133. mailBoxService.delete(id).then((data)=>{
  134. this.doSearch()
  135. uni.showToast({
  136. title: data,
  137. icon:"success"
  138. })
  139. })
  140. },
  141. }
  142. }
  143. </script>