talk_appAmin/pages/Friend/messagechat.vue

<!-- 消息聊天 -->
<template>

	<navbar_neadVue :title="title" background_color="#ffffff"></navbar_neadVue>


	<view class="container" :class="{ show: IsShwo }">
		<scroll-view class="scroll-container" scroll-y="true" :scroll-with-animation="true"
			:scroll-into-view="lastMessageId">

			<view v-for="item in arrlist" :key="index" :id="'ms'+item.id">
				<view v-if="item.send != myuserid">
					<view class="contentmessagetime">
						<p>{{item.readTime}}</p>
					</view>
					<view class="contentmessage">
						<view>
							<image class="contentmessageimage" src="../../static/images/icon/tu4-1.jpg"></image>
						</view>
						<view style="margin-left: 16rpx;">
							<view class="message">
								<text class="messagetext">{{item.messageText}}</text>
							</view>
						</view>
					</view>
				</view>


				<view v-else>
					<view class="contentmessagetime">
						<p>{{item.sendTime}}</p>
					</view>
					<view class="mycontentmessage">
						<view>
							<view class="mymessage">
								<text class="mymessagetext">{{item.messageText}}</text>
							</view>
						</view>
						<view>
							<image class="mycontentmessageimage" src="../../static/images/icon/tu4-1.jpg"></image>
						</view>
					</view>
				</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="imageview" @click="ShowBottom()">
			<image class="messageaddimage" src="../../static/images/sign/messageadd.png"></image>
		</view>

		<view class="botomview">
			<view class="viewtextarea">
				<textarea class="classtextarea" v-model="messageinput" placeholder="请输入内容" rows="1" />
				<view class="bottombutton" @click="ButtonSend()">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>

	<view class="popup" :class="{ show: IsShwo }">
		<view style="display: flex;margin-left: 32rpx;margin-top: 24rpx;">
			<view>
				<image class="imagepopup" src="../../static/images/sign/porops.png"></image>
				<view @click="UpPorops()">
					<text class="textpopup">相册</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 navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import {
		onMounted,
		ref,
		getCurrentInstance,
		reactive,
		nextTick
	} from "vue"

	import {
		GetListid
	} from "@/api/signln/SignTa/SignTa";


	import {
		listNotificationHistorical,
		getNotificationHistorical,
		delNotificationHistorical,
		addNotificationHistorical,
		updateNotificationHistorical,
		listNotificationHistoricalUser
	} from "@/api/signln/NotificationHistorical/NotificationHistorical";

	const messageinput = ref(null);

	const myuserid = ref(0);


	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);
	onMounted(() => {
		//获取$("#")
		const getuser = GetListid().then(res => {
			myuserid.value = res;
			console.log("党情登录用户" + myuserid.value)

			if (myuserid.value != 0) {
				WebSockOpen(myuserid.value)
				GetList();
			}
		})
		uid.value = route.query.id;
		console.log(uid)
		title.value = route.query.name;
	})

	const lastMessageId = ref(null);



	function WebSockOpen(id) {
		const url = 'ws://127.0.0.1:8080/text/text?' + id;

		console.log(url)

		socket.value = new WebSocket(url);

		socket.value.onopen = () => {
			console.log('WebSocket连接已打开');
		};

		socket.value.onmessage = (event) => {
			console.log('收到WebSocket消息：', event.data);

			const jsonObject = JSON.parse(event.data);

			console.log(jsonObject);
			arrlist.value.push(jsonObject);
		};

		socket.value.onerror = (error) => {
			console.error('WebSocket发生错误：', error);
		};

		socket.value.onclose = () => {
			console.log('WebSocket连接已关闭');
		};

	}





	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;
		listNotificationHistoricalUser(data).then(response => {
			console.log(response.rows.length)
			arrlist.value = response.rows;
			console.log(arrlist.value);


			setTimeout(() => {
				lastMessageId.value = 'ms' + arrlist.value[arrlist.value.length - 1].id;
				console.log(lastMessageId.value)
			}, 30);
		});
	}

	// 发送消息
	function ButtonSend() {
		// 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 = messageinput.value;
		form.receiverId = uid.value;
		form.senderId = myuserid.value;
		form.status = 0;
		form.messageType = 1;
		form.sendTime = new Date();
		form.send = myuserid.value;

		console.log(form)
		addNotificationHistorical(form).then(response => {
			console.log(response)
			GetList();
		});
		messageinput.value = null;

	}

	// 弹起底部
	function ShowBottom() {
		IsShwo.value = !IsShwo.value;
	}

	//相册
	function UpPorops() {

	}

	const {
		proxy
	} = getCurrentInstance();

	//举报
	function UpReport() {
		proxy.$tab.navigateTo("/pages/Friend/violationreporting")
	}
</script>

<style scoped>
	@import '@/pages/common/navbar/navbar.css';


	.bottm {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0rpx;
		border-bottom: 1rpx solid #3477fc;
	}

	.botomview {
		margin-left: 32rpx;
	}

	.viewtextarea {
		display: flex;
		width: 606rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background: #f7f8fa;
	}

	.imageview {
		float: right;
		margin-top: 12rpx;
		margin-right: 32rpx;
	}

	.messageaddimage {
		width: 60rpx;
		height: 60rpx;
	}

	.classtextarea {
		display: block;
		margin: auto 0;
		line-height: 80rpx;
		padding-left: 32rpx;
	}

	.bottombutton {
		width: 104rpx;
		height: 56rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		background: #3477fc;
		display: block;
		margin: auto 0;
		margin-right: 12rpx;
	}

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

	.container {
		/* top: 10rpx; */
		/* position: relative; */
		/* bottom: 100rpx; */
		display: flex;
		flex-direction: column;
		height: calc(100vh - 300rpx);

		flex: 1;
		/* 让内容元素占据可用空间 */
		margin-bottom: 120rpx;
		/* 让内容元素距离底部100rpx */
	}

	.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: transform 0.2s ease-in-out;
	}

	.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 {
		font-weight: 400;
		/* width: 166rpx; */
		height: 17rpx;
		font-size: 20rpx;
		text-align: center;
		color: #FFFFFF;
		display: block;
		margin: auto;
	}

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