ygoa_miniapp/pages/message/chat/index.vue

<template>
	<view class="container">
		<scroll-view class="chat-messages" scroll-y="true" :scroll-with-animation="true"
			:scroll-into-view="scrollToView" >
			<view v-for="(message, index) in messages" :key="index" :id="'msg' + index" style="clear: both;">
				<view :class="['message', message.sender === 'user' ? 'user-message' : 'ai-message']">
					<text>{{ message.content }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="chat-input">
			<textarea @linechange="chatMsgMaxHeightChange" auto-height v-model="inputMessage" placeholder="输入消息..." class="input-field"/>
			<button class="send-button" @click="sendMessage">发送</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';

	const inputMessage = ref('');
	const messages = ref([{
			sender: 'ai',
			content: '您好，我是ai助手'
		},

	]);
	const scrollToView = ref('');

	function sendMessage() {
		if (inputMessage.value.trim() === '') {
			return;
		}
		messages.value.push({
			sender: 'user',
			content: inputMessage.value
		});
		inputMessage.value = '';
		scrollToBottom();
		getAIResponse();
	};

	function getAIResponse() {
		// 这里调用AI客服接口，获取回复
		uni.request({
			url: 'http://api.qingyunke.com/api.php?key=free&appid=0&msg=' + messages.value[messages.value.length -
				1].content,
			success: function(res) {
				messages.value.push({
					sender: 'ai',
					content: res.data.content
				});
				scrollToBottom();
			}
		})
	};

	function scrollToBottom() {
		nextTick(() => {
			scrollToView.value = 'msg' + (messages.value.length - 1);
		});
	};
	
    const $maxHeight = ref(0); // 初始化为0
    
    // 使用 onMounted 钩子在组件挂载后获取窗口高度
    // onMounted(() => {
    //     const screenHeight = window.innerHeight; // 安全地获取当前窗口的高度
    //     $maxHeight.value = screenHeight - 200; // 减去200，单位可以为px
    // });
	function chatMsgMaxHeightChange(e){
		console.log(e);
	}
</script>


<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;

	}

	.chat-messages {
		flex: 1;
		padding: 10px;
		background-color: #f3f3f3;
		overflow-y: auto;
		/* 确保消息区域可以滚动 */
		max-height: calc(100vh - 200rpx);
	}

	.message {
		max-width: 70%;
		margin: 5px 0;
		padding: 8px;
		border-radius: 10px;
		display: inline-block;
		word-wrap: break-word;
	}

	.user-message {
		background-color: #DCF8C6;
		align-self: flex-end;
		float: right;
		margin-right: 40rpx;
	}

	.ai-message {
		background-color: #ECECEC;
		align-self: flex-start;
	}

	.chat-input {
		display: flex;
		padding: 10px;
		background-color: #FFFFFF;
		border-top: 1px solid #E0E0E0;
		position: absolute;
		bottom: 0;	
		left: 0;	
		right: 0;
		
	}

	.input-field {
		flex: 1;
		border: 1px solid #E0E0E0;
		border-radius: 20px;
		padding: 10px;
		margin-right: 10px;
	}

	.send-button {
		border: none;
		border-radius: 20px;
		padding: 0 20px;
		background-color: #007AFF;
		color: white;
		height: 90rpx;
	}
</style>