heshanApp/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 chating_message_video_other from '../../../../../static/images/chating_message_video_other.png';
import chating_message_video from '../../../../../static/images/chating_message_video.png';
import chating_message_voice from '../../../../../static/images/chating_message_voice.png';
import { CustomMessageStatus, CustomType, PageEvents } from '../../../../../constant';
export default {
	name: 'RTCMessageRender',
	components: {},
	props: {
		data: Object,
		isSender: Boolean
	},
	data() {
		return {};
	},
	mounted() {
		
	},
	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: 18rpx 24rpx;
  border-radius: 0rpx 12rpx 12rpx 12rpx;
  background-color: #ffffff;
}

.rtc_wrap {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.rtc_wrap_self {
	flex-direction: row-reverse;
}

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

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