jurong_circle_front_app/pages/program/chat.vue

<template>
	<view class="chat-container">
		<u-navbar title="聊天" id="navBarId" :background="{background: 'transparent' }" :border-bottom="false"
			back-icon-color="#000" title-color="#000">
			<template v-slot:right>
				<image class="collection" src="/static/icon/Bookmark.png" mode=""></image>
			</template>
		</u-navbar>

		<view class="bottom-view" id="bottomId">
			<view class="icon u-m-r-10">
				<image src="/static/icon/Mic.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<textarea name="" v-model="text" class="text" maxlength="3000"></textarea>
			<view v-if="text==null || text==''" class="icon u-m-r-10 u-m-l-10">
				<image src="/static/icon/expression.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view v-else class="icon u-m-r-10 u-m-l-10">
				<image src="/static/icon/big.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view v-if="text==null || text==''" class="icon">
				<image src="/static/icon/Camera.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
			<view v-else class="icon u-m-r-10 u-m-l-10" @click="handleSend">
				<image src="/static/icon/send.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
		</view>

		<scroll-view :style="'height:'+scrollHeight+'px'" scroll-y="true" class="scroll-main">
			<view v-for="(item, index) in dataList">
				<view v-if="item.createId==userId" class="my-message">
					{{item.content}}
				</view>
				<view v-else class="other-message">
					{{item.content}}
				</view>
			</view>
		</scroll-view>


	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref, getCurrentInstance, onBeforeMount } from 'vue';
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import io from '@hyoga/uni-socket.io';

	const text = ref('')

	const socket = ref()

	const navBarRef = ref()
	const dataList = ref([])

	const mockData = () => {
		for (var i = 0; i < 40; i++) {
			dataList.value.push("测试" + (i + 1))
		}
	}

	const handleSend = () => {
		socket.value.emit('clientMsg', {
			createId: userId.value,
			groupId: groupId.value,
			content: text.value,
			type: "text"
		})
	}

	const groupId = ref()
	const userId = ref()

	onLoad((val) => {
		groupId.value = val.groupId
	});

	const instance = getCurrentInstance();
	const scrollHeight = ref(0)
	const loadHeight = () => {
		uni.getSystemInfo({
			success(res) {
				let screenHeight = res.screenHeight
				uni.createSelectorQuery().in(instance.proxy).select("#navBarId").boundingClientRect((data : any) => {
					scrollHeight.value = screenHeight - data.height
				}).exec()
				uni.createSelectorQuery().in(instance.proxy).select("#bottomId").boundingClientRect((data : any) => {
					scrollHeight.value = scrollHeight.value - data.height
				}).exec()
			}
		})
	}

	const connection = () => {
		socket.value = io('http://192.168.0.15:3007', {
			query: {},
			transports: ['websocket', 'polling'],
			timeout: 5000,
		});
		socket.value.on('connect', async () => {
			console.log("连接成功");
		})
		socket.value.emit('addGroup', {
			groupId: groupId.value,
		})
		socket.value.on('serverMsg', async (message) => {
			console.log(message);
			dataList.value.push(message)
		})
	}

	const loadData = () => {
		userId.value = uni.getStorageSync("user").id
	}

	onMounted(() => {
		// mockData()
		loadData()

		loadHeight()
		connection()
	})
</script>

<style scoped lang="scss">
	.chat-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #E3E8FF 0%, #FFFFFF 100%);
		background-blend-mode: lighten;


		.collection {
			width: 48rpx;
			height: 48rpx;
			margin-right: 24rpx;
		}

		.bottom-view {
			width: 100%;
			height: 80rpx;
			// background-color: #aaffff;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 10rpx;

			.icon {
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				width: 100%;
				height: 100%;
				border: 2rpx solid #DEEFFF;
			}
		}

		.scroll-main {
			.my-message {
				text-align: right;
			}

			.other-message {}
		}
	}
</style>