feat(message/chat): 聊天页面

pages.json

@@ -121,6 +121,13 @@
 			{
 				"navigationBarTitleText" : "打卡签到"
 			}
+		},
+		{
+			"path" : "pages/message/chat/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "AI客服"
+			}
 		}
 	],
 	"tabBar": {

pages/message/chat/index.vue

@@ -0,0 +1,147 @@
+<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>

pages/message/index.vue

@@ -206,6 +206,7 @@
 	}
 	function clickFabButton() {
 		console.log('clickFabButton');
+		$tab.navigateTo('/pages/message/chat/index')
 	}
 </script>