heshanApp/pages_im/pages/conversation/groupMessageReadState/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="消息接收人列表" />

    <u-tabs
      class="top_tab"
      :scrollable="false"
      :list="tabList"
      @click="clickTab"
    ></u-tabs>

    <view
      class="pane_row"
      :style="{ transform: `translateX(${isReaded ? '0' : '-100%'})` }"
    >
      <view class="pane_content">
        <u-list
          @scrolltolower="readedScrolltolower"
          :height="`${listHeight}px`"
          lowerThreshold="100"
          v-if="unReadList.length > 0"
          class="member_list"
        >
          <u-list-item v-for="member in unReadList" :key="member.userID">
            <user-item :item="member" :showRole="false" />
          </u-list-item>
        </u-list>
        <u-empty v-else mode="list" />
      </view>

      <view class="pane_content">
        <u-list
          @scrolltolower="unreadScrolltolower"
          :height="`${listHeight}px`"
          lowerThreshold="100"
          v-if="readedList.length > 0"
          class="member_list"
        >
          <u-list-item v-for="member in readedList" :key="member.userID">
            <user-item :item="member" :showRole="false" />
          </u-list-item>
        </u-list>
        <u-empty v-else mode="list" />
      </view>
    </view>
  </view>
</template>

<script>
import IMSDK from "openim-uniapp-polyfill";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import UserItem from "../../../components/UserItem/index.vue";
import { PageEvents } from "../../../constant/event";
export default {
  components: {
    CustomNavBar,
    UserItem,
  },
  data() {
    return {
      readedList: [],
      unReadList: [],
      isReaded: true,
      tabList: [
        {
          name: "未读",
        },
        {
          name: "已读",
        },
      ],
      conversationID: "",
      clientMsgID: "",
      messageState: {
        groupID: "",
        hasReadUserIDList: [],
        memberCount: 0,
        sendTime: 0,
      },
      unReadLoadstate: {
        loading: false,
        hasMore: true,
      },
      readedLoadstate: {
        loading: false,
        hasMore: true,
      },
      listHeight:
        uni.getWindowInfo().windowHeight -
        uni.getWindowInfo().statusBarHeight -
        110,
    };
  },
  onLoad(options) {
    this.messageState = JSON.parse(options.messageState);
    const { readedCount, unReadCount, conversationID, clientMsgID } = this.messageState;
    this.conversationID = conversationID
    this.clientMsgID = clientMsgID
    this.tabList[1].name = `已读 ${readedCount}`;
    this.tabList[0].name = `未读 ${unReadCount}`;
    this.getReadedMemberList();
    this.getUnreadMemberList();
    uni.$on(PageEvents.GroupMessageReceipt, this.groupMessageHasReadedHander);
  },
  onUnload() {
    uni.$off(PageEvents.GroupMessageReceipt, this.groupMessageHasReadedHander);
  },
  methods: {
    groupMessageHasReadedHander(receipt) {
      if(this.clientMsgID != receipt.clientMsgID) return
      this.tabList[0].name = `已读 ${receipt.hasReadCount}`;
      this.tabList[1].name = `未读 ${receipt.unreadCount}`;
      const readMembers = receipt.readMembers;

      if (!this.readedLoadstate.hasMore) {
        this.readedList = [...this.readedList, ...readMembers];
      }
      const filterMembers = this.unReadList.filter(
        (member) => !readMembers.some((item) => item.userID === member.userID),
      );
      this.unReadList = [...filterMembers];
    },
    clickTab({ index }) {
      this.isReaded = index === 0;
    },
    readedScrolltolower() {
      if (this.readedLoadstate.hasMore && !this.readedLoadstate.loading) {
        this.getReadedMemberList();
      }
    },
    unreadScrolltolower() {
      if (this.unReadLoadstate.hasMore && !this.unReadLoadstate.loading) {
        this.getUnreadMemberList();
      }
    },
    getReadedMemberList() {
      this.readedLoadstate.loading = true;
      IMSDK.asyncApi(
        'getGroupMessageReaderList',
        IMSDK.uuid(),
        {
          conversationID: this.conversationID,
          clientMsgID : this.clientMsgID,
          filter: 0,
          offset: this.readedList.length ?? 0,
          count: 20,
        },
      )
        .then(({ data }) => {
          this.readedList = [...this.readedList, ...data];
          this.readedLoadstate.hasMore = data.length === 20;
        })
        .finally(() => (this.readedLoadstate.loading = false));
    },
    getUnreadMemberList() {
      this.unReadLoadstate.loading = true;
      IMSDK.asyncApi(
        'getGroupMessageReaderList',
        IMSDK.uuid(),
        {
          conversationID: this.conversationID,
          clientMsgID : this.clientMsgID,
          filter: 1,
          offset: this.unReadList.length ?? 0,
          count: 20,
        },
      )
        .then(({ data }) => {
          this.unReadList = [...this.unReadList, ...data];
          this.unReadLoadstate.hasMore = data.length === 20;
        })
        .finally(() => (this.unReadLoadstate.loading = false));
    },
  },
};
</script>

<style lang="scss">
.page_container {
  background-color: #f8f8f8;
  overflow-x: hidden;

  .u-tabs {
    background-color: #fff;
    // margin-bottom: 12px;
  }

  .pane_row {
    display: flex;
    transition: all 0.3s ease 0s !important;

    .pane_content {
      @include colBox(false);
      height: 100%;
      flex: 0 0 100%;

      /deep/.user_item {
        background-color: #fff;
      }
    }
  }

  .u-empty {
    margin-top: 20vh !important;
  }
}
</style>