antissoft / NetworkInformation

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

          <el-button type="text" size="small" :disabled="!messageList.length" @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, i) 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="left">

                时间：{{ ncc.dateFormat(v.lastModifyTime) }}
              </div>

              <div class="right">
                <el-button type="text" size="mini" @click="toReadInfo(v.id, i)">标记已读</el-button>
              </div>

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

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

  import { message } from '@/utils/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() {},

    mounted() {},
    methods: {

      init() {
        this.messageList = [];
        this.searchList = {
          pageIndex: 1,
          pageSize: 10,
        };
        this.load();
      },

      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.init();

        });
      },

      toReadInfo(id, index) {
        ReadInfo(id).then(() => {
          this.$message({
            showClose: true,
            message: '已读成功！',
            type: 'success'
          });
          this.init();
        });
      }

    },
  };
  </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: #454040;

          font-size: 12px;

          line-height: 30px;

        }
      }
    }
  }
  </style>