notice-users.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <view class="container cart clearfix">
  3. <tui-skeleton
  4. v-if="skeletonShow"
  5. backgroundColor="#fafafa"
  6. borderRadius="10rpx"
  7. :isLoading="true"
  8. :loadingType="5"
  9. ></tui-skeleton>
  10. <view class="container-main" v-else>
  11. <view class="clearfix">
  12. <!-- 空白页 -->
  13. <view class="empty-container" v-if="isEmpty">
  14. <image class="empty-container-image" :src="StaticUrl + '/icon/icon-notice-empty@2x.png'"></image>
  15. <text class="error-text">暂无任何消息~</text>
  16. </view>
  17. <!-- 列表 -->
  18. <view class="tui-notice clearfix" v-else v-for="(cell, index) in list" :key="index">
  19. <tui-swipe-action :operateWidth="80" :backgroundColor="'#F7F7F7'">
  20. <template v-slot:content>
  21. <notice-cell :cellType="2" :cell="cell"></notice-cell>
  22. </template>
  23. <template v-slot:button>
  24. <view class="tui-custom-btn_box">
  25. <view class="tui-custom-btn" @tap="deleteBtn(cell.id)">
  26. <text class="iconfont icon-shanchu3"></text>
  27. </view>
  28. </view>
  29. </template>
  30. </tui-swipe-action>
  31. </view>
  32. <!--加载loadding-->
  33. <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
  34. <tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
  35. <!--加载loadding-->
  36. </view>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { mapState, mapMutations } from 'vuex'
  42. import noticeCell from './components/notice-cell.vue'
  43. export default {
  44. components:{
  45. noticeCell
  46. },
  47. data() {
  48. return {
  49. skeletonShow: true,
  50. StaticUrl: this.$Static,
  51. listQuery: {
  52. commonId: 0,
  53. messageType: 2,
  54. pageNum: 1,
  55. pageSize: 10
  56. },
  57. list: [],
  58. isEmpty: false,
  59. loadding: false,
  60. pullUpOn: true,
  61. pullFlag: true,
  62. hasNextPage: false,
  63. nomoreText: '上拉显示更多'
  64. }
  65. },
  66. onLoad() {
  67. this.initData()
  68. },
  69. computed: {
  70. ...mapState(['hasLogin', 'userInfo'])
  71. },
  72. methods: {
  73. async initData() {
  74. const userInfo = await this.$api.getStorage()
  75. this.listQuery.commonId = userInfo.clubId ? userInfo.clubId : 0
  76. this.getUserAuthClubMessageList()
  77. },
  78. getUserAuthClubMessageList() {
  79. this.UserService.getUserAuthClubMessageList(this.listQuery)
  80. .then(response => {
  81. let data = response.data
  82. this.hasNextPage = response.data.hasNextPage
  83. if (data.list && data.list.length > 0) {
  84. this.isEmpty = false
  85. this.list = [...data.list]
  86. this.pullFlag = false
  87. setTimeout(() => {
  88. this.pullFlag = true
  89. }, 500)
  90. if (this.hasNextPage) {
  91. this.pullUpOn = false
  92. this.nomoreText = '上拉显示更多'
  93. } else {
  94. if (this.list.length < 3) {
  95. this.pullUpOn = true
  96. this.loadding = false
  97. } else {
  98. this.pullUpOn = false
  99. this.loadding = false
  100. this.nomoreText = '到底了'
  101. }
  102. }
  103. } else {
  104. this.isEmpty = true
  105. }
  106. this.skeletonShow = false
  107. })
  108. .catch(error => {
  109. this.$util.msg(error.msg, 2000)
  110. })
  111. console.log('获取消息通知数据')
  112. },
  113. getReachBottomData(index) {
  114. //上拉加载
  115. this.listQuery.pageNum += 1
  116. this.UserService.getUserAuthClubMessageList(this.listQuery)
  117. .then(response => {
  118. let data = response.data
  119. if (data.list && data.list.length > 0) {
  120. this.hasNextPage = data.hasNextPage
  121. this.list = this.list.concat(data.list)
  122. this.pullFlag = false // 防上拉暴滑
  123. setTimeout(() => {
  124. this.pullFlag = true
  125. }, 500)
  126. if (this.hasNextPage) {
  127. this.pullUpOn = false
  128. this.nomoreText = '上拉显示更多'
  129. } else {
  130. this.pullUpOn = false
  131. this.loadding = false
  132. this.nomoreText = '已至底部'
  133. }
  134. }
  135. })
  136. .catch(error => {
  137. this.$util.msg(error.msg, 2000)
  138. })
  139. },
  140. deleteBtn(id) {
  141. // 删除通知消息
  142. this.UserService.authDeleteMessage({ id: id })
  143. .then(response => {
  144. uni.vibrateShort({
  145. success: function() {
  146. console.log('success')
  147. }
  148. })
  149. this.listQuery.pageNum = 1
  150. this.getUserAuthClubMessageList()
  151. })
  152. .catch(error => {
  153. console.log('error=>', error.msg)
  154. })
  155. }
  156. },
  157. onReachBottom() {
  158. if (this.hasNextPage) {
  159. this.loadding = true
  160. this.pullUpOn = true
  161. this.getReachBottomData()
  162. }
  163. },
  164. onPullDownRefresh() {
  165. //下拉刷新
  166. this.listQuery.pageNum = 1
  167. this.getUserAuthShopMessageList()
  168. uni.stopPullDownRefresh()
  169. },
  170. onShow() {}
  171. }
  172. </script>
  173. <style lang="scss">
  174. page {
  175. background-color: #f7f7f7;
  176. }
  177. .container-main {
  178. width: 100%;
  179. box-sizing: border-box;
  180. padding: 24rpx 0;
  181. .empty-container-image {
  182. width: 260rpx;
  183. height: 260rpx;
  184. margin-top: -300rpx;
  185. }
  186. }
  187. .tui-swipeout-content{
  188. white-space:normal !important;
  189. }
  190. .tui-notice{
  191. margin-bottom: 24rpx;
  192. }
  193. .tui-notice-cell {
  194. width: 702rpx;
  195. height: auto;
  196. background-color: #ffffff;
  197. border-radius: 16rpx;
  198. box-sizing: border-box;
  199. padding:16rpx 24rpx;
  200. margin: 0 auto;
  201. .tui-cell-top{
  202. width: 100%;
  203. height: 88rpx;
  204. line-height: 88rpx;
  205. float: left;
  206. .cell-title{
  207. font-size: 32rpx;
  208. color: #333333;
  209. float: left;
  210. font-weight: bold;
  211. }
  212. .cell-time{
  213. font-size: 24rpx;
  214. color: #999999;
  215. float: right;
  216. }
  217. }
  218. .tui-cell-content{
  219. width: 100%;
  220. height: auto;
  221. float: left;
  222. box-sizing: border-box;
  223. border-radius: 8rpx;
  224. line-height: 44rpx;
  225. padding: 24rpx;
  226. background-color: #F7F7F7;
  227. font-size: 28rpx;
  228. color: #666666;
  229. text-align: justify;
  230. }
  231. }
  232. .tui-custom-btn_box {
  233. width: 80px;
  234. height: 100%;
  235. padding: 0 20rpx;
  236. box-sizing: border-box;
  237. display: flex;
  238. align-items: center;
  239. justify-content: center;
  240. background-color: #f7f7f7;
  241. }
  242. .tui-custom-btn {
  243. width: 56rpx;
  244. height: 56rpx;
  245. border-radius: 50%;
  246. background-color: #f94b4b;
  247. color: #ffffff;
  248. display: flex;
  249. align-items: center;
  250. justify-content: center;
  251. flex-shrink: 0;
  252. .icon-shanchu3 {
  253. font-size: 32rpx;
  254. }
  255. }
  256. </style>