platform.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!-- 平台公告 -->
  2. <template>
  3. <view class="platform">
  4. <navbar :config="config"></navbar>
  5. <div class="zhan" :style="{ top: top + 'px' }"></div>
  6. <scroll-view :style="{height:height+'px'}" :scroll-y="true" @scrolltolower="getMoreList" :refresher-triggered="pullDownBool" :refresher-enabled="true" @refresherrefresh="getpulling">
  7. <view class="background">
  8. <view class="item-list">
  9. <view v-if="itemList.length>=0">
  10. <view class="item" v-for="(item,index) in itemList" :key="item.id">
  11. <view class="content">
  12. {{item.detail}}
  13. </view>
  14. <view class="time">
  15. {{item.noticeTime.slice(0,10).replace(/-/g,"/")}}
  16. </view>
  17. </view>
  18. <loadMore v-if="itemList.length>0" :status="status" ></loadMore>
  19. <nodata v-else :config="{top:20,content:'暂无公告~'}"></nodata>
  20. </view>
  21. </view>
  22. </view>
  23. </scroll-view>
  24. </view>
  25. </template>
  26. <script>
  27. let app = getApp()
  28. import {notice} from "../../../api/notice.js"
  29. export default{
  30. data(){
  31. return{
  32. config: {
  33. back: true, //false是tolbar页面 是则不写
  34. title: '平台公告',
  35. color: '#fff',
  36. //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
  37. backgroundColor: [1, "#0B844A"],
  38. statusBarFontColor: '#ffffff'
  39. },
  40. itemList:[],
  41. page:1,
  42. limit:10,
  43. status:"more",
  44. height: 0,
  45. pullDownBool: false,
  46. top: 0
  47. }
  48. },
  49. onReady() {
  50. let that = this
  51. uni.getSystemInfo({
  52. success: (res) => {
  53. that.height = res.windowHeight - res.statusBarHeight - 44;
  54. },
  55. });
  56. },
  57. //下拉刷新
  58. // onPullDownRefresh() {
  59. // this.page=1
  60. // this.itemList = []
  61. // this.getList()
  62. // },
  63. //上拉加载
  64. // onReachBottom() {
  65. // if(this.status=="more"){
  66. // this.page++
  67. // this.getList()
  68. // }
  69. // },
  70. onLoad(){
  71. this.top = app.globalData.barHeight + 44
  72. this.getList()
  73. },
  74. methods:{
  75. // // 上拉更多
  76. getMoreList(){
  77. if(this.status=="more"){
  78. this.page++
  79. this.getList()
  80. }
  81. },
  82. // 下拉刷新
  83. getpulling() {
  84. if (!this.pullDownBool) {
  85. this.pullDownBool = true;
  86. this.page=1
  87. this.itemList = []
  88. this.getList()
  89. }
  90. },
  91. //获取数据
  92. getList(){
  93. this.$http.get(notice,{
  94. page:this.page,
  95. limit:this.limit,
  96. }).then(res=>{
  97. if(res&&res.code==200){
  98. uni.stopPullDownRefresh()
  99. this.itemList=this.itemList.concat(res.page.list)
  100. if(res.page.totalPage<=res.page.currPage){
  101. this.status="noMore";
  102. }else{
  103. this.status="more"
  104. }
  105. this.pullDownBool = false;
  106. }
  107. })
  108. }
  109. },
  110. }
  111. </script>
  112. <style lang="scss" scoped>
  113. .zhan {
  114. background-color: #0B844A;
  115. position: fixed;
  116. width: 100%;
  117. height: 20px;
  118. }
  119. .background{
  120. // background-color: #0B844A;
  121. .item-list{
  122. background: #ffffff;
  123. border-radius: 40rpx 40rpx 0 0;
  124. padding: 1rpx 48rpx 32rpx 30rpx;
  125. .item{
  126. border-bottom: 1rpx solid #e6e6e6;
  127. margin-top: 30rpx;
  128. .content{
  129. color: #1a1a1a;
  130. line-height: 38rpx;
  131. font-weight: 400;
  132. font-size: 28rpx;
  133. }
  134. .time{
  135. color: #999999;
  136. line-height: 30rpx;
  137. font-weight: 400;
  138. font-size: 28rpx;
  139. margin-top: 12rpx;
  140. margin-bottom: 32rpx;
  141. }
  142. }
  143. }
  144. }
  145. </style>