demingshangjia/pages/messages/privateChat.vue

<template>
	<div class="chatInterface">
		<div class="chat-scroll-container">
			<scroll-view ref="myScroll" scroll-y="true" class="scroll-view" :scroll-into-view="contentPosition">
				<div :class="[allHistoryLoaded ? 'top gray' : 'top']" @click="loadMoreHistoryMessage">
					<span class="description">{{allHistoryLoaded ? '已经没有更多的历史消息' : '点击加载更多历史消息'}}</span>
				</div>
				<!--已经收到的消息-->
				<div v-for="(message, key) in messages || []"
					 :id="'message_' + message.timestamp"
					 :key="message.timestamp"
					 class = "message-item"
					 :class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
					<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
						 v-if="message.senderId != (currentUser && currentUser.uuid)">
						<image :src="friend.avatar" ></image>
					</div>
					<div class="avatar" v-else>
						<image :src="currentUser.avatar"></image>
					</div>
					<div class="content">
						<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
						<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url" :data-url="message.payload.url" @click="showImageFullScreen" mode="widthFix" @load="scrollToBottom"></image>
						<div class="video-snapshot"  v-if="message.type == 'video'" :data-url="message.payload.video.url" @click="playVideo">
							<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
							<div class="video-play-icon"></div>
						</div>
						<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
					</div>
				</div>
                <!--发送中的消息-->
				<div v-for="(message, index) in pendingMessages || []"
					 :key="index"
					 :id="'pendingMessage_' + index"
					 class = "message-item"
					 :class="{'self' : message.senderId == (currentUser && currentUser.uuid)}">
					<div :class="friend.online ? 'avatar' : 'avatar offline-gray'"
						 v-if="message.senderId != (currentUser && currentUser.uuid)">
						<image :src="friend.avatar"></image>
					</div>
					<div class="avatar" v-else>
						<image :src="currentUser.avatar"></image>
					</div>
					<div class="content">
						<b class="pending"></b>
						<span class="text-content" v-if="message.type =='text'">{{message.payload.text}}</span>
						<image class="image-content" v-if="message.type == 'image'" :src="message.payload.url"  mode="widthFix" @load="scrollToBottom"></image>
						<div v-if="message.type == 'video'" class="video-snapshot">
							<image :src="message.payload.thumbnail.url" mode="aspectFit" @load="scrollToBottom"></image>
							<div class="video-play-icon"></div>
						</div>
						<GoEasyAudioPlayer v-if="message.type =='audio'" :src="message.payload.url" :duration="message.payload.duration" />
					</div>
				</div>
			</scroll-view>
		</div>
		<div class="action-box" v-if="!video.visible">
			<div class="action-top">
				<div :class="[audio.visible ? 'record-icon record-open':'record-icon']" @click="switchAudioKeyboard"></div>
				<div class="record-input" @longpress="onRecordStart" @touchend="onRecordEnd" v-if="audio.visible" >{{audio.recording ? '松开发送' : '按住录音'}}</div>
				<div class="message-input" v-else>
					<input type="text" placeholder="发送消息" v-model="content">
				</div>
				<div class="file-icon img-video" @click="sendImage"></div>
				<div class="file-icon" @click="sendVideo"></div>
				<span class="send-message-btn" @click="sendMessage">发送</span>
			</div>
		</div>
		<div class="record-loading" v-if="audio.recording"></div>
		<video style="width:100%;height: 100%" :src="video.url" v-if="video.visible" id="videoPlayer" autoplay="true" @fullscreenchange="onVideoFullScreenChange"  @play="onVideoPlayStart"></video>
	</div>
</template>

<script>
	import GoEasyAudioPlayer from "../../components/GoEasyAudioPlayer/GoEasyAudioPlayer";
	const recorderManager = uni.getRecorderManager();
	export default {
		name: "privateChat",
		components : {
			GoEasyAudioPlayer,
		},
		data() {
			return {
				//聊天文本框
				content: '',
				friend: null,
				currentUser: null,
				//已经接收到的消息
				messages: [],
				//正在发送中的消息
				pendingMessages : [],
				//已经加载完所有历史消息
				allHistoryLoaded: false,

				contentPosition : '',

				audio : {
					//语音录音中
					recording : false,
					//录音按钮展示
					visible : false
				},
				video : {
					visible : false,
					url : '',
					context : null
				}
			}
		},
		watch : {
			//每当新增了发送中的消息，都滑动到底部
			pendingMessages(){
				this.scrollToBottom()
			}
		},
		onReady () {
			this.video.context = uni.createVideoContext('videoPlayer');
		},
		onLoad(options) {
			if(!this.imService.currentUser){
				uni.navigateTo({
					url : '../login/login'
				});
			}
			//对话数据
			this.friend = JSON.parse(options.id);
			this.currentUser = this.imService.currentUser;
			let privateMessages = this.imService.getPrivateMessages(this.friend.uuid);
			this.imService.uid = this.friend.uuid;
			this.messages = privateMessages.sentMessages;
			this.pendingMessages = privateMessages.pendingMessages;

			uni.setNavigationBarTitle({
				title : this.friend.name
			});
			setTimeout(() => {
				uni.setNavigationBarColor({
					backgroundColor : '#FF780F',
					frontColor : '#333333'
				});
			}, 10);

			this.initialListeners();

			//每次进入聊天页面，总是滚动到底部
			this.scrollToBottom()

		},
		onUnload() {
			//退出聊天页面之前，清空页面传入的监听器
			this.imService.onNewPrivateMessageReceive =  (friendId, message)=> {};
			this.imService.onPrivateHistoryLoad = (friendId, messages) =>{};
			//将未读消息数清零
			this.imService.resetFriendUnReadMessage(this.friend);
			this.imService.uid = 0;
		},
		methods: {
			initialListeners () {
				//传入监听器，收到一条私聊消息总是滚到到页面底部
				this.imService.onNewPrivateMessageReceive =  (friendId, message)=> {
					if (friendId == this.friend.uuid) {
						//收到新消息，是滚动到最底部
						this.scrollToBottom()
					}
				};

				//传入监听器，完成一次私聊历史加载时，如果加载结果为空，显示没有更多消息
				this.imService.onPrivateHistoryLoad = (friendId, messages) =>{
					if (messages.length == 0) {
						//灰色，就不能点击了
						this.allHistoryLoaded = true
					}
				};
				// 录音监听器
				this.initRecorderListeners();
			},
			initRecorderListeners(){
				var self = this;
				// 监听录音开始
				recorderManager.onStart(function(){
					self.audio.recording = true;
				});

				//录音结束后，发送
				recorderManager.onStop(function(res){
					self.audio.recording = false;
					self.imService.sendPrivateAudioMessage(self.friend.uuid, res)
				});

				// 监听录音报错
				recorderManager.onError(function(res){
					console.log("录音报错：",res);
				})
			},
			sendMessage() {//发送消息
				if (this.content.trim() != '') {
					this.imService.sendPrivateTextMessage(this.friend.uuid, this.content);
					let that = this
					setTimeout(function(){
						that.scrollToBottom();
					},500)
				}
				this.content = "";
			},
			loadMoreHistoryMessage() {//历史消息
				let lastMessageTimeStamp = Date.now();
				let lastMessage = this.messages[0];
				if (lastMessage) {
					lastMessageTimeStamp = lastMessage.timestamp;
				}
				this.imService.loadPrivateHistoryMessage(this.friend.uuid, lastMessageTimeStamp);
			},
			onRecordStart () {
				try{
					recorderManager.start();
				}catch(e){
					console.log("e:",e);
					uni.showModal({
						title: '录音错误',
						content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
					});
				}
			},
			onRecordEnd () {
				try{
					recorderManager.stop();
				}catch(e){
					console.log("e:",e);
					uni.showModal({
						title: '录音错误',
						content : '请在app和小程序端体验录音，Uni官方明确H5不支持getRecorderManager, 详情查看Uni官方文档'
					});
				}
			},
			sendVideo () {//发送文件
				uni.chooseVideo({
					success : (res) => {
						console.log(res)
						this.imService.sendPrivateVideoMessage(this.friend.uuid, res)
					}
				})
			},
			sendImage() {
				uni.chooseImage({
					count :1,
					success :(res) => {
						console.log(res)
						this.imService.sendPrivateImageMessage(this.friend.uuid,res);
					}
				})
			},
			showImageFullScreen (e) {
				var imagesUrl = [e.currentTarget.dataset.url];
				uni.previewImage({
					urls: imagesUrl
				});
			},
			//语音录制按钮和键盘输入的切换
			switchAudioKeyboard() {
				this.audio.visible = !this.audio.visible;
			},
			playVideo (e) {
				this.video.visible = true;
				this.video.url =e.currentTarget.dataset.url;
			},
			onVideoPlayStart () {
				this.video.context.requestFullScreen({
					direction : 0
				});
			},
			onVideoFullScreenChange (e) {
				//当退出全屏播放时，隐藏播放器
				if(this.video.visible && !e.detail.fullScreen){
				    this.video.visible = false;
				    this.video.context.stop();
				}
			},
			scrollToBottom () {
				this.$nextTick(() => {
					if(this.messages && this.messages.length !=0){
						this.contentPosition = 'message_' + (this.messages[this.messages.length-1].timestamp || '');
					}
				})
			}
		}
	}
</script>

<style >
	page {
		height: 100%;;
	}
	uni-page-body, uni-page-refresh  {
		height: 100%;;
	}
	.chatInterface{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}
	.chatInterface .chat-scroll-container{
		overflow: hidden;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 100%;
		display: flex;
		flex: 1;
	}
	.chatInterface .scroll-view{
		flex: 1;
		overflow: auto;
		box-sizing: border-box;
	}
	.chatInterface .top{
		font-size: 20rpx;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		color: blue;
	}
	.chatInterface .top .description{
		/* text-decoration: underline; */
	}

	.chatInterface .message-item{
		/* max-height: 400rpx; */
		margin-top: 40rpx;
		overflow: hidden;
	}
	.chatInterface .avatar{
		width: 80rpx;
		height: 80rpx;
		margin-right:20rpx ;
	}
	.chatInterface .message-item.self .avatar{
		margin-left: 20rpx;
	}
	.chatInterface .message-item .avatar image{
		width: 100%;
		height: 100%;
	}

	.chatInterface .content{
		font-size: 34rpx;
		line-height: 44rpx;
		/* max-height: 400rpx; */
		display: flex;
		align-items: center;
		justify-content: right;
	}
	.chatInterface .content .image-content{
		padding: 16rpx;
		border-radius: 12rpx;
		width: 300rpx;
		height: 300rpx;
	}
	.chatInterface .content .text-content{
		padding: 16rpx;
		border-radius: 12rpx;
		max-width: 520rpx;
	}
	.chatInterface .content .pending{
		background: url("../../static/images/pending.gif") no-repeat center;
		background-size: 30rpx;
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.chatInterface .action-box{
		display: flex;
		height: 80rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		backdrop-filter: blur(0.27rpx);
		width: 100%;
	}
	.chatInterface .action-top{
		display: flex;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		backdrop-filter: blur(0.27rem);
		height: 80rpx;
		width: 100%;
	}
	.chatInterface .record-icon{
		font-size: 32rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: url("../../static/images/record-appearance-icon.png") no-repeat center;
		background-size: 50%;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .action-top .file-icon{
		background: url("../../static/images/vedio.png") no-repeat center;
		background-size: 70%;
		color: #9D9D9D;
		position: relative;
		width:80rpx;
		height: 80rpx;
		line-height: 80rpx;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .record-icon.record-open{
		background: url("../../static/images/jianpan.png") no-repeat center;
		background-size: 70%;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.chatInterface .action-top .img-video{
		background: url("../../static/images/file.png") no-repeat center;
		background-size: 74%;
	}
	.chatInterface .record-input{
		width: 480rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #cccccc;
		color: #ffffff;
		text-align: center;
	}
	.chatInterface .message-input{
		border-radius: 12rpx;
	}
	.chatInterface .message-input input{
		width: 440rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.chatInterface .send-message-btn{
		font-size: 32rpx;
		width: 80rpx;
		line-height: 80rpx;
	}
	.record-loading{
		position: absolute;
		top:50%;
		left: 50%;
		width: 300rpx;
		height: 300rpx;
		margin: -150rpx -150rpx;
		background: #262628;
		background: url("../../static/images/recording-loading.gif") no-repeat center;
		background-size: 100%;
		border-radius: 40rpx;
	}
	.chatInterface .img-layer{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000000;
		z-index: 9999;
		padding: 6rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.chatInterface .img-layer uni-image {
		height: 100%!important;
	}
	.chatInterface .img-layer {
		height: 100%!important;
		width: 100%!important;
	}


	.chatInterface .content .file-content .file-info{
		height: 0.5rem;
		width: 1.5rem;
		display: flex;
		flex-direction: column;
		padding: 0 0.1rem;
	}
	.chatInterface .content .file-content .file-info .title{
		height: 0.3rem;
		line-height: 0.3rem;
		overflow: hidden;
		font-size: 0.16rem;
		padding: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
		color: #262628;
		text-align: left;
	}
	.chatInterface .content .file-content .file-info .size{
		font-size: 0.14rem;
		height: 0.2rem;
		line-height: 0.2rem;
		padding: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		color: #999999;
		text-align: left;
	}
	.chatInterface .video-snapshot{
		position: relative;
		height: 300rpx;
		max-width: 400rpx;
		background: #000000;
	}
	.chatInterface .video-snapshot image{
		max-height: 300rpx;
		max-width: 400rpx;
	}
	.chatInterface .video-snapshot video{
		max-height: 300rpx;
		max-width: 400rpx;
	}

	.video-snapshot .video-play-icon{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background:url("../../static/images/play.png") no-repeat center;
		background-size: 100%;
		top:50%;
		left: 50%;
		margin:-20rpx;
	}
	 .chatInterface .avatar{
        overflow: hidden;
        float: left;
    }
    .chatInterface .avatar img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .chatInterface .content{
        float: left;
        overflow: hidden;
    }
    .chatInterface .content span{
        font-family: Source Han Sans CN;
        letter-spacing: -0.41px;
        color: #262628;
        background: #efefef;
        display: inline-block;
        word-break: break-all;
    }
    .chatInterface .message-item.self{
        margin-right: 0;
    }
    .chatInterface .message-item.self .avatar{
        margin-right: 0;
        float: right;
    }
    .chatInterface .message-item.self .content{
        text-align: right;
        float: right;
    }
    .chatInterface .message-item.self .content span{
        color: #ffffff;
        background:#FF780F;
        word-break: break-all;
        text-align: left;
		max-width: 520rpx;
    }
    .chatInterface .action-box{
        background: #FAFAFA;
        display: flex;
        align-content: center;
        align-items: center;
    }
    .chatInterface .message-input{
        background: #efefef;
        border: 0;
        outline: none;
    }

    .chatInterface .send-message-btn{
        flex-grow: 1;
        text-align: center;
        color: #95949A;
    }

    .chatInterface .member-layer{
        width:100%;
        height: 100%;
        background: #FFFFFF;
        top: 0;
        left: 0;
        position: absolute;
    }
    .member-layer .member{
        display: flex;
        flex-wrap: wrap;
    }

    .chatInterface .group-icon{
        position: absolute;
    }

    .chatInterface .gray{
        color: gray!important;
        text-decoration: none!important;
    }

</style>