h5-sugarpark/src/views/chatting/chatting.vue

<template>
	<div class="container">
		<div ref="topnav" class="topnav flex-start">
			<div class="nav-item flex-center" @click="back">
				<img :src="`${assetsUrl}back.png`" mode="widthFix" class="nav-img"></img>
			</div>
			<div class="nav-center flex-center">
				<div class="nav-text font28 fw600">
					{{userInfo.nick}}
				</div>
				<div class="nav-tip font20 fw400" >
					<text></text>{{onlineState}} · {{userInfo.distance}}
				</div>
			</div>
			
			<div class="nav-item"></div>
		</div>
		<div class="message-list" ref="msglist" :style="{'height': `${scrollHeight}px`,'transform':`translateY(${(showActionIndex===0||showActionIndex===3)?-200:0}px)`}">
			<div class="no-message" v-if="isCompleted">没有更多啦</div>
			<div v-for="(item,index) in messageList" :key="index" class="t-message">
				<div v-if="conversation.type !== '@TIM#SYSTEM'" :id="item.ID">
					<div class="t-message-item">
<!-- 						<TUI-TipMessage v-if="item.type === 'TIMGroupTipElem'" :message="item"></TUI-TipMessage> -->
						<div v-if="item.type !== 'TIMGroupTipElem'" :class="item.flow === 'out'||(item.flow === 'in'&&item.payload.data&&JSON.parse(item.payload.data).type===99) ? 't-self-message' : 't-recieve-message'">
							<img
								class="t-message-avatar"
								v-if="(item.flow === 'in'&&item.type !== 'TIMCustomElem')||(item.flow === 'in'&&(item.payload.data&&JSON.parse(item.payload.data).type!==99))"
								:src="item.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'"
							></img>
							<div class="read-receipts" v-if="conversation.type === 'C2C' && item.flow === 'out'">
								<div v-if="item.isPeerRead" class="font24">已读</div>
								<div v-else class="font24">未读</div>
							</div>
							<div>
								<TextMessage v-if="item.type === 'TIMTextElem'" :message="item" :isMine="item.flow === 'out'"></TextMessage>
								<ImageMessage v-if="item.type === 'TIMImageElem'" :message="item" :isMine="item.flow === 'out'"></ImageMessage>
								<VideoMessage v-if="item.type === 'TIMVideoFileElem'" :message="item" :isMine="item.flow === 'out'" @videoPlayerHandler="videoPlayerHandler"></VideoMessage>
								<AudioMessage v-if="item.type === 'TIMSoundElem'" :message="item" :isMine="item.flow === 'out'"></AudioMessage>
							</div>
							<img
								class="t-message-avatar"
								v-if="item.flow === 'out'"
								:src="item.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'"
							></img>
							<!-- <img
								class="t-message-avatar"
								v-if="item.flow === 'in'&&(item.payload.data&&JSON.parse(item.payload.data).type!==99)"
								:src="mineUserInfo.icon || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'"
							></image> -->
						</div>
					</div>
				</div>
				<div v-else :id="item.ID" :data-value="item.ID"><TUI-SystemMessage :message="item"></TUI-SystemMessage></div>
			</div>
		</div>
		<div class="talk-box" ref="talkbox" @touchmove="prevent()">
			<div class="input-box flex-between">
				<input type="text" class="input" confirm-type="send" placeholder="请输入消息…" v-model="inputText" placeholder-style="color:#7D7DA4 ;font-size:24rpx" @confirm="sendTextMessage">
				<div class="input-btn font22 fw400" @click="sendTextMessage">
					发送
				</div>
			</div>
			<div class="action-box flex-between">
				<img :src="`${assetsUrl}talk-voice.png`" mode="aspectFit" class="act-img" @click="showActionPanel(0)"></img>
				<img :src="`${assetsUrl}talk-pic.png`" mode="aspectFit" class="act-img" @click="showActionPanel(1)"></img>
				<img :src="`${assetsUrl}talk-pos.png`" mode="aspectFit" class="act-img" @click="showActionPanel(2)"></img>
				<img :src="`${assetsUrl}talk-emo.png`" mode="aspectFit" class="act-img" @click="showActionPanel(3)"></img>
			</div>
			<div class="action-panel" :style="{'padding-bottom':`${safeArea?34:0}px`}">
				<div class="voice-panel flex-center":style="{'height':`${showActionIndex===0?'200px':'0px'}`}">
					<div class="voice-text font22 fw400">
						{{voiceText}}
					</div>
					<img :src="`${assetsUrl}talk-voice-${isRecording?'delete':'open'}.png`" mode="aspectFill" class="voice-img"@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></img>
				</div>
				<div class="emoji-panel" :style="{'height':`${showActionIndex===3?'200px':'0px'}`}">
					<Emoji @enterEmoji="appendMessage"></Emoji>
				</div>
			</div>
		</div>
		<div v-if="videoPlay" class="container-box" @click.stop="stopVideoHander">
			<video
				v-if="videoPlay"
				class="video-message"
				:src="videoMessage.payload.videoUrl||videoMessage.videoUrl"
				error="videoError"
				autoplay="autoplay"
				controls="controls"/>
			<img :src="`${assetsUrl}popup-close-white.png`" class="close-video">
		</div>
		<input type="file" accept="image/png,image/jpg,image/jpeg,video/mp4" ref="uploadMedia" @change="fileUpload" class="hide-file">
	</div>
</template>

<script>
	import TextMessage from '../../components/Message/text-message/index.vue';
	import VideoMessage from '../../components/Message/video-message/index.vue';
	import AudioMessage from '../../components/Message/audio-message/index.vue';
	import ImageMessage from '../../components/Message/image-message/index.vue';
	import Emoji from '../../components/Emoji/emoji.vue'
	import {assetsUrl,hasSafeArea} from '../../util/index.js';
	import {getPolicy,computeSignature,getKey} from '@/util/oss.js';
	import Recorder from 'js-audio-recorder';
	
	export default {
		components: {
			Emoji,
			TextMessage,
			VideoMessage,
			AudioMessage,
			ImageMessage
		},
		data() {
			return {
				assetsUrl,
				safeArea:hasSafeArea(),
				scrollHeight:0,
				topbarOffsetHeight:60,
				topNavHeight:0,
				messageList:[],
				message:null,//消息实例
				onlineState:'',
				scrollRefreshing:false,
				scrollTriggered:true,
				conversation:'',
				conversationID: '',
				inputText:'',
				showSendBtn:false,
				showActionIndex:-1,
				recorder:null,
				voiceText:'按住说话，松手发送',
				recordTimeTotal:60,//最大长度，30秒
				isRecording:false,
				canSend:false,
				startPoint:0,
				videoPlay: false,
				videoMessage: {},
				isCompleted:false,//是否加载完毕所有消息
				
			}
		},
		watch:{
			conversation: {
				handler: function(newVal) {//发送消息不进行全部拉取
					if (newVal&&newVal.conversationID&&!this.isSend) {
						this.conversation=newVal;
						this.getMessageList(newVal);
					};
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			userInfo(){
				return JSON.parse(localStorage.getItem('otherInfo'))
			}
		},
		created(){
			this.recorder = new Recorder({
				sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
				sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
				numChannels: 1, 
			});
		},
		mounted() {
			this.$on('videoPlayerHandler', value => {
				console.log(value);
				this.videoPlay = value.isPlay;
				this.videoMessage = value.message;
			});
			this.conversationID=this.$route.params.conversationid;
			console.log('conversationID:',this.conversationID)
			this.$TUIKit.setMessageRead({
				conversationID:this.conversationID
			})
			this.$TUIKit.getConversationProfile(this.conversationID).then(res => {
				const { conversation } = res.data;
				this.conversation = conversation;
			});
			this.$TUIKit.on(this.$TUIKitEvent.MESSAGE_RECEIVED, this.$onMessageReceived, this);
			this.$TUIKit.on(this.$TUIKitEvent.MESSAGE_READ_BY_PEER, this.$onMessageReadByPeer, this);
			this.getMessageList(this.conversation);
			if(this.userInfo.lastActiveTime===0||this.userInfo.online){
				this.onlineState='在线';
			}
			else if(this.userInfo.lastActiveTime<30&&!this.userInfo.online){
				this.onlineState='刚刚';
			}
			else{
				this.onlineState='离线';
			}
			
		},
		// destroyed() {
		// 	this.$TUIKit.off(this.$TUIKitEvent.MESSAGE_RECEIVED, this.$onMessageReceived);
		// },
		methods: {
			videoPlayerHandler(value){
				console.log(value);
				this.videoPlay = value.isPlay;
				this.videoMessage = value.message;
			},
			stopVideoHander() {
				console.log('yes')
				this.videoPlay = false;
			},
			back(){
				this.$router.back();
			},
			prevent(){
				return false;
			},
			
			/**
			 * 计算scroll高度
			 */
			computedScollviewHeight() {
				this.scrollHeight=window.screen.height-this.$refs.talkbox.offsetHeight-this.$refs.topnav.offsetHeight;
				this.scrollToBottom();
				
				
			},
			scrollToBottom(){
				this.$nextTick(()=>{
					this.$refs.msglist.scrollTop = 99999;
				})
			},
			/**
			 * 推荐下拉刷新、加载更多
			 */
			scrollRefresh(){
				if (this.scrollRefreshing) 
				{
					return;
				}
				this.scrollRefreshing = true;
				setTimeout(() => {
					this.scrollTriggered = false;
					this.scrollRefreshing = false;
				}, 1000);
				this.isLoadPreData=true;
			
			},
			scrollRestore() {this.scrollTriggered = true;},
			showActionPanel(index){
				if(this.showActionIndex===index){
					this.showActionIndex=-1;
				}
				else{
					switch(index){
						case 0:
							this.showActionIndex=index;
							
						break;
						case 1:
							this.showActionIndex=-1;
							this.$refs.uploadMedia.click();
						break;
						case 2:
							
						break;
						case 3:
							this.showActionIndex=index;
						break;
					}
				}
				this.scrollToBottom();
			},
			fileUpload(e){
				console.log(e.target.files[0]);
				let file=e.target.files[0];
				if(file.type==='video/mp4'){
					const message = this.$TUIKit.createVideoMessage({
						to: String(this.userInfo.id),
						conversationType: this.conversation.type,
						payload: {
							file: file
						},
						onProgress:event=>{}
					});
					this.$sendTIMMessage(message);
				}
				else{
					const message = this.$TUIKit.createImageMessage({
						to: String(this.userInfo.id),
						conversationType: this.conversation.type,
						payload: {
							file: file
						},
						onProgress:event=>{}
					});
					this.$sendTIMMessage(message);
				}
				
				
				// this.$api.public.aliossToken({}).then(result=>{
				// 	const client=new this.$oss({
				// 		region: 'oss-cn-qingdao',
				// 		accessKeyId: result.data.accessKeyId,
				// 		accessKeySecret: result.data.accessKeySecret,
				// 		stsToken: result.data.securityToken,
				// 		bucket: 'zhenyanapp-gen',
				// 		refreshSTSToken: async () => {
				// 			const {data: res} = await this.$api.public.aliossToken({})
				// 			return {
				// 				accessKeyId: res.data.accessKeyId, // 自己账户的accessKeyId或临时秘钥
				// 				accessKeySecret: res.data.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
				// 				stsToken: res.data.securityToken, //  从STS服务获取的安全令牌（SecurityToken）。
				// 			}
				// 		},
				// 		refreshSTSTokenInterval: 3600 * 1000
				// 	});
				// 	client.put(getKey(this.ext),file).then(succ=>{
						
				// 	}).catch(err=>{
				// 		this.$toast.clear();
				// 		this.$toast('上传失败')
				// 	})
				// })
			},
			appendMessage(e) {
				this.inputText+=e.detail.message;
			},
			handleLongPress(e) {
				this.recorder.start().then(()=>{
					this.startPoint=e.touches[0];
					this.voiceText='正在录音,上划可取消';
					this.isRecording=true;
					this.recordTime=0;
					this.recordTimer = setInterval(() => {
						this.recordTime++;
						if(this.recorTime>=this.recordTimeTotal){
							this.recorder.stop();
							clearInterval(this.recordTimer);
							this.recordTimer=null;
						}
					}, 1000);
				}).catch(err=>{
					console.log(err);
				})
				
			},
			handleTouchStart(e){
				this.timeOutEvent = setTimeout(()=> {
					this.handleLongPress(e);
				}, 500); 
				return false;
			},
			// 录音时的手势上划移动距离对应文案变化
			handleTouchMove(e) {
				if (this.isRecording) {
					if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 100) {
						this.voiceText='松开手指，取消发送';
						this.canSend=false;
					} else if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 20) {
						this.voiceText='上划可取消';
						this.canSend=true;
					} else {
						this.voiceText='抬起停止';
						this.canSend=true;
					}
				}
			},
			// 手指离开页面滑动
			handleTouchEnd() {
				this.isRecording=false;
				this.voiceText='按住说话，松手发送';
				let voiceFile=this.recorder.getPCMBlob();
				console.log(voiceFile)
			},
			sendTextMessage() {
				const to = String(this.userInfo.id);
				const text =this.inputText;
				const message = this.$TUIKit.createTextMessage({
					to,
					conversationType: this.conversation.type,
					payload: {
						text
					}
				});
				this.inputText='';
				this.$sendTIMMessage(message);
			},
			$sendTIMMessage(message) {
				this.$TUIKit.sendMessage(message).then((res) => {
					this.isSend=true;
					this.messageList.push(message);
					this.$nextTick(() => {
					    this.$refs.msglist.scrollTop = this.$refs.msglist.scrollHeight;
					})
				}).catch((error) => {
					console.log(error)
				})
			},
			getMessageList(conversation) {
				console.log(conversation)
				if (!this.isCompleted) {
					this.$TUIKit
						.getMessageList({
							conversationID: this.conversationID,
							nextReqMessageID: this.nextReqMessageID,
							count: 15
						})
						.then(res => {
							const { messageList } = res.data; // 消息列表。
							console.log(res)
							this.nextReqMessageID = res.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
							this.isCompleted = res.data.isCompleted; // 表示是否已经拉完所有消息。
							this.messageList = [...messageList, ...this.messageList];
							this.$handleMessageRender(this.messageList, messageList);
							this.computedScollviewHeight();
						});
				}
			},
			// 消息已读更新
			$onMessageReadByPeer() {
				this.messageList=this.messageList
			},
			// 收到的消息
			$onMessageReceived(value) {
				this.isSend=true;
				this.messageList.push(value.data[0]);
				this.scrollToButtom();
			},
			
			// 历史消息渲染
			$handleMessageRender(messageList) {
				if (messageList.length > 0) {
					this.messageList=messageList;
					setTimeout(()=>{
						this.$nextTick(() => {
							//进入页面滚动到底部
							
						});
					},500)
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../../public.scss";
.hide-file{
	position: fixed;
	left: 1000px;
	top: 1000px;
}
.container{
	width: 100vw;
	height: 100vh;
	background-color: $bgcolor1;
	position: relative;
	overflow: hidden;
	.topnav {
		padding: 0 5px;
		position: fixed;
		height: 60px;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 100;
		background-color: $bgcolor1;
		.nav-item{
			width: 20px;
			height: 20px;
			padding:10px;
			margin-left: 16rpx;
			
			.nav-img{
				width: 20px;
				height: 20px;
			}
		}
		.nav-center{
			flex: 1;
			flex-direction: column;
			.nav-text{
				
				color: $fontcolor5;
				height: 20px;
				text-align: center;
			}
			.nav-tip{
				color:$fontcolor2;
			}
		}
		
	}
	.message-list{
		transition: height .3s;;
		padding-top: 60px;
		overflow: auto;
		
	}
	.talk-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		padding-top: 8px;
		background-color: $bgcolor1;
		.input-box{
			margin: 0px 16px;
			height: 40px;
			border-radius: 40px;
			background-color: $bgcolor4;
			padding: 0 12px;
			.input{
				width: 100%;
				height:95%;
				color: #ffffff;
				font-size: 11px;
				background-color: $bgcolor4;
			}
			.input-btn{
				background-color: $primary;
				color: #ffffff;
				border-radius: 8px;
				height: 28px;
				line-height: 28px;
				width: 60px;
				text-align: center;
				
			}
		}
		.action-box{
			padding: 0px 0px 10px 0px;
			margin: 0 45px;
			margin-top: 18px;
			.act-img{
				width: 28px;
				height: 28px;
			}
		}
		.action-panel{
			width: 100vw;
			.voice-panel{
				overflow: hidden;
				transition: height .3s;
				flex-direction: column;
				.voice-text{
					color: #7D7DA4;
					text-align: center;
					
				}
				.voice-img{
					width: 100px;
					height: 100px;
					margin-top: 20px;
				}
			}
			.emoji-panel{
				transition: height .3s;
			}
		}
	}
	.container-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width:100vw;
		height:100vh;
		z-index:3000;
		background-color: rgba(0, 0, 0, 0.5);
		.video-message {
			width: 100vw;
			height: 100vh;
			object-fit: cover;
		}
		.close-video{
			position: absolute;
			right: 30px;
			top: 30px;
			background-color: rgba(0, 0, 0, 0.2);
			width: 20px;
			height: 20px;
			border-radius: 50px;
			padding: 10px;
		}
	}
}
.t-message-item {
	/*max-width: 60vw;*/
	padding: 8px 0;
}

.t-recieve-message {
	display: flex;
	flex-direction: row;
	justify-items: flex-end;
	align-items:flex-start;
	width: 100vw;
}

.t-message-avatar {
	margin-left: 10px;
	margin-right: 6px;
	border-radius: 5px;
	width: 40px;
	height: 40px;
}

.t-self-message {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	/*align-items: center;*/
	width: 100vw;
}

.t-self-message-body {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	outline: none;
}

.t-recieve-message-body {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	outline: none;
	/*background: #F8F8F8;*/
	border-radius: 2px 10px 10px 10px;
	margin-left: 4px;

}

.read-receipts {
	line-height: 42px;
	height: 42px;
	font-size: 12px;
	color: #6e7981;
	margin-right: 10px
}

.no-message {
	text-align: center;
	width: 100%;
	font-size: 12px;
	color: #a5b5c1;
	height: 30px;
	line-height: 30px;
}

</style>