laboratory_maintenance_app/pages/notice/index.vue

<template>
  <view class="notice-list">
    <view @click="markReadAll" class="mark-read-btn">
      <image src="@/static/images/home/notice.svg" alt="" />
      一键标记为已读
    </view>
    <scroll-view scroll-y="true" style="height:calc(100vh - 140rpx);width: 100%;background: #F5F5F5;"
      :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="refresherrefresh"
      refresher-background="#f1f1f1" @scrolltolower="onListBottom">
      <ul class="card">
        <li v-for="(item, index) in dataList" :key="index" @click="jump(item)">
          <view class="title">
            <view class="text">
              <view>{{ item.title }}</view>
              <view class="mark" v-if="!item.readStatus"></view>
            </view>
            <view style="flex-shrink: 0;color: #999999;">{{ item.createdAt }}</view>
          </view>
          <view>
            {{ item.content }}
          </view>
        </li>
      </ul>
      <view style=" line-height: 100rpx;">
        <uni-load-more :status="scrollType"></uni-load-more>
      </view>
    </scroll-view>
  </view>
</template>
<script>
// import requestName from '@/common/requestName'
export default {
  name: 'NoticeList',
  data() {
    return {
      dataList: [],
      current: 0,
      style: {
        borderRadius: '100px',
        background: '#fff',
        padding: '0 32rpx'
      },
      search: {
        pageNo: 1,
        pageSize: 20,
        readStatus: ''
      },
      scrollType: '',
      triggered: false,
      refreshNeed: false
    }
  },
  onLoad(data) {
    this.getList()
  },
  onShow() {
    console.log(this.refreshNeed);
    if (this.refreshNeed) {
      this.reSearch()
    }
  },
  methods: {
   
    /**
     * @description 全部设为已读
     */
    markReadAll() {
      // this.$wx_http.post(requestName['updateReadStatus'], [-1]).then(res => {
      //   if (res.code == 0) {
      //     this.reSearch()
      //   }
      // })
    },

    getList() {
      // this.$wx_http.get(requestName['pageNotice'], this.search).then(res => {
      //   let data = res.data.records
      //   this.scrollType = ''
      //   this.triggered = false
      //   if (data.length >= this.search.pageSize) {
      //     this.scrollType = 'more'
      //   }
      //   this.dataList = this.dataList.concat(data)
      // })
    },

    reSearch() {
      this.search.pageNo = 1
      this.dataList = []
      this.getList()
    },

    onListBottom() {
      if (this.scrollType == 'more') {
        this.search.pageNo += 1
        this.getList()
      }
    },
    onreachBottom() {
      this.getDevicePage()
    },
    refresherrefresh() {
      this.triggered = true
      this.reSearch()
    }
  },
}
</script>

<style lang="scss" scoped>
.notice-list {
  height: calc(100vh - 0px);
  background: #F5F5F5;
  overflow: hidden;

  .mark-read-btn {
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1px solid rgba(255, 255, 255, 0.43);
    padding: 0;
    margin: 24rpx 30rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 30rpx;
    color: #FF8800;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 34rpx;
      height: 32rpx;
      display: block;
      margin-right: 20rpx;
      fill:#004BAA
    }
  }


  .card {
    margin: 0 16px;
    list-style: none;
    padding: 0;

    li {
      background: #FFFFFF;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.43);
      padding: 12px 14px;
      margin-bottom: 24rpx;
      font-size: 28rpx;

      .title {
        border-bottom: 1px solid #F0F0F0;
        display: flex;
        justify-content: space-between;
        padding-bottom: 10rpx;
        margin-bottom: 15rpx;


        .text {
          font-size: 30rpx;
          flex-grow: 1;
          display: flex;
          margin-right: 20rpx;
          font-weight: 400;
          color: #333333;
        }

        .mark {
          width: 16rpx;
          height: 16rpx;
          background: #D9362D;
          border-radius: 50%;
          margin-left: 12rpx;
          margin-top: 5rpx;
          flex-shrink: 0;
        }

      }


    }
  }
}
</style>