talk_appAmin/pages/Friend/messagechat.vue

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

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


	<!-- 	<view class="container">
		<scroll-view class="scroll-container" scroll-y="true">
			<view style="width: 100rpx;height: 300rpx;background-color:antiquewhite;">1</view>
			<view style="width: 100rpx;height: 300rpx;background-color:blue;">1</view>
			<view style="width: 100rpx;height: 300rpx;background-color: black;">1</view>
			<view style="width: 100rpx;height: 300rpx;background-color:antiquewhite;">1</view>
			<view style="width: 100rpx;height: 300rpx;background-color:blue;">1</view>
			<view style="width: 100rpx;height: 300rpx;background-color: black;">1</view>
		</scroll-view>
	</view>



	<view class="bottm">
		<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" placeholder="请输入内容" rows="1" />
				<view class="bottombutton" @click="ButtonSend()">
					<text>发送</text>
				</view>
			</view>
		</view>
	</view>
	
	
	<view class="ShowBottom" >
	
	</view> -->


	<view class="page">
		<view class="content">
			<!-- 你的页面内容 -->
		</view>
		<button class="bottom-button" @click="ShowBottom">点击弹出视图</button>
		<view class="popup" :class="{ show: IsShwo }">
			<!-- 弹出的视图内容 -->
			<text>这里是弹出的视图内容</text>
		</view>
	</view>


</template>

<script setup>
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import {
		onMounted,
		ref
	} from "vue"
	const socket = ref(null);
	const message = ref('');
	const IsShwo = ref(false)
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	const route = useRoute();
	const title = ref("");
	onMounted(() => {
		var id = route.query.id
		console.log(id)
		title.value = id;
	})


	const connectWebSocket = () => {
		socket.value = uni.connectSocket({
			url: 'ws://127.0.0.1:8080/text/text?1',
			success() {
				console.log('WebSocket连接成功');
			},
			fail(err) {
				console.error('WebSocket连接失败', err);
			}
		});

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

		socket.value.onMessage((event) => {
			console.log('收到消息:', event.data);
			message.value = event.data;
		});

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

		socket.value.onError((err) => {
			console.error('WebSocket错误', err);
		});
	};

	connectWebSocket();



	//
	function ButtonSend() {
		console.log("发送")
	}

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

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


	.bottm {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0rpx;
	}

	.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 {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 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;
	}

	.bottom-button {
		width: 100%;
		height: 50rpx;
		background-color: #007aff;
		color: white;
		text-align: center;
		line-height: 50rpx;
	}

	.popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: -210rpx;
		/* 初始位置隐藏在视图外 */
		height: 210rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		transform: translateY(0);
		transition: transform 0.3s ease-in-out;
	}

	.popup.show {
		transform: translateY(-210rpx);
		/* 显示视图 */
	}
</style>