heshanApp/pages_im/pages/conversation/notifyMessageList/NotifyMessageRender.vue

<template>
	<view :id="`auchor${source.clientMsgID}`" class="message_item" @tap="clickItem">
		<view class="card_header">
			<view class="header_left">
				<my-avatar size="32" :desc="source.senderNickname" shape="circle" src="/static/logo.png" />
				<text class="header_title">{{ notifyTitle || source.senderNickname }}</text>
			</view>
			<text class="header_time">{{ formattedMessageTime }}</text>
		</view>

		<view class="card_content">
			<view v-if="getMediaSource" class="media_container" @click.stop="preview">
				<u--image radius="4" :showLoading="true" :src="getMediaSource" width="100%" height="300rpx"
					mode="aspectFill"></u--image>
				<image v-if="isVideo" class="play_icon" src="../../../static/images/chating_message_video_play.png" />
				<text v-if="isVideo" class="video_duration">{{ getDuration }}</text>
			</view>

			<view class="notify_text_wrap">
				<text class="notify_text">{{ notifyContent.text }}</text>
			</view>
		</view>

		<view v-if="showFooter" class="card_footer">
			<view class="line"></view>
			<view class="footer_row">
				<text class="footer_text">查看详情</text>
				<text class="footer_arrow">></text>
			</view>
		</view>
	</view>
</template>

<script>
import { myPreview } from '../../../util/preview';
import MyAvatar from '../../../components/MyAvatar/index.vue';
import { formatMessageTime, secFormat } from '../../../util/imCommon';

const NotificationMixTypes = {
	Text: 0,
	TextAndImage: 1,
	TextAndVideo: 2,
	TextAndFile: 3
};

export default {
	name: 'NotifyMessageRender',
	components: {
		MyAvatar
	},
	props: {
		source: Object
	},
	data() {
		return {};
	},
	computed: {
		notifyContent() {
			let notificationContent = {};
			try {
				notificationContent = JSON.parse(this.source.notificationElem.detail);
			} catch (e) {
				//TODO handle the exception
			}
			return notificationContent;
		},
		notifyTitle(){
			let title ="";
			try {
				 let detail = JSON.parse(this.source.notificationElem.detail);
				 const ex=JSON.parse(detail.ex);
				 if(ex.type==1){
					 title="订单通知";
				 }
				 else if(ex.type==2){
				   	title="药品订单通知";				 
				 }
				 else if(ex.type==3){
				 	title="套餐包订单通知"	;		 
				 }
				 else if(ex.type==4){
				 	title="问诊通知";							 
				 }
				 else if(ex.type==5){
				 	title="积分订单通知";						 
				 }
				 else if(ex.type==6){
				 	title="健康管理通知";							 
				 }
				 else if(ex.type==7){
				 	title="营销通知";					 
				 }
				 else{
					 title="课程通知";	
				 }
				 
			} catch (e) {
			    title=this.source.senderNickname;
			}
			return title;
		},
		isVideo() {
			return this.notifyContent.mixType === NotificationMixTypes.TextAndVideo;
		},
		hasExternalUrl() {
			return this.notifyContent.externalUrl;
		},
		getDuration() {
			if (!this.isVideo) {
				return 0;
			}
			return secFormat(this.notifyContent.videoElem.duration);
		},
		formattedMessageTime() {
			return formatMessageTime(this.source.sendTime);
		},
		getMediaSource() {
			if (this.notifyContent.mixType === NotificationMixTypes.TextAndImage) {
				const picEl = this.notifyContent.pictureElem;
				return picEl.snapshotPicture?.url ?? picEl.sourcePicture?.url;
			}
			if (this.notifyContent.mixType === NotificationMixTypes.TextAndVideo) {
				const videoEl = this.notifyContent.videoElem;
				return videoEl.snapshotUrl;
			}
			return '';
		},
		canClick() {
			try {
				let detail = JSON.parse(this.source.notificationElem.detail);
				const ex = JSON.parse(detail.ex);
				return ex != null;
			} catch (e) {
				return false;
			}
		},
		showFooter() {
			return this.canClick || this.hasExternalUrl;
		}
	},
	methods: {
		toWebView() {
			uni.navigateTo({
				url: `/pages/common/webviewWrapper/index?url=${this.notifyContent.externalUrl}`
			});
		},
		preview() {
			if (this.notifyContent.mixType === NotificationMixTypes.TextAndVideo) {
				uni.navigateTo({
					url: `/pages/conversation/previewVideo/index?previewVideoUrl=${this.notifyContent.videoElem.videoUrl}&snapshotUrl=${this.notifyContent.videoElem.snapshotUrl}`
				});
				return;
			}
			if (this.notifyContent.mixType === NotificationMixTypes.TextAndImage) {
				const picEl = this.notifyContent.pictureElem;
				const url = picEl.SourcePicture?.Url ?? picEl.sourcePicture?.url;
				if (url) {
					myPreview(0, [url]);
				}
			}
		},
		clickItem() {
			if (this.hasExternalUrl) {
				this.toWebView();
				return;
			}
			let detail = JSON.parse(this.source.notificationElem.detail);
			const ex = JSON.parse(detail.ex);
			console.log("qxj clickItem detail", detail);
			if (ex != null) {
				if (ex.type == 4) { //问诊订单
					uni.navigateTo({
						url: "/pages/store/inquiryOrderDetails?orderId=" + ex.orderId
					});
				} else {
					uni.navigateTo({
						url: ex.path
					});

				}
			}

		},
		
	}
};
</script>

<style lang="scss" scoped>
.message_item {
	display: flex;
	flex-direction: column;
	margin: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);

	.card_header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 24rpx 0;

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

		.header_title {
			font-size: 30rpx;
			font-weight: 600;
			color: #333;
			margin-left: 16rpx;
		}

		.header_time {
			font-size: 24rpx;
			color: #999;
		}
	}

	.card_content {
		padding: 24rpx;

		.media_container {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			overflow: hidden;

			.play_icon {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 80rpx;
				height: 80rpx;
				transform: translate(-50%, -50%);
			}

			.video_duration {
				position: absolute;
				bottom: 10rpx;
				right: 10rpx;
				color: #fff;
				font-size: 24rpx;
				background-color: rgba(0, 0, 0, 0.5);
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
			}
		}

		.notify_text_wrap {
			.notify_text {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
			}
		}
	}

	.card_footer {
		padding: 0 24rpx 24rpx;

		.line {
			height: 1rpx;
			background-color: #f0f0f0;
			margin-bottom: 20rpx;
		}

		.footer_row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.footer_text {
				font-size: 28rpx;
				color: #333;
			}

			.footer_arrow {
				font-size: 28rpx;
				color: #999;
				font-family: monospace;
			}
		}
	}
}
</style>