sugarpark-mini-program/components/tui-chat/message-elements/custom-message/index.vue

<template>
	<view>
		<view v-if="renderDom.type === 'image'" class="image-message">
			<image :src="renderDom.imageUrl" mode="widthFix" class="msg-img" @click="previewImage"></image>
		</view>
		<view v-if="renderDom.type === 'video'" class="video-message" @click="playerHander">
			<image :src="renderDom.videoCover" mode="aspectFill" class="poster"></image>
			<image :src="`${assetsUrl}talk-playing.png`" mode="aspectFit" class="video-icon"></image>
		</view>
		<view v-if="renderDom.type === 'system'" class="system-message" @click="playerHander">
			<view class="err-title" v-if="renderDom.text!==''">
				{{renderDom.text}}
			</view>
			<view class="err-line">
				<text class="err-text">{{renderDom.context}}</text>
				<text class="err-text" @click="toPath(renderDom.highlightLink)" :style="{'color':`${renderDom.highlightColor}`}">
					{{renderDom.highlightContext}}
				</text>
			</view>
			
		</view>
		<view v-if="renderDom.type === 'notSupport'" class="message-body-span text-message">
			<view class="message-body-span-text">{{ renderDom[0].text }}</view>
		</view>
	</view>
</template>

<script>
import { formateTime } from '../../../base/common.js';
export default {
	data() {
		return {
			renderDom:null,
			assetsUrl:this.$util.assetsUrl
		};
	},
	components: {},
	props: {
		message: {
			type: Object,
			default: () => {}
		},
		isMine: {
			type: Boolean,
			default: true
		}
	},
	watch: {
		message: {
			handler: function(newVal) {
				this.message=newVal;
				this.renderDom=this.parseCustom(newVal);
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// 解析音视频通话消息
		extractCallingInfoFromMessage(message) {
			const callingmessage = JSON.parse(message.payload.data);
			if (callingmessage.businessID !== 1) {
				return '';
			}
			const objectData = JSON.parse(callingmessage.data);
			switch (callingmessage.actionType) {
				case 1: {
					if (objectData.call_end >= 0 && !callingmessage.groupID) {
						return `通话时长：${formateTime(objectData.call_end)}`;
					}
					if (callingmessage.groupID) {
						return '结束群聊';
					}
					if (objectData.data && objectData.data.cmd === 'switchToAudio') {
						return '切换语音通话';
					}
					if (objectData.data && objectData.data.cmd === 'switchToVideo') {
						return '切换视频通话';
					}
					return '发起通话';
				}
				case 2:
					return '取消通话';
				case 3:
					if (objectData.data && objectData.data.cmd === 'switchToAudio') {
						return '切换语音通话';
					}
					if (objectData.data && objectData.data.cmd === 'switchToVideo') {
						return '切换视频通话';
					}
					return '已接听';
				case 4:
					return '拒绝通话';
				case 5:
					if (objectData.data && objectData.data.cmd === 'switchToAudio') {
						return '切换语音通话';
					}
					if (objectData.data && objectData.data.cmd === 'switchToVideo') {
						return '切换视频通话';
					}
					return '无应答';
				default:
					return '';
			}
		},
		parseCustom(message) {
			// 约定自定义消息的 data 字段作为区分，不解析的不进行展示
			let data=JSON.parse(message.payload.data);
			console.log(data)
			if(data.type===5){
				const renderDom={
					type:'image',
					name:'custom',
					imageUrl:data.path,
				}
				return renderDom;
			}
			if(data.type===6){
				const renderDom={
					type:'video',
					name:'custom',
					videoUrl:data.path,
					videoCover:`${data.path}?x-oss-process=video/snapshot,w_0,h_0,t_10,ar_auto,f_jpg`,
					width:data.width,
					height:data.height
				}
				return renderDom;
			}
			if(data.type===99&&data.systemMsgType===10){
				const renderDom={
					type:'system',
					name:'custom',
					text:'该消息已被屏蔽',
					flow:'out',
					context:data.context.substring(0,data.context.indexOf(data.highlightContext)),
					link:`/pages/webview/webview?url=${this.$util.protocal.behaviorStandar}`,
					highlightColor:`#${data.highlightColor.substring(2)}`,
					highlightContext:data.highlightContext
				}
				return renderDom;
			}
			if(data.type===99&&data.systemMsgType===4){
				const renderDom={
					type:'system',
					name:'custom',
					text:'',
					flow:'out',
					context:data.context.substring(data.context.indexOf(data.highlightContext),data.context.length),
					link:`/pages/mine/album`,
					highlightColor:`#${data.highlightColor.substring(2)}`,
					highlightContext:data.highlightContext
				}
				return renderDom;
			}
			return {type: 'notSupport',text: '[自定义消息]'};
		},
		previewImage() {
			uni.previewImage({
				current: this.renderDom.imageUrl,
				// 当前显示图片的http链接
				urls: [this.renderDom.imageUrl]
			});
		},
		playerHander() {
			uni.$emit('videoPlayerHandler', {
				isPlay: true,
				message: this.renderDom
			});
		},
		stopHander() {
			this.isPlay = false;
		}
	}
};
</script>
<style>
@import './index.css';
</style>