MeetMateApp/pages/chat/detail.vue

<template>
	<view class="page-session" :style="{
			height,
		}" @touchmove="onTouchMove">
		<view class="header">
			<cl-topbar color="#ffffff" backgroundColor="transparent">
				<view class="cl-topbar__text" @click="toDetail()">
					<text class="cl-topbar__title">{{nickName}}</text>
				</view>

				<template slot="append">
					<template v-if="conversationType=='GROUP'">
						<image class="member-icon" src="../../static/sms/group_more.png" @tap="member"></image>
					</template>
					<template v-else>
						<view class="cl-topbar__icon" @tap="report">
							举报
						</view>
					</template>
				</template>
			</cl-topbar>
		</view>

		<progress :percent="percent" show-info stroke-width="3" v-if="progressShow" />

		<!-- 消息列表 -->
		<view class="message-list" @tap="onRetract">
			<scroll-view class="scroller" scroll-y scroll-with-animation :scroll-top="scroller.top"
				:upper-threshold="20" @scrolltoupper="refresh()">
				<!-- 加载更多 -->
				<view class="loadmore" v-if="loading">
					<cl-loadmore :finish="isCompleted" loading :divider="false"></cl-loadmore>
				</view>

				<!-- 内容块 -->
				<chat-message ref="message" :list="list" :conversationType="conversationType"></chat-message>
			</scroll-view>

			<!-- 录音弹窗 -->
			<cl-popup :visible.sync="voice.visible" direction="center" padding="0" border-radius="10rpx">
				<view class="popup-voice" :class="[
						{
							'is-cancel': voiceIsCancel,
						},
					]">
					<text class="popup-voice__time">{{ voice.duration | voice_duration }}</text>
					<text class="popup-voice__desc">松开发送，上滑取消</text>
				</view>
			</cl-popup>
		</view>

		<!-- 操作栏 -->
		<view class="opbar">
			<view class="main">
				<!-- 麦克风 -->
				<view class="icon">
					<text class="chat-iconfont icon-microphone" v-if="!op.isMicrophone" @tap="showMicrophone"></text>
					<text class="chat-iconfont icon-keyboard" @tap="hideMicrophone" v-else></text>
				</view>
				<!-- #ifndef H5 -->
				<!-- #endif -->

				<!-- 输入框 -->
				<view class="input">
					<button v-if="op.isMicrophone" class="press-btn" @longpress="onLongPress" @touchend="onRelease">
						{{ voice.visible ? "松开结束" : "按住说话" }}
					</button>
					<cl-input v-else v-model="value" confirm-type="send" confirm-hold fill :placeholder="placeholder"
						:cursor-spacing="10" :adjust-position="false" @focus="onFocus" @blur="onBlur"
						@confirm="onTextSend" @keyboardheightchange="onKeyBoardHeightChange"></cl-input>
				</view>

				<!-- 表情图标 -->
				<view class="icon">
					<text class="chat-iconfont icon-emoji" v-if="!op.isEmoji" @tap="showEmoji"></text>
					<text class="chat-iconfont icon-keyboard" v-else @tap="hideEmoji"></text>
				</view>

				<!-- 工具栏图标 -->
				<template v-if="value == ''">
					<view class="icon send">
						<text class="chat-iconfont icon-add-circle" v-if="!op.isTools" @tap="showTools"></text>
						<text class="chat-iconfont icon-subtract-circle" @tap="hideTools" v-else></text>
					</view>
				</template>
				<template v-else>
					<!-- 发送按钮 -->
					<view class="icon send">
						<text class="send-button" @tap="onTextSend">发送</text>
					</view>
				</template>
			</view>

			<view class="append">
				<!-- 工具栏 -->
				<chat-tools :visible="op.isTools" :userId="userID" :conversationType="conversationType"></chat-tools>

				<!-- 表情 -->
				<chat-emoji :visible="op.isEmoji" @select="onEmojiSelect"></chat-emoji>
			</view>
		</view>

		<!-- 视频弹窗 -->
		<cl-popup :visible.sync="video.visible" direction="center" force-update padding="0" border-radius="10rpx"
			@close="onVideoClose">
			<video id="video" autoplay :src="video.url" style="display: block"></video>
		</cl-popup>

		<member ref="member"></member>
	</view>
</template>

<script>
	import {
		debounce
	} from "../../uni_modules/cl-uni/utils";
	import ChatTools from "./components/tools";
	import ChatMessage from "./components/message";
	import ChatEmoji from "./components/emoji";
	import Member from "./components/member";

	// 录音设备
	const recorderManager = uni.getRecorderManager();

	// 平台
	const {
		platform
	} = uni.getSystemInfoSync();

	export default {
		components: {
			ChatTools,
			ChatMessage,
			ChatEmoji,
			Member,
		},

		data() {
			return {
				skey: '',
				page: 1,
				userInfos: [],
				placeholder: "",
				conversationID: "",
				conversationType: "",
				percent: 0,
				progressShow: false,
				firstLoad: true,
				isCompleted: false,
				nextReqMessageID: null,
				userID: 0,
				nickName: "",
				// 平台
				platform,
				// 输入框文本
				value: "",
				// 键盘高度
				keyBoardHeight: 0,
				// 聊天记录数据
				list: [],
				// 底部操作栏配置
				// list: [],
				op: {
					isMicrophone: false,
					isEmoji: false,
					isTools: false,
				},
				// 滚动条配置
				scroller: {
					top: 0,
					intoView: "",
				},
				// 视频配置
				video: {
					visible: false,
				},
				// 音频配置
				voice: {
					visible: false,
					duration: 0,
					timer: null,
					down: 0,
					move: 0,
				},
				// 加载进度
				loading: false,
			};
		},
		onLoad(option) {
			this.skey = option.skey || getApp().globalData.skey;
			this.userID = "8";
			this.nickName = "老杨";
			this.conversationID = "";
			this.conversationType = "C2C"; //GROUP,C2C
			//detail?userID=%25222%2522&nickName=%2522prk%2522&conversationID=%2522c2c_11%2522&conversationType=%2522C2C%2522
			//detail?userID=%25221%2522&nickName=%2522群%22522&conversationID=%2522GROUP_15%2522&conversationType=%2522GROUP%2522
			try {
				this.userID = JSON.parse(decodeURIComponent(option.userID));
				this.nickName = JSON.parse(decodeURIComponent(option.nickName));
				this.conversationID = JSON.parse(decodeURIComponent(option.conversationID));
				this.conversationType = JSON.parse(decodeURIComponent(option.conversationType));
				if (this.conversationType == "GROUP") {
					this.placeholder = "发布违规言论会被禁言哦~";
				}
				console.log("this.conversationID", this.conversationID);

				// this.TIM.setMessageRead(this.conversationID);

				if (this.conversationID != null && this.conversationID != "") {}
			} catch (e) {
				console.log("e", e)
			}
			this.getList();
			// this.getUserInfo();
			let that = this;
			// if (getApp().globalData.socket == null) {
			// 	getApp().globalData.socket = new wsRequest(
			// 		`wss://e.fan-quan.com/Gapi/ws`,
			// 		that.skey
			// 	);
			// }
			if (getApp().globalData.socket != null) {
				getApp().globalData.socket.getMessage(function(res) {
					console.log("res-c", res.data);
					let resdata = JSON.parse(res.data)
					// res-c {"seq":"reqBCb1Ov1rEi","cmd":"msg",
					// "response":{"code":200,"codeMsg":"Ok",
					// "data":{"target":"","type":"text",
					// "msg":"{\"mode\":\"text\",\"from\":1,\"avatar\":\"p\",\"payload\":{\"text\":\"222\"},\"create_time\":\"2024-10-05 19:49:26\"}","from":"1"}}}
					if (resdata.cmd == "msg") {
						// console.log("res-d", msgdata.mode + ";" + msgdata.payload.text);
					}
					// console.log("res-cmd", resdata.cmd);
				});
				console.log("detail-addgroup1");
				that.addGroup();
			}
			uni.$on('updateGroup', this.addGroup)
			uni.$on('messageUpdate', this.acceptMessage)
			uni.$on('sendMessage', this.sendMessage)
			uni.$on('messageSend', this.messageSend) //发送状态返回
			uni.$on('messageProgress', this.messageProgress)
		},
		computed: {
			// 计算屏幕高度
			height() {
				return this.keyBoardHeight > 0 ?
					`calc(100% - ${this.keyBoardHeight}px + env(safe-area-inset-bottom))` :
					"100%";
			},

			// 录音滑动是否取消
			voiceIsCancel() {
				return this.voice.move ? this.voice.down - this.voice.move > 50 : false;
			},
		},

		filters: {
			voice_duration(t) {
				return `00:${t < 10 ? `0${t}` : t}`;
			},
		},
		methods: {
			member() {
				// this.$refs.member.open(this.userID);
				uni.navigateTo({
					url: '/pages/chat/groupSetting?groupId=' + this.userID
				})
			},
			acceptMessage(message) {
				let msgdata = JSON.parse(message)
				this.list.push(msgdata)
				this.scrollToBottom();
				// for (let i = 0; i < message.length; i++) {
				// 	if (message[i].conversationID == this.conversationID) {
				// 		this.list.push(message[i]);
				// 		this.scrollToBottom();
				// 	}
				// }
			},
			addGroup() {
				let that = this;
				getApp().globalData.socket.send({
					cmd: "addGroup",
					data: {
						"uuid": getApp().globalData.uuid,
						"appId": 101,
						"userId": getApp().globalData.userId,
						"groupId": that.conversationID
					},
					success() {
						console.log("addGroup-succ", "ok");
					},
					fail(e) {
						console.log("addGroup-err", e);
					}
				});
			},
			async getList() {
				var offset = (this.page - 1) * 20;
				uni.request({
					url: this.$apiHost2 + '/Chat/msgList', //仅为示例，并非真实接口地址。
					data: {
						uuid: getApp().globalData.uuid,
						userID: this.userID,
						conversationID: this.conversationID,
						offset: offset
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log("this.conversationID", this.conversationID);
						console.log("----", res.data);
						if (res.data.list == undefined || res.data.list == null) {
							res.data.list = []
						}
						this.isCompleted = res.data.isCompleted;
						this.nextReqMessageID = res.data.nextReqMessageID;
						if (res.data.list.length > 0) {
							// this.is_no_data = 0;
						}
						if (this.firstLoad) {
							this.list = res.data.list;
							this.scrollToBottom();
						} else {
							// this.list = this.list.concat(res.data.list)
							this.list = [...res.data.list, ...this.list];
						}
						this.firstLoad = false;
						uni.stopPullDownRefresh();

						console.log("this.list", this.list);
						this.loading = false;
						this.page++;
						// this.setUserInfo();

					}
				});
				return;
				let res = await this.TIM.getMessageList(this.conversationID, this.nextReqMessageID);
				let messageList = res.data.messageList;
				this.isCompleted = res.data.isCompleted;
				this.nextReqMessageID = res.data.nextReqMessageID;

				for (let i = 0; i < messageList.length; i++) {
					messageList[i].create_time = this.timestampToTime(messageList[i].time);
					messageList[i].sex = "3";
				}

				if (this.firstLoad) {
					this.list = messageList;
					this.scrollToBottom();
				} else {
					this.list = messageList.concat(this.list);
				}

				this.firstLoad = false;
				uni.stopPullDownRefresh();

				this.loading = false;
				this.setUserInfo();
			},
			async getUserInfo() {
				// let [err, res] = await this.$http.get('Group/members', {
				// 	'id': this.userID,
				// 	'type': this.conversationType
				// });

				// if (!this.$http.errorCheck(err, res)) {
				// 	return;
				// }
				// this.userInfos = res.data.data;

				this.userInfos = [{
						id: 1,
						user_icon: "https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg",
						username: 'ab',
						sex: 1
					},
					{
						id: 2,
						user_icon: "https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg",
						username: 'cd',
						sex: 1
					}
				];
				this.setUserInfo();
			},
			setUserInfo() {
				if (this.list.length == 0 || this.userInfos.length == 0) {
					return
				}

				for (let i = 0; i < this.list.length; i++) {
					let fromID = this.list[i].from

					for (let j = 0; j < this.userInfos.length; j++) {
						if (fromID == this.userInfos[j].id) {
							this.list[i].avatar = this.userInfos[j].user_icon;
							this.list[i].sex = this.userInfos[j].sex;
							break;
						}
					}
				}

				this.list = this.list
				this.scrollToBottom();
			},
			toDetail() {
				return;
				if (this.conversationType == "C2C") {
					uni.navigateTo({
						url: "/pages/detail/index?uid=" + this.userID,
					});
				}
			},
			report() {
				setTimeout(() => {
					uni.showToast({
						title: '举报成功，我们会尽快进行处理!',
						icon: "none"
					});
				}, 500);
			},
			refresh() {
				this.loading = true;

				if (this.isCompleted) {
					return;
				}

				this.getList();
			},
			messageProgress(e) {
				this.percent = e * 100;

				if (e == 1) {
					this.progressShow = false;
				} else {
					this.progressShow = true;
				}
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				//var D = date.getDate() + ' ';
				var D = (date.getDate() + 1 < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				var h = date.getHours() + ':';
				var m = (date.getMinutes() + 1 < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ' ';
				var s = date.getSeconds();
				return M + D + h + m;
			},

			// 监听键盘高度
			onKeyBoardHeightChange(e) {
				this.keyBoardHeight = e.detail.height;
			},

			// 滑动监听
			onTouchMove(e) {
				if (this.voice.visible) {
					// 记录移动的位置
					this.voice.move = e.changedTouches[0].clientY;
				}
			},

			// 长按说话
			onLongPress(e) {
				// uni.showToast({
				// 	title: '待开放',
				// 	icon: "none"
				// });
				// return;
				// uni.authorize({
				// 	scope: 'scope.record',
				// 	success() {
				// 	    uni.getLocation()
				// 	}
				// });

				// 关闭已存在播放声音
				this.$refs["message"].voicePause();

				console.log("按下按钮了");

				this.$nextTick(() => {
					// 记录按下位置
					this.voice.down = e.touches[0].pageY;
					// 清空移动位置
					this.voice.move = 0;
					// 显示弹窗
					this.voice.visible = true;
					// 开始录音
					recorderManager.start({
						// duration: 60000,
						// sampleRate: 44100,
						// numberOfChannels: 1,
						// encodeBitRate: 192000,
						// format: "aac",
					});
					// 计数器
					this.voice.timer = setInterval(() => {
						if (this.voice.duration >= 60) {
							this.onRelease(e);
						} else {
							this.voice.duration += 1;
						}
					}, 1000);
				});
			},

			// 松开
			onRelease(e) {
				// 记录移动位置
				this.voice.move = e.changedTouches[0].clientY;
				let duration = this.voice.duration * 1000;

				console.log("松开按钮了");
				let that = this;
				// 暂停事件
				recorderManager.onStop((res) => {
					// 判断是否取消
					if (!this.voiceIsCancel) {
						res.duration = duration;
						res.size = 34271;
						console.log("res", res.tempFilePath);
						// this.TIM.sendAudioMessage(res, this.userID, this.conversationType);
						const uploadTask = uni.uploadFile({
							url: that.$apiHost + '/Xweb/upload_recorder',
							filePath: res.tempFilePath,
							formData: {
								'uuid': getApp().globalData.uuid,
								'duration': res.duration,
								'size': res.size
							},
							name: 'file', // 待确认
							// header: {
							// 	'Content-Type': 'multipart/form-data',
							// 	// 'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA=='

							// },
							success: function(uploadFileRes) {
								let resdata = JSON.parse(uploadFileRes.data)
								console.log('Success1:', resdata);
								console.log('Success2:', resdata.url);
								if (resdata.success == 'yes') {
									uni.$emit('sendMessage', {
										mode: 'voice',
										message: resdata.url
									})
								}
								// _self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId);
								// console.log('_self.imgsID:', _self.imgsID)
							},
							fail: function(uploadFileFail) {
								console.log('Error:', uploadFileFail.data);
							},
							complete: () => {
								console.log('Complete:');
							}
						});
					}
				});
				// 清除计时器
				clearInterval(this.voice.timer);
				// 暂停录音
				recorderManager.stop();
				// 关闭弹窗
				this.voice.visible = false;
				// 清空时常
				this.voice.duration = 0;
			},

			// 显示麦克风
			showMicrophone() {
				this.op.isMicrophone = true;
				this.hideTools();
				this.hideEmoji();
				this.hideKeyBoard();
			},

			// 隐藏麦克风
			hideMicrophone() {
				this.op.isMicrophone = false;
			},

			// 显示表情
			showEmoji() {
				this.op.isEmoji = true;
				this.hideTools();
				this.hideMicrophone();
				this.scrollToBottom();
			},

			// 隐藏表情
			hideEmoji() {
				this.op.isEmoji = false;
			},

			// 显示工具栏
			showTools() {
				this.op.isTools = true;
				this.hideEmoji();
				this.hideMicrophone();
				this.scrollToBottom();
			},

			// 隐藏工具栏
			hideTools() {
				this.op.isTools = false;
			},

			// 隐藏键盘
			hideKeyBoard() {
				this.keyBoardHeight = 0;
			},

			// 滑动到底部
			scrollToBottom: debounce(function() {
				this.$nextTick(() => {
					this.scroller.top = 2000000 + parseInt(Math.random() * 100);
				});
			}, 100),

			// 收起
			onRetract() {
				this.hideTools();
				this.hideEmoji();
			},

			// 聚焦
			onFocus() {
				this.hideEmoji();
				this.hideTools();
				this.scrollToBottom();
			},

			// 失焦
			onBlur() {
				this.hideKeyBoard();
			},

			// 发送消息
			onTextSend() {
				if (this.value) {
					uni.showLoading({})
					setTimeout(function() {
						uni.hideLoading()
					}, 5000)
					getApp().globalData.socket.send({
						cmd: "sendMsg",
						data: {
							"uuid": getApp().globalData.uuid,
							"appId": 101,
							"mode": "text",
							"userID": this.userID,
							"conversationID": this.conversationID,
							"conversationType": this.conversationType,
							"message": this.value
						}
					});
					// console.log('-v:', this.value)
					// uni.request({
					// 	url: this.$apiHost2 + '/Chat/sendMessage', //仅为示例，并非真实接口地址。
					// 	data: {
					// 		uuid: getApp().globalData.uuid,
					// 		userID: this.userID,
					// 		conversationID: this.conversationID,
					// 		conversationType: this.conversationType,
					// 		message: this.value
					// 	},
					// 	header: {
					// 		'content-type': 'application/json' //自定义请求头信息
					// 	},
					// 	success: (res) => {
					// 		console.log("----", res.data);
					// 		if (res.data.success == "yes") {
					// 			if (res.data.conversation_id != "") {
					// 				this.conversationID = res.data.conversation_id;
					// 			}
					// 		}


					// 	}
					// });
					// this.TIM.sendTextMessage(this.value, this.userID, this.conversationType);
					this.value = "";
				}
			},
			sendMessage(msg) { //发送图片
				getApp().globalData.socket.send({
					cmd: "sendMsg",
					data: {
						"uuid": getApp().globalData.uuid,
						"appId": 101,
						"mode": msg.mode,
						"userID": this.userID,
						"conversationID": this.conversationID,
						"conversationType": this.conversationType,
						"message": msg.message
					}
				});
			},
			messageSend(msg) {
				console.log("messageSend:", msg);
				uni.hideLoading()
				if (msg.code == 200) {
					if (msg.codeMsg != "") {
						this.conversationID = msg.codeMsg;
					}
				} else {
					getApp().globalData.socket.restart();
					uni.showToast({
						title: msg.codeMsg,
						icon: 'none'
					});
				}
			},

			hackMessage() {
				if (this.list.length > 0) {
					let item = JSON.parse(JSON.stringify(this.list[0]))
					item.avatar = "/static/logo.png";
					item._mode = "text";
					item.payload.text = "客服小姐姐正在赶来，请稍后~"
					item.from = "51"
					this.list.push(item)
				} else {
					this.list.push({
						avatar: "/static/logo.png",
						_mode: "text",
						payload: {
							text: "客服小姐姐正在赶来，请稍后~"
						},
						from: "51"
					})
				}
			},

			// 表情选择
			onEmojiSelect(e) {
				this.value = this.value + e;
			},


			// 追加数据到开头
			prepend(...data) {
				this.list.unshift(...data.filter(Boolean).reverse());
			},

			// 追加数据到结尾
			append(...data) {
				this.list.push(
					...data
					.map((e) => {
						e.animation = true;
						return e;
					})
					.filter(Boolean)
				);
				this.scrollToBottom();
			},

			// 关闭视频弹窗
			onVideoClose() {
				const video = uni.createVideoContext("video");
				video.pause();
			}
		},
	};
</script>

<style lang="scss">
	@import "../../static/css/iconfont.scss";

	page {
		height: 100%;
		overflow: hidden;
		background-color: #121212;
	}
</style>

<style lang="scss" scoped>
	.page-session {
		display: flex;
		flex-direction: column;
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		height: 100%;
		background-color: #121212;
		background: url('../../static/sms/chat_bg_top.png');
		background-size: 750rpx 460rpx;
		background-repeat: no-repeat;

		.message-list {
			flex: 1;
			overflow: hidden;
			position: relative;

			.loadmore {
				margin: 10rpx 0;
			}

			.scroller {
				height: 100%;
			}

			/deep/.cl-popup {
				&__wrapper {
					position: absolute;
				}
			}
		}

		.opbar {
			flex-shrink: 0;
			z-index: 9;
			border-top: 1rpx solid #393939;

			.main {
				display: flex;
				align-items: center;
				height: 100rpx;

				.send {
					margin-right: 30rpx;
				}

				.icon {
					height: 80rpx;
					width: 80rpx;
					line-height: 80rpx;
					text-align: center;
					flex-shrink: 0;
					color: #fff;

					.chat-iconfont {
						font-size: 60rpx;
					}

					.send-button {
						background-color: #393939;
						color: #fff;
						border-radius: 10rpx;
						padding: 6rpx 10rpx;
						font-size: 28rpx;
					}
				}

				.input {
					flex: 1;
					margin: 0 10rpx;
					height: 70rpx;
					line-height: 70rpx;

					.press-btn {
						display: inline-block;
						height: 70rpx;
						width: 100%;
						line-height: 70rpx;
						color: #fff;
						border: 0rpx solid #dcdfe6;
						font-size: 24rpx;
						background-color: #282828;
						margin: 0;
						border-radius: 70rpx;
						box-sizing: border-box;

						&::after {
							border: 0;
						}

						&:active {
							background-color: #464646;
						}
					}
				}
			}
		}

		.popup-voice {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;

			&.is-cancel {
				background-color: red;
				color: #fff;
			}

			&__time {
				font-size: 28rpx;
				margin-bottom: 20rpx;
				letter-spacing: 1rpx;
			}

			&__desc {
				font-size: 24rpx;
			}
		}
	}

	.cl-topbar__icon {
		font-size: 25rpx;
		color: red;
		padding: 0rpx 10rpx;
		color: #fff;
	}

	.member-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}

	.cl-topbar {
		width: 100%;
		height: 100rpx;
		background-color: #121212;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.cl-input {
		border-radius: 16rpx;
		border: 0;
		background-color: #282828;
		color: #fff;
	}
</style>