talk_appAmin/pages/Friend/messagechat.vue

<!-- 消息聊天 -->
<template>
	<view class="uninavbar">
		<uni-nav-bar statusBar="false" left-icon="left" @clickLeft="ReturnPage" :fixed="true" :border="false"
			background-color="#ffffff" :title="title" />
	</view>

	<view class="container" :class="{ show: IsShwo }" :style="`transform: translateY(${-bottombox}px);`">
		<scroll-view class="scroll-container" scroll-y="true" :scroll-with-animation="true"
			:scroll-into-view="lastMessageId">
			<view class="bigbox" @touchmove="watchjilu">
				<view class="" style="height: 100rpx;">

				</view>

				<view v-for="item in arrlist" :key="index" :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 class="bottom_liaotian_box" id="boxlastsss">

				</view>
			</view>
		</scroll-view>
	</view>

	<view class="bottm" :class="{ show: IsShwo }">
		<view
			style="position: fixed; z-index: -1; background-color: #ffffff; top: calc(100vh - 100rpx); bottom: 0;left: 0;right: 0;">
		</view>

		<view class="botomview">
			<view class="viewtextarea">
				<textarea class="classtextarea" v-model="messageinput" auto-height placeholder="请输入内容" @focus="onFocus"
					@input="input_text" />
				<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" :class="{ show: IsShwo }">
		<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>



</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 bottombox = ref('100')
	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);
			}
		});
		setTimeout(() => {
			input_text()
		}, 500)
		input_text()
	})



	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("新数据：22，", arrlist.value);
			setTimeout(() => {
				lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
				// console.log(lastMessageId.value)
				// lastMessageId.value = 'boxlastsss';
			}, 10);

		}
	);
	onShow(() => {
		proxy.$store.dispatch('webSockerInfo')
		

	})

	// 判断键盘是否升起
	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) {
			
			uni.showToast({
				title:'不能发送空白消息',
				icon:'none',
				duration:500
			})
			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);
		console.log(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) => {
		// proxy.$store.dispatch('webSockerInfo')
		console.log("socket:", socket.value);
		// 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(JSON.stringify(info));
			} catch (e) {
				console.log("eee:", e);
			}

		}
	}
	//输入框变高低
	function movebottom() {
		uni.createSelectorQuery().select('.bottm').boundingClientRect(data => {
			console.log(data.height)
			bottombox.value = data.height
		}).exec()
		uni.createSelectorQuery().select('.bigbox').boundingClientRect(data => {
			uni.pageScrollTo({
				duration: '300',
				scrollTop: 100
			})
		}).exec()
	}
	// 输入文字的事件
	function input_text() {
		setTimeout(() => {
			movebottom()

		}, 50)

	}
	// 监听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: 8rpx;
		position: fixed;
		bottom: 0;
		transition: all 0.357s;
	}

	.botomview {

		margin-left: 32rpx;

	}

	.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: 64px;

	}

	.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;
	}

	.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;
	}

	.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;
	}
</style>