OfficeApp/subpkg/noticeList/noticeList.vue

<template>
  <view class="">
    <view class="task_box">
      <u-search shape="round" v-model="searchText" @change="changeSearch" placeholder="搜索公告" :showAction="false"></u-search>
      <view class="screening" @click="reSearch">搜索</view>
    </view>
    <view class="notice_list">
      <view class="item" v-for="item in list" :key="item.id" @click="clickNotice(item.id)">
        <view class="top">
          <view class="text">{{ item.title }}</view>
          <uni-icons type="forward"></uni-icons>
        </view>
        <view class="bottom">
          <view class="click">
            <uni-icons type="eye" color="#99a3bd"></uni-icons>
            <text>{{item.click}}</text>
          </view>
          <view>{{item.create_time}}</view>
        </view>
      </view>
    </view>
    <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
      :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
  </view>
</template>

<script>
  import { noticeList } from "@/api/notice.js"
  import { debounce } from "lodash"
  export default {
    data() {
      return {
        list: [],
        searchText: '',
        loadConfig: {
          page: 1,
          limit: 25,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'loadmore'
        },
      }
    },
    onLoad() {},
    onShow() {
      this.initConfig()
      this.loadNotice()
    },
    methods: {
      initConfig() {
        this.list = [];
        this.loadConfig.page = 1;
        this.loadConfig.status = 'loadmore';
      },
      async loadNotice() {
        if(this.loadConfig.status=="nomore")return;
        this.loadConfig.status="loading"
        const res = await noticeList({
          keyword: this.searchText,
          page_no: this.loadConfig.page,
          page_size: this.loadConfig.limit
        })
        this.loadConfig.status="loadmore"
        if(res.data.lists.length<this.loadConfig.limit){
          this.loadConfig.status="nomore"
        }else {
          this.loadConfig.page++;
        }
        this.list = [...this.list, ...res.data.lists];
      },
      clickNotice(e){
        uni.navigateTo({
          url: `/pages/oaNews/oaNews?id=${e}`
        })
      },
      changeSearch: debounce(function(e){
        this.reSearch()
      }, 500),
      reSearch(){
        this.initConfig()
        this.loadNotice()
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .task_box {
    margin: 0 auto;
    width: 750rpx;
    height: 98rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28rpx;
  
    .screening {
      margin-left: 10px;
      width: 149rpx;
      height: 63rpx;
      line-height: 63rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 35rpx;
      border: 2rpx solid #E6E5E5;
      color: #666;
      font-size: 28rpx;
    }
  
    .choose_style {
      background-color: #3274F9;
      color: #fff;
    }
  }
  .notice_list {
    padding: 28rpx;

    .item {
      width: 694rpx;
      background-color: #fff;
      border-radius: 14rpx;
      margin-bottom: 28rpx;
      display: flex;
      flex-direction: column;
      padding: 28rpx;
      color: #666666;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text {
          flex: 1;
          // height: 80rpx;
          display: -webkit-box;
          /* 将元素设置为弹性盒子 */
          -webkit-line-clamp: 2;
          /* 显示2行文本 */
          -webkit-box-orient: vertical;
          /* 确保文本在垂直方向上布局 */
          text-overflow: ellipsis;
          /* 使用省略号表示被截断的文本 */
          overflow: hidden;
          &::before {
            content: '公告';
            display: inline-block;
            color: #FF8C1A;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #FF8C1A;
            margin-right: 14.04rpx;
          }
        }
      }
      
      .bottom{
        display: flex;
        justify-content: space-between;
        font-size: 25rpx;
        margin-top: 10rpx;
        color: #99a3bd;
        .click{
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>