talk_appAmin/pages/Friend/messagechat.vue

<!-- 消息聊天 -->
<template>
	<view class="content">
		<!-- 上 -->
		<view class="header_are">
			<uni-nav-bar statusBar="false" left-icon="left" @clickLeft="ReturnPage" :fixed="true" :border="false"
				background-color="#ffffff" :title="title" />
		</view>
		<!-- 中 -->
		<view class="middle_area">
			<scroll-view class="scroll-container"  :class="{ show: IsShwo }"  scroll-y="true" :scroll-with-animation="true"
				:scroll-into-view="lastMessageId" @touchstart="checkmsg">
				<view class="bigbox" @touchmove="watchjilu" >
				
			
					<view v-for="item in arrlist"  :id="'ms' + item.id">
						<view v-if="item.send != myuserid">
							<view>
								<view class="contentmessagetimes" v-if="IsSendTime(item.sendTime)">
									<text class="contentmessagetimetext">{{ ReturnTime(item.sendTime) }}</text>
								</view>
							</view>
							<view class="contentmessage">
								<view>
									<image class="contentmessageimage" :src="bindIcon(youavatar)"></image>
								</view>
								<view style="margin-left: 16rpx;">
									<view class="message" v-if="item.messageType == 51">
										<text class="messagetext">{{ item.messageText }}</text>
									</view>
									<view v-else class="mymessageImage">
										<up-image :show-loading="true" :src="bindIcon(item.messageText)" radius="12rpx"
											width="240rpx" height="300rpx"></up-image>
									</view>
								</view> 
							</view>
						</view>
			
			
						<view v-else>
							<!-- v-if="IsSendTime(item.sendTime)" -->
							<view>
								<!-- <p>{{ReturnTime(item.sendTime)}}</p> -->
								<view class="contentmessagetimes" v-if="IsSendTime(item.sendTime)">
									<text class="contentmessagetimetext">{{ ReturnTime(item.sendTime) }}</text>
								</view>
							</view>
							<view class="mycontentmessage">
								<view>
									<view v-if="item.messageType == 51" class="mymessage">
										<text class="mymessagetext">{{ item.messageText }}</text>
									</view>
									<view v-else class="mymessageImage">
										<up-image :show-loading="true" :src="bindIcon(item.messageText)" radius="12rpx"
											width="240rpx" height="300rpx"></up-image>
									</view>
								</view>
								<view>
									<image class="mycontentmessageimage" :src="avatar"></image>
								</view>
							</view>
						</view>
			
			
					</view>
					
				</view>
			</scroll-view>
		</view>
		<!-- 下 -->
		<view class="bottom_area" :class="{ show: IsShwo }">
			<!-- 输入区域 -->
				<view class="bottm" >
					
				
					<view class="botomview">
						<view class="viewtextarea">
							<textarea class="classtextarea" v-model="messageinput" auto-height placeholder="请输入内容" @focus="onFocus"
								@linechange="input_text" :focus="true" cursor-spacing="30" />
							<view class="right_shuru">
								<view class="bottombutton" @click="ButtonSend()">
									<text>发送</text>
								</view>
							</view>
				
						</view>
					</view>
				
					<view class="imageview" @click="ShowBottom()">
						<image class="messageaddimage" src="../../static/images/sign/messageadd.png"></image>
					</view>
				</view>
				
				<!-- 发送照片区域 -->
				<view class="popup" >
					<view style="display: flex;margin-left: 32rpx;margin-top: 24rpx;">
						<view>
							<fileUpload v-model="messageinput" @dropDownValueChange="fruitValueChange" :limit="1"></fileUpload>
							<view @click="UpPorops()">
								<text class="textpopup" style="margin-top: 4rpx;">相册</text>
							</view>
						</view>
						<view style="margin-left: 48rpx;" @click="UpReport()">
							<image class="imagepopup" src="../../static/images/sign/report.png"></image>
							<view>
								<text class="textpopup">举报</text>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
	



</template>

<script setup>
	import fileUpload from '@/pages/common/file/fileUpload/sendImage.vue'
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import {
		onMounted,
		ref,
		getCurrentInstance,
		reactive,
		nextTick,
		watch
	} from "vue"
	import {
		onReachBottom,
		onLoad,
		onShow,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		GetListid
	} from "@/api/signln/SignTa/SignTa";


	import {
		listNotificationHistorical,
		getNotificationHistorical,
		delNotificationHistorical,
		addNotificationHistorical,
		updateNotificationHistorical,
		listNotificationHistoricalUser
	} from "@/api/signln/NotificationHistorical/NotificationHistorical";
	const {
		proxy
	} = getCurrentInstance();
	const messageinput = ref(null);

	const myuserid = ref(0);
	const co = ref(null);

	// 图片
	const fileList1 = ref();

	const socket = ref(null);
	const message = ref('');
	const IsShwo = ref(false)
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	const route = useRoute();
	const title = ref("");
	const uid = ref(0);

	const myavatar = ref();
	const youavatar = ref();
	var att = ref('hh')
	// 底部输入部分的整体高度
	var bottombox = ref('100');
	var scrollto = ref()
	onShow(() => {
		//获取$("#")

		const getuser = GetListid().then(res => {
			myuserid.value = res;
			console.log("党情登录用户" + myuserid.value)

			if (myuserid.value != 0) {
				WebSockOpen(myuserid.value)
				setTimeout(() => {
					GetList();
				}, 100)

			}
		})

		uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				const storedUserInfo = res.data;
				uid.value = storedUserInfo.friendid;
				title.value = storedUserInfo.title;
				myavatar.value = storedUserInfo.myavatar;
				youavatar.value = storedUserInfo.youavatar;
				console.log('User info retrieved successfully:', storedUserInfo.myavatar);
			},
			fail: function(err) {
				console.error('Failed to retrieve user info:', err);
			}
		});
		

	})



	const lastMessageId = ref(null);

	import config from "@/config";

	function WebSockOpen(id) {
		socket.value = proxy.$store.state.chat.socket;
		console.log("socketInfo:", proxy.$store.state.chat.socket);
	}
	const usermessInfo = ref(proxy.$store.state.chat.userMessageinfo)
	// 使用 watch 监听 count 的变化
	watch(
		() => proxy.$store.state.chat.userMessageinfo,
		(newVal, oldVal) => {
			IsSendTime();
			arrlist.value.push(newVal)
			console.log("新数据：chat，", arrlist.value);
			setTimeout(() => {
				lastMessageId.value = 'test';
			}, 40);
			setTimeout(() => {
				lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
				// console.log(lastMessageId.value)
				// lastMessageId.value = 'boxlastsss';
			}, 50);
 
		}
	);
	onShow(() => {
		proxy.$store.dispatch('webSockerInfo')
		

	})
	const webInfo = ()=>{
		console.log("操作web：1");
		webInfo2()
	}
	const webInfo2 = () =>{
		proxy.$store.dispatch('webSockerInfo')
		proxy.$store.dispatch('getQNDomainInfo')
		console.log("操作web：2");
	}
	onLoad(() => {
		proxy.$store.dispatch('webSockerInfo')
		GetList();

	})
	
	// 判断键盘是否升起
	function onFocus() {
		// console.log("键盘升起")
		if (IsShwo.value) {
			bottombox.value -= 100
		}
		IsShwo.value = false;




	};


	const arrlist = ref();
	// 获取历史记录
	function GetList() {
		MyList();
	}

	function MyList() {
		var data = {
			// pageNum: 1,
			// pageSize: 10,
			senderId: null,
			receiverId: null,
			messageType: null,
			sendTime: null,
			readTime: null,
			status: null,
			messageText: null,
			send: null
		}
		data.senderId = myuserid.value;
		data.receiverId = uid.value;

		// console.log(data);

		listNotificationHistoricalUser(data).then(response => {
			// console.log(response.rows.length)
			arrlist.value = response.rows;
			console.log(arrlist.value);
			IsSendTime();
			if (arrlist.value != null) {
				setTimeout(() => {
					lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
					// console.log(lastMessageId.value)
					// lastMessageId.value = 'boxlastsss';
				}, 30);
			}

		});
	}

	// 发送消息
	function ButtonSend() {
		if (messageinput.value == null) {
			proxy.$modal.msgError("空消息，请输入内容！");
			return;
		}

		const form = {
			senderId: null,
			receiverId: null,
			messageType: null,
			sendTime: null,
			readTime: null,
			status: null,
			messageText: null,
			send: null
		}

		form.messageText = messageinput.value;
		form.receiverId = uid.value;
		form.senderId = myuserid.value;
		form.status = 0;
		form.messageType = 51; //文字
		// form.sendTime = new Date();
		form.send = myuserid.value;
		toWSMessage(form);
		addNotificationHistorical(form).then(response => {
			// console.log(response)
			GetList();
		});
		messageinput.value = null;
	}

	// 弹起底部
	function ShowBottom() {
		IsShwo.value = !IsShwo.value;
		if (IsShwo.value) {
			movebottom()
			bottombox.value += 100
		} else {
			movebottom()
			bottombox.value -= 100
		}

	}

	//相册
	function UpPorops() {

	}



	//举报
	function UpReport() {

		var data = {
			userid: myuserid.value,
			reportId: uid.value
		}

		// console.log(data);

		uni.setStorage({
			data: data,
			key: "data",
			success() {
				proxy.$tab.navigateTo("/pages/Friend/violationreporting")
			}
		})
	}

	import {
		useStore
	} from 'vuex';
	const store = useStore();
	const QNDomain = store.state.user.QNDomain;

	function bindIcon(icon) {
		return QNDomain + icon;
	}

	const avatar = ref(proxy.$store.state.user.avatar)




	function closeWebSocket() {
		if (socket.value) {
			// socket.value.close();
		}
	}

	// 返回后更新上一页数据
	function ReturnPage() {
		// 关闭 WebSocket 
		closeWebSocket();
		uni.navigateBack()
	}


	//存放照片的地方
	const picList = ref();

	function fruitValueChange(e) {
		console.log(e)
		picList.value = e;

		// console.log("发送")
		console.log(messageinput.value)

		const form = {
			senderId: null,
			receiverId: null,
			messageType: null,
			sendTime: null,
			readTime: null,
			status: null,
			messageText: null,
			send: null
		}

		form.messageText = picList.value;
		form.receiverId = uid.value;
		form.senderId = myuserid.value;
		form.status = 0;
		form.messageType = 52;
		form.send = myuserid.value;
		addNotificationHistorical(form).then(response => {
			// console.log(response)
			GetList();
		});
		messageinput.value = null;
	}
	const toWSMessage = (e) => {
		// console.log(e)
		const info = {
			fromid: null,
			toid: null,
			content: null
		}
		info.fromid = e.senderId;
		info.toid = e.receiverId;
		info.content = e.messageText;
		// console.log(info)
		if (socket.value) {
			try {
				socket.value.send({
						data: JSON.stringify(info),
						async success() {
							console.log("消息发送成功");
						},
					});

			} catch (e) {
				console.log("eee:", e);
			}

		}
	}
	var scrollhight = ref(0)
	var boxheight = ref(0)
	var scroll_to_id = ref('')
	//输入框变高低
	function movebottom() {
		// 获取下部输入区域高度
		setTimeout(() => {
			lastMessageId.value = '';
		}, 40);
		setTimeout(() => {
			lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
		}, 50);
		
	}
	// 输入文字的事件
	function input_text() {
		setTimeout(() => {
			movebottom()

		}, 50)

	}
	//滑动查看消息
	function checkmsg(){
		console.log('查看');
		IsShwo.value = false
	} 
	// 监听WebSocket连接
	function onSocketOpen() {
		// console.log('WebSocket连接已打开！');
	}

	// 监听WebSocket错误
	function onSocketError() {
		// console.log('WebSocket连接打开失败，请检查！');
	}


	// 时间函数
	function ReturnTime(res) {
		// console.log(res);
		var time = new Date(res);
		// console.log(time);
		var now = new Date();
		// console.log(now);
		// console.log("当前时间"+time.getDate() + "闲杂世家"+now.getDate());
		var year = time.getFullYear();
		var month = time.getMonth() + 1;
		var date = time.getDate();
		var hours = time.getHours();
		var minutes = time.getMinutes();
		var months = month.toString().padStart(2, '0');
		var hours = hours.toString().padStart(2, '0');
		var min = minutes.toString().padStart(2, '0');
		if (time.getDate() == now.getDate()) {
			return `${hours}:${min}`;
		} else {
			return `${year}.${months}.${date} ${hours}:${min}`;
		}
	}

	// 判断在5分钟内发的消息不显示时间
	function IsSendTime(time) {
		var time = new Date(time).getDate();
		var lasttime = new Date(arrlist.value[arrlist.value.length - 2].sendTime).getDate();
		var result = time - lasttime;
		if (result == 0) {
			return false;
			// console.log(result)
		} else {
			return true;
		}
	}
	// 输入情况下查看记录
	// function watchjilu(){
	// 	console.log('翻看记录');

	// }
	
</script>

<style lang="scss" scoped>
	@import '@/pages/common/navbar/navbar.css';
	
	page {
		background-color: #F4F5F6;
		height: 100%;
	}
	
	.bottm {
		width: 750rpx;
		background: #ffffff;
		display: flex;
		padding-bottom: 10rpx;
		transition: all 0.357s;
		border-bottom: 4rpx solid #ffffff;
		
	}
	
	.botomview {
		margin-left: 32rpx;
	}
	.scroll-container{
		height: 100%;
		transition: all 0.357s;
	}
	.viewtextarea {
		display: flex;
		width: 606rpx;
		min-height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #f7f8fa;
		margin-top: 12rpx;
	
	}
	
	.right_shuru {
		display: flex;
		align-items: flex-end;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}
	
	.imageview {
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-right: 32rpx;
	}
	
	.messageaddimage {
		width: 60rpx;
		height: 60rpx;
	}
	
	.classtextarea {
		width: 480rpx;
		min-height: 32rpx;
		display: block;
		margin: auto 0;
		line-height: 40rpx;
		padding-left: 32rpx;
		resize: none;
		padding-top: 25rpx;
		margin-bottom: 25rpx;
		transition: all;
	}
	
	.bottombutton {
		width: 104rpx;
		height: 56rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		background: #3477fc;
		margin-right: 12rpx;
		margin-left: 1rpx;
	}
	
	.bottombutton>text {
		font-weight: 400;
		width: 57rpx;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #FFFFFF;
		display: block;
		margin: auto;
		line-height: 56rpx;
	
	}
	
	.scroll-container {
		flex: 1;
		overflow: hidden;
		width: 100%;
	
		box-sizing: border-box;
	
	
	}
	
	.bigbox {
		padding-bottom: 50rpx;
		transition: transform 0.3s ease-in-out;
	}
	
	.container {
		/* top: 10rpx; */
		/* position: relative; */
		/* bottom: 100rpx; */
		display: flex;
		flex-direction: column;
		transition: all 0.25s;
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	
		/* 让内容元素占据可用空间 */
	
		/* 让内容元素距离底部100rpx */
	}
	
	.bottom_liaotian_box {
		// height:62.10416793823242+82px;
	}
	
	.ShowBottom {
		width: 750rpx;
		height: 210rpx;
		background: #3477fc;
		bottom: -100rpx;
		left: 0;
		right: 0;
		position: fixed;
	
		transform: translateY(0);
		transition: transform 0.3s ease-in-out;
	}
	
	.show {
		transform: translateY(-210rpx);
		/* 显示视图 */
	}
	
	
	.page {
		position: relative;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	
	.content {
		flex: 1;
		overflow: auto;
	}
	
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: -210rpx;
		/* 初始位置隐藏在视图外 */
		height: 210rpx;
		background-color: #fff;
		transform: translateY(0);
		transition: all 0.35s;
		border-top: 4rpx solid #fff;
	}
	
	.popup.show {
		transform: translateY(-210rpx);
	}
	
	.imagepopup {
		width: 120rpx;
		height: 120rpx;
	}
	
	.textpopup {
		font-weight: 400;
		width: 57rpx;
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #999999;
		display: block;
		margin: auto;
	}
	
	.contentmessage {
		display: flex;
		margin-top: 24rpx;
		margin-left: 32rpx;
	}
	
	.mycontentmessage {
		display: flex;
		justify-content: flex-end;
		margin-right: 32rpx;
		margin-top: 24rpx;
	}
	
	.contentmessagetime {
		/* width: 300rpx; */
		height: 28rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		opacity: 0.1;
		background: #000000;
		margin: auto;
		margin-top: 48rpx;
	}
	
	.contentmessagetime>p {
		/* display: inline-block; */
		font-weight: 400;
		height: 17rpx;
		font-size: 20rpx;
		text-align: center;
		color: #FFFFFF;
		display: block;
		margin: auto;
		line-height: 28rpx;
	}
	
	.contentmessagetimes {
		display: block;
		margin: auto;
		margin-top: 48rpx;
		text-align: center;
	}
	
	.contentmessagetimetext {
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		background: #000000;
		opacity: 0.1;
		display: inline-block;
		font-weight: 400;
		height: 28rpx;
		font-size: 20rpx;
		text-align: center;
		color: #FFFFFF;
		line-height: 28rpx;
		padding-left: 13rpx;
		padding-right: 13rpx;
		/* padding-top: 1rpx; */
	}
	
	.contentmessageimage {
		width: 82rpx;
		height: 82rpx;
		border-radius: 82rpx;
	}
	
	.mycontentmessageimage {
		width: 82rpx;
		height: 82rpx;
		border-radius: 82rpx;
		margin-left: 18rpx;
		margin-top: -1rpx;
	}
	
	
	.message {
		/* max-width: 500rpx; */
		/* width: 288rpx; */
		/* height: 82rpx; */
		/* max-height: 10000rpx; */
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #ffffff;
	}
	
	.mymessge {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #3477fc;
	}
	
	.messagetext {
		font-weight: 400;
		max-width: 500rpx;
		padding-right: 24rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		
		display: inline-block;
		margin: auto;
		/* line-height: 82rpx; */
		margin-left: 24rpx;
		word-break:break-all;
	}
	
	.mymessage {
		max-width: 500rpx;
		/* width: 168rpx; */
		/* height: 82rpx; */
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #3477fc;
	}
	
	.mymessagetext {
		font-weight: 400;
		max-width: 500rpx;
		padding-right: 24rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 30rpx;
		text-align: left;
	
		color: #FFFFFF;
		/* float: right; */
		display: inline-block;
		margin: auto;
		/* line-height: 82rpx; */
		margin-left: 24rpx;
	}
	.content{
		height: 100%;
		width: 100%;
		
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.header_are{
		min-height: 50rpx;
		width: 100%;
		background-color: #999999;
	}
	.middle_area{
		width: 100%; 
		height: 200rpx;
		flex-grow: 1;
		
	}
	.bottom_area{
		
		width: 100%;
		min-height: 100rpx;
		background-color: #fff;
		transition: all 0.35s;
	}
</style>