draft.vue 3.6 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" randomBgColor :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.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">
  40. <u-tag text="草稿" plain shape="circle" type="error"></u-tag>
  41. </view>
  42. </u-cell>
  43. </u-cell-group>
  44. </u-swipe-action-item>
  45. </view>
  46. </u-swipe-action>
  47. </view>
  48. <u-loadmore :status="status" @loadmore="loadmore" :line="true" />
  49. <u-gap height="20" bgColor="#fff"></u-gap>
  50. </view>
  51. </template>
  52. <script>
  53. import mailComposeService from "@/api/mail/mailComposeService";
  54. export default {
  55. data() {
  56. return {
  57. status: 'loadmore',
  58. searchForm: {
  59. mailDTO: {
  60. title: "",
  61. }
  62. },
  63. dataList: [],
  64. tablePage: {
  65. pages: 0,
  66. currentPage: 0,
  67. pageSize: 10,
  68. orders: [{ column: "a.create_time", asc: false }],
  69. },
  70. loading: false,
  71. }
  72. },
  73. onLoad() {
  74. this.loadmore()
  75. },
  76. methods: {
  77. // 跳转到详细页面
  78. toDetail (mail) {
  79. uni.navigateTo({
  80. url: '/pages/apps/mail/sendEmailForm?id='+mail.id
  81. })
  82. },
  83. toAdd (){
  84. uni.navigateTo({
  85. url: '/pages/apps/mail/sendEmailForm'
  86. })
  87. },
  88. // 输入监听
  89. inputWord(e){
  90. this.searchTimer && clearTimeout(this.searchTimer)
  91. this.searchTimer = setTimeout(()=>{
  92. this.doSearch()
  93. },300)
  94. },
  95. // 搜索
  96. doSearch(){
  97. this.dataList = [];
  98. this.tablePage.currentPage = 0;
  99. this.tablePage.pageSize = 10;
  100. this.tablePage.pages = 0;
  101. this.loadmore()
  102. },
  103. onReachBottom() {
  104. this.loadmore()
  105. },
  106. loadmore() {
  107. if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
  108. this.status = 'nomore';
  109. return;
  110. }
  111. this.tablePage.currentPage = ++ this.tablePage.currentPage;
  112. //联网加载数据
  113. this.status = 'loading';
  114. mailComposeService.list({
  115. current: this.tablePage.currentPage,
  116. size: this.tablePage.pageSize,
  117. orders: this.tablePage.orders,
  118. status: '0',
  119. ...this.searchForm
  120. }).then((data)=>{
  121. //追加新数据
  122. this.dataList=this.dataList.concat(data.records);
  123. this.tablePage.pages = data.pages;
  124. if(this.tablePage.pages <= this.tablePage.currentPage){
  125. this.status = 'nomore'
  126. } else {
  127. this.status = 'loadmore'
  128. }
  129. })
  130. },
  131. del (id) {
  132. mailComposeService.delete(id).then((data)=>{
  133. this.doSearch()
  134. uni.showToast({
  135. title: data,
  136. icon:"success"
  137. })
  138. })
  139. },
  140. }
  141. }
  142. </script>