beiliyou_user_app/pages_doctor/doctorOrderIM.vue

<template>
	 <view class="container">
	 		<view class="message-list" @tap="triggerClose"><TUI-message-list id="message-list" @finish="finish" ref="messageList" :conversation="conversation" /></view>
	 		<view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
	 			<video
	 				v-if="videoPlay"
	 				class="video-message"
	 				:src="videoMessage.payload.videoUrl"
	 				:poster="videoMessage.payload.thumbUrl"
	 				object-fit="cover"
	 				error="videoError"
	 				autoplay="true"
	 				direction="0"
	 			/>
	 		</view>
	 		<view v-if="showChat" class="message-input">
	 			<TUI-message-input id="message-input" ref="messageInput" :toUser="toUser" :conversation="conversation" @sendMessage="sendMessage" />
	 		</view>
	 	</view>
	 
</template>

<script>
	import {getTlsSig} from '@/api/common.js'
	import {getUserInfo} from '@/api/user'
	import {getImOrderDetail,pingOrder} from '@/api/doctorOrder.js'
	import TUIMessageList from './components/im/tui-chat/message-list/index';
	import TUIMessageInput from './components/im/tui-chat/message-input/index';
	export default {
		components: {
			TUIMessageList,
			TUIMessageInput,
		},
		data() {
			return {
				toUser:"",
				conversationName: '',
				conversation: {},
				messageList: [],
				showChat: true,
				conversationID: null,
				videoPlay: false,
				videoMessage: {},
				order:null,
				doctor:null,
				user:null,
				doctorId:null,
				orderId:null,
			}
		
		},
		created() {
			uni.$on('videoPlayerHandler', value => {
				this.videoPlay = value.isPlay;
				this.videoMessage = value.message;
			});
		},
		onLoad(option) {
			this.orderId=option.orderId;
			this.getImOrderDetail();
		},
		onShow() {
			uni.setStorageSync('orderId',this.orderId);
		},
		methods: {
			finish(){
				this.showChat=false
				uni.$emit('refreshDoctorOrder');
			},
			stopVideoHander() {
				this.videoPlay = false;
			},
			triggerClose() {
				if (this.showChat) {
					this.$refs.messageInput.handleClose();
				}
			},
			sendMessage(event) {
				// 将自己发送的消息写进消息列表里面
				this.$refs.messageList.updateMessageList(event.detail.message);
				console.log(event.detail.message);
				if(event.detail.message.type=="TIMCustomElem"){
					if(event.detail.message.payload.data=="evaluation"){
						//提交评价extension {"score":3,"comment":"q2"}
						var jsonObj=JSON.parse(event.detail.message.payload.extension)
						var data={orderId:this.order.orderId,pingStar:jsonObj.score,pingContent:jsonObj.comment}
						pingOrder(data).then(
							res => {
								if(res.code==200){
									uni.showToast({
										icon:'success',
										title: "评价成功",
									});
									
								}else{
									uni.showToast({
										icon:'none',
										title: res.msg,
									});
								}
							},
							rej => {}
						);
					}
				}
			},
			getUserInfo(){
				var that=this;
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.user=res.user;
								this.getTlsSig()
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			getTlsSig(){
				var that=this;
				var data={userId:'user'+this.user.userId}
				getTlsSig(data).then(
					res => {
						if(res.code==200){
							that.loginIm(res.data);
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			loginIm(sign){
				var that=this;
				uni.$TUIKit.login({
					userID: 'user'+that.user.userId,
					userSig: sign
				}).then((res) => {
					console.log("IM登录成功")
					setTimeout(function(){
						let promise = uni.$TUIKit.updateMyProfile({
						  nick: that.user.nickname,
						  avatar: that.user.avatar,
						  gender: uni.$TUIKitTIM.TYPES.GENDER_MALE,
						  selfSignature: '我的个性签名',
						  allowType: uni.$TUIKitTIM.TYPES.ALLOW_TYPE_ALLOW_ANY
						});
						promise.then(function(imResponse) {
						  console.log(imResponse.data); // 更新资料成功
						  that.setRead()
						  var conversation={conversationID:that.conversationID,type:uni.$TUIKitTIM.TYPES.CONV_C2C}
						  that.conversation = conversation;
						  that.$refs.messageList.getMessageList(conversation);
						  
						}).catch(function(imError) {
						  console.warn('updateMyProfile error:', imError); // 更新资料失败的相关信息
						});
					},1000);
					
				}).catch((error) => {
					 
				});
			},
			setRead(){
				var that=this;
				uni.$TUIKit.setMessageRead({
					conversationID:that.conversationID
				})
				.then(() => {
					
				});
				
				// uni.$TUIKit.getConversationProfile(that.conversationID).then(res => {
				// 	const { conversation } = res.data;
				// 	that.conversation = conversation;
				// 	console.log(that.conversation)
				// 	that.setData({
				// 		conversationName: this.getConversationName(conversation),
				// 		isShow: conversation.type === 'GROUP'
				// 	});
				// });
			},
			getImOrderDetail(){
				let data = {orderId:this.orderId};
				var that=this;
				getImOrderDetail(data).then(
					res => {
						if(res.code==200){
							 this.doctor=res.doctor;
							 this.order=res.order;
							 this.toUser="doctor"+this.doctor.doctorId;
							 this.conversationID='C2Cdoctor'+this.doctor.doctorId
							 uni.setNavigationBarTitle({
							 	title:'与'+this.doctor.doctorName+'医生聊天中'
							 })
							 this.getUserInfo();
							 
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			 
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}
	
	.tui-chatroom-navigatorbar {
		position: relative;
		/*top: 0;*/
		flex-shrink: 0;
		width: 750rpx;
		height: 176rpx;
		background-color: #006EFF;
	}
	
	.tui-chatroom-navigatorbar-back {
		position: absolute;
		width: 48rpx;
		height: 48rpx;
		left: 24rpx;
		bottom: 20rpx;
	}
	
	.conversation-title {
		position: absolute;
		width: 350rpx;
		height: 88rpx;
		line-height: 56rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		z-index: 100;
		bottom: 0;
		left: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.message-list {
		flex: 1;
		width: 100vw;
		overflow-y: scroll;
	}
	
	.message-input {
		flex-shrink: 0;
		width: 100%;
	}
	
	.calling {
		position: fixed;
		z-index: 199;
		top: 0;
		/*  #ifdef  H5  */
		top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top));
		/*  #endif  */
		bottom: 0;
		right: 0;
	}
	
	.group-profile {
		top: 176rpx;
		left: 0;
		z-index: 1111
	}
	
	.container-box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.video-message {
		width: 90vw;
		height: 300px;
	}

</style>