antissoft / NetworkInformation

  <template>
    <div class="NewsDialog">
      <div class="news-title">
        <div class="left">我的消息</div>
        <div class="right">

          <el-button type="primary" size="small" @click="toReadAll">标记全部已读</el-button>

        </div>
      </div>
      <div class="infinite-list-wrapper" style="overflow: auto">
        <ul
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"

          infinite-scroll-immediate

        >

          <li class="list-item" v-for="v in messageList" :key="v.id">
            <div class="item-title">{{v.title}}</div>
            <!-- <p>这个应用应该归属到青羊区，不在金牛区的管辖范围内。</p> -->

            <div class="item-info">

              <div class="left">发送人：{{v.creatorUser}}</div>

            </div>
            <div class="item-info">
              <div class="right">时间：{{ncc.dateFormat(v.lastModifyTime)}}</div>

            </div>
          </li>
        </ul>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
      </div>
    </div>
  </template>
  
  <script>

  import {getMessageList} from "@/api/system/message";

  export default {
    name: "NewsDialog",
    data() {
      return {
        count: 10,
        loading: false,

        messageList: [],

        searchList: {
          pageIndex: 1, 
          pageSize: 10
        },
        total: 0,

      };
    },
    computed: {
      noMore() {

        return this.messageList.length == this.total;

      },
      disabled() {
        return this.loading || this.noMore;
      },
    },

    created() {
      this.load();
    },

    mounted() {},
    methods: {
      load() {

        this.loading = true;

        getMessageList(this.searchList).then(({data}) => {
          this.messageList = this.messageList.concat(data.list);

          this.total = data.pagination.total;

          this.loading = false;

          this.searchList.pageIndex += 1
          this.$emit('changeMagNum', data.pagination.total);

        });

      },

      toReadAll() {
        MessageAllRead().then(() => {
          this.load();
        })
      }

    },
  };
  </script>
  <style scoped lang="scss">
  .NewsDialog {
    margin: -14px;
    .news-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      padding: 0 12px;
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: rgba(59, 130, 246, 1);
      color: #fff;
    }
    .infinite-list-wrapper {
      height: 40vh;
      text-align: center;
      // .list {
      //   margin-right: -8px;
      // }
      .list-item {
        text-align: left;

        margin: 5px;

        padding: 8px;
        border-radius: 5px;
        background-color: rgb(243, 244, 246);

        cursor: pointer;

        .item-title {
          color: #000;
          font-weight: 600;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          &::after {
            content: "";
            display: inline-block;

            width: 25px;

            text-align: center;
            height: 15px;
            background-image: url("@/assets/images/Group.png");
            background-size: 100% 100%; /* 确保图片覆盖整个元素 */
            background-position: center; /* 将图片居中显示 */
            margin-left: 8px;
          }
        }
        p {
          margin: 5px 0;
          font-size: 12px;
          color: #898989;
        }
        .item-info {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          color: #ccc;
          font-size: 12px;
        }
      }
    }
  }
  </style>