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

<template>
  <view
    class="bg_container rtc_wrap"
    :class="{ rtc_wrap_self: isSender }"
    @click="reCall"
  >
    <image :src="rtcIcon" />
    <view>
      {{ messageCoontent }}
    </view>
  </view>
</template>

<script>
import { CustomMessageStatus, CustomType, PageEvents } from "../../../../../constant";

const chating_message_video_other = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_video_other.png";
const chating_message_video = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_video.png";
const chating_message_voice = "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_voice.png";
export default {
  name: "RTCMessageRender",
  components: {},
  props: {
    data: Object,
    isSender: Boolean,
  },
  data() {
    return {};
  },
  computed: {
    rtcIcon() {
      if (this.data.type === CustomType.VideoCall) {
        return this.isSender
          ? chating_message_video
          : chating_message_video_other;
      }
      return chating_message_voice;
    },
    messageCoontent() {
      switch (this.data.status) {
        case CustomMessageStatus.Refuse:
        case CustomMessageStatus.Refused:
          return "已拒绝";
        case CustomMessageStatus.Cancel:
        case CustomMessageStatus.Canceled:
          return "已取消";
        case CustomMessageStatus.Timeout:
          return "超时未接听";
        case CustomMessageStatus.Success:
          return `通话时长 ${this.data.duration}`;
        case CustomMessageStatus.Timeout:
          return "通话中断";
        case CustomMessageStatus.AccessByOther:
        case CustomMessageStatus.RejectedByOther:
          return "已在其他设备处理";
        default:
          return "";
      }
    },
    isBlack() {
      return this.$store.getters.storeBlackList.some(
        (black) => black.userID === this.$store.getters.storeCurrentConversation.userID
      )
    },
  },
  methods: {
    reCall() {
      if (this.isBlack) {
        return;
      }
      uni.$emit(
        PageEvents.RtcCall,
        this.data.type === CustomType.VideoCall ? "video" : "audio",
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.bg_container {
	padding: 16rpx 24rpx;
	border-radius: 0rpx 12rpx 12rpx 12rpx;
	background-color: #f0f0f0;
}
.rtc_wrap {
  display: flex;
  align-items: center;

  image {
    width: 20px;
    height: 20px;
    margin-right: 12rpx;
  }

  &_self {
    flex-direction: row-reverse;

    image {
      margin-right: 0 !important;
      margin-left: 12rpx;
    }
  }
}
</style>