yogaApp/components/chat-group-readed/chat-group-readed.vue

<template>
  <uni-popup ref="popup" type="right" >
    <view class="chat-group-readed">
      <view class="uni-padding-wrap uni-common-mt">
        <uni-segmented-control :current="current" :values="items" style-type="button"
                               active-color="#9CE0DCFF"
                               in-active-color="white"
                               @clickItem="onClickItem" />
      </view>
      <view class="content">
        <!-- 已读列表 -->
        <view v-if="current === 0" class="member-list">
          <scroll-view scroll-y="true" style="max-height: 400rpx;">
            <view v-for="(item, index) in readedMembers" :key="index" class="member-item">
              <head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
                          :size="90"></head-image>
              <view class="member-name">{{ item.showNickName }}</view>
            </view>
          </scroll-view>
        </view>
        <!-- 未读列表 -->
        <view v-if="current === 1" class="member-list">
          <scroll-view scroll-y="true" style="max-height: 400rpx;">
            <view v-for="(item, index) in unreadMembers" :key="index" class="member-item">
              <head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
                          :size="90"></head-image>
              <view class="member-name">{{ item.showNickName }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "chat-group-readed",
  props: {
    msgInfo: {
      type: Object,
      required: true
    },
    groupMembers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      items: ['已读', '未读'],
      current: 0,
      readedMembers: [],
      unreadMembers: []
    };
  },
  methods: {
    open() {
      this.$refs.popup.open();
      // this.loadReadedUser();
    },
    async loadReadedUser() {
      this.readedMembers = [];
      this.unreadMembers = [];
      await uni.$http.get( `/api/message/group/findReadedUsers?groupId=${this.msgInfo.groupId}&messageId=${this.msgInfo.id}`)
        .then(res => {
        this.groupMembers.forEach(member => {
          // 发送者和已退群的不显示
          if (member.userId == this.msgInfo.sendId || member.quit) {
            return;
          }

          if (res.data.data.find(userId => member.userId == Number(userId))) {
            this.readedMembers.push(member);
            console.log(member)
          } else {
            this.unreadMembers.push(member);
          }
        });
        this.items[0] = `已读(${this.readedMembers.length})`;
        this.items[1] = `未读(${this.unreadMembers.length})`;

        // 更新已读人数（通过 Vuex）
        const chatInfo = { type: 'GROUP', targetId: this.msgInfo.groupId };
        const msgInfo = {
          id: this.msgInfo.id,
          groupId: this.msgInfo.groupId,
          readedCount: this.readedMembers.length
        };
        // 若已通过 mapActions 映射 updateMessage，可直接 this.updateMessage({ msgInfo, chatInfo })
        // 否则使用 dispatch
        if (this.updateMessage) {
          this.updateMessage({ msgInfo, chatInfo });
        } else {
          this.$store.dispatch('chatStore/updateMessage', { msgInfo, chatInfo });
        }
      }).catch(err => {
        console.error('加载已读用户失败', err);
      });
    },
    onClickItem(e) {
      this.current = e.currentIndex;
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-group-readed {
  // 深度选择器，穿透 scoped
  ::v-deep .uni-segmented-control__item {
    color: #333 !important;           // 未选中文字颜色
    &.uni-segmented-control__item--active {
      color: #007AFF !important;      // 选中文字颜色
      // 若需要调整背景色，可另设
      background-color: transparent !important; // 或保持原色
    }
  }
}
.chat-group-readed {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10rpx;
}

.member-item {
  height: 120rpx;
  display: flex;
  position: relative;
  padding: 0 30rpx;
  align-items: center;
  background-color: white;
  white-space: nowrap;

  .member-name {
    flex: 1;
    padding-left: 20rpx;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 60rpx;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>