yijianbao_user_uniapp/pages_im/pages/moments/interactiveMessage/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="消息">
      <view class="nav_right_action" slot="more">
        <u-button
          type="primary"
          size="mini"
          loadingSize="12"
          :loading="loading"
          text="清空"
          @click="clearAll"
        >
        </u-button>
      </view>
    </custom-nav-bar>

    <z-paging
      ref="paging"
      default-page-size="20"
      loading-more-no-more-text="没有更多消息了"
      use-virtual-list
      cell-height-mode="dynamic"
      @query="queryList"
    >
      <template slot="cell" slot-scope="{ item, index }">
        <i-message-item :item="item" />
      </template>
    </z-paging>
  </view>
</template>

<script>
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import IMessageItem from "./IMessageItem.vue";
import { PageEvents } from "../../../constant";
import { getMomentLogs } from "../../../api/moments";
import { clearMomentUnreadCount } from "../../../api/moments";
export default {
  components: {
    CustomNavBar,
    IMessageItem,
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    queryList(pageNo, pageSize) {
      getMomentLogs(pageNo, Number(pageSize)).then((data) => {
        console.log(data);
        this.$refs.paging.complete(data.workMoments ?? []);
      });
    },
    clearAll() {
      this.loading = true;
      clearMomentUnreadCount(3)
        .then(() => this.$refs.paging.reload())
        .catch(() => uni.$u.toast("操作失败！"))
        .finally(() => (this.loading = false));
    },
  },
  onBackPress() {
    uni.$emit(PageEvents.RefreshMomentsUnreadCount);
    return false;
  },
};
</script>

<style lang="scss" scoped>
.page_container {
  .nav_right_action {
    font-size: 14px;
    padding-right: 44rpx;

    .u-button {
      background-color: transparent;
      border: none;
      color: #333;

      /deep/.u-button__text,
      /deep/.u-button__loading-text {
        font-size: 28rpx !important;
      }
    }
  }

  .z-paging-content {
    top: 44px;
    margin-top: var(--status-bar-height);

    /deep/.zp-l-container {
      background-color: #f6f6f6;
    }

    /deep/.zp-list-cell:last-of-type {
      .bottom_line {
        height: 0px;
      }
    }
  }
}
</style>