yijianbao_user_uniapp/pages_im/pages/conversation/chating/components/MessageItem/MessageReadState.vue

<template>
  <view>
    <text @click="toMemberRead" class="read_state" :style="{ color: unReadCount < 1 ? '#8E9AB0' : '#0089FF' }">
	{{ getReadStateStr}}</text>
  </view>
</template>

<script>
import IMSDK from "openim-uniapp-polyfill";
import { SessionType } from "openim-uniapp-polyfill";
export default {
  name: "",
  components: {},
  props: {
    message: Object,
  },
  data() {
    return {
      
    };
  },
  computed: {
    unReadCount() {
      if (this.message.sessionType === SessionType.Single) {
        return 0
      }
      return this.message.attachedInfoElem?.groupHasReadInfo.unreadCount ?? 0
    },
    getReadStateStr() {
      if (this.message.sessionType === SessionType.Single) {
        return this.message.isRead ? "已读" : "未读";
      }
      if (this.message.sessionType !== SessionType.Notification) {
        return this.unReadCount < 1 ? '全部已读' : `${this.unReadCount}人未读`
      }
      return "";
    },
  },
  methods: {
    toMemberRead() {
      if (this.message.sessionType === SessionType.Single) {
        return;
      }
      uni.$u.route("/pages/conversation/groupMessageReadState/index", {
        messageState: JSON.stringify({
          conversationID: this.$store.getters.storeCurrentConversation.conversationID,
          clientMsgID: this.message.clientMsgID,
          readedCount: this.message.attachedInfoElem?.groupHasReadInfo.hasReadCount ?? 0,
          unReadCount: this.unReadCount
        })
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.read_state {
  // font-size: 26rpx;
  font-size: 0.75rem;
}
</style>