From d5e35e6dbb94c25fc8649ded82d0a8e254386322 Mon Sep 17 00:00:00 2001
From: xhhing <1370112271@qq.com>
Date: Sun, 29 Dec 2024 15:20:37 +0800
Subject: [PATCH] update:auto scroll ai page

---
 pages/homepages/puppy_chat/puppy_chat.vue     | 91 +++++++++++--------
 .../homepages/puppy_chat/css/puppy_chat.scss  |  2 +-
 2 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/pages/homepages/puppy_chat/puppy_chat.vue b/pages/homepages/puppy_chat/puppy_chat.vue
index f271516..8bdf15c 100644
--- a/pages/homepages/puppy_chat/puppy_chat.vue
+++ b/pages/homepages/puppy_chat/puppy_chat.vue
@@ -1,29 +1,27 @@
 <template>
-  <!-- 背景图片-->
-  <image class="background" src="@/static/homepages/puppy_chat/pictures/chat_image.png"></image>
-<scroll-view scroll-y="true" class="chat_scroll" :scroll-into-view="scrollInto">
-	<view class="chat">
-	  <!-- 渲染聊天消息气泡 -->
-	  <view v-for="(message, index) in send_messages" :id="'s'+index" :key="index" :class="['chat_area', message.sender === 'user' ? 'user_message' : 'ai_message']">
-	    <!-- 头像部分（放在气泡外部） -->
-	    <view v-if="message.sender === 'ai'" class="avatar_container ai_avatar_container">
-	      <image class="ai_avatar" src="@/static/homepages/puppy_chat/pictures/ai_avatar.png"></image>
-	    </view>
-	
-	    
-	
-	    <!-- 消息内容 -->
-	    <view :class="['message_content', message.sender === 'user' ? 'user_message_content' : 'ai_message_content']">
-	      <!-- <text>{{ message.message }}</text> -->
-		  <zero-markdown-view :markdown="message.message"></zero-markdown-view>
-	    </view>
+	<!-- 背景图片-->
+	<image class="background" src="@/static/homepages/puppy_chat/pictures/chat_image.png"></image>
+	<scroll-view scroll-y="true" id="chat_scroll" :scroll-top="scrollTop" scroll-with-animation="true">
+		<view class="chat">
+		  <!-- 渲染聊天消息气泡 -->
+		  <view v-for="(message, index) in send_messages" :key="index" :class="['chat_area', message.sender === 'user' ? 'user_message' : 'ai_message']">
+			<!-- 头像部分（放在气泡外部） -->
+			<view v-if="message.sender === 'ai'" class="avatar_container ai_avatar_container">
+			  <image class="ai_avatar" src="@/static/homepages/puppy_chat/pictures/ai_avatar.png"></image>
+			</view>
 		
-		<view v-if="message.sender === 'user'" class="avatar_container user_avatar_container">
-		  <image class="user_avatar" src="@/static/homepages/puppy_chat/pictures/user_avatar.png"></image>
+			<!-- 消息内容 -->
+			<view :class="['message_content', message.sender === 'user' ? 'user_message_content' : 'ai_message_content']">
+			  <!-- <text>{{ message.message }}</text> -->
+			  <zero-markdown-view :markdown="message.message"></zero-markdown-view>
+			</view>
+			
+			<view v-if="message.sender === 'user'" class="avatar_container user_avatar_container">
+			  <image class="user_avatar" src="@/static/homepages/puppy_chat/pictures/user_avatar.png"></image>
+			</view>
+		  </view>
 		</view>
-	  </view>
-	</view>
-</scroll-view>
+	</scroll-view>
   
 
 
@@ -49,7 +47,9 @@ export default {
       send_messages: [],  // 存储消息的数组
       conversation_id: 'e97ec0f2-2a94-42e7-b6db-b04883d349e8',//默认的聊天回话id
       answer: '',  // AI的回答
-	  scrollInto:"",  // scroll-into-view的值
+	  scrollTop : 0,	//滚动的高度
+	  totalHeight:0,
+	  scrollViewHeight:0,
     };
   },
   onLoad() {
@@ -81,23 +81,40 @@ export default {
       sender: 'ai',  // 标记为用户消息
       message:"我是fit journey的专属AI小助手，有什么问题都可以问我哦~"
     });
-
-
-
-
   },
+  
+  mounted() {
+  	//获取滚动区域的大小
+  	const that = this
+  	const query = uni.createSelectorQuery().in(that)
+  	query.select('#chat_scroll').boundingClientRect()
+  	query.exec((res)=>{
+  		that.scrollViewHeight = res[0].height
+  	})
+  },
+  
   methods: {
-	setScroll(){
-		//TODO:跳转到数组的最后一个元素
-	    const len = this.send_messages.length;
-	    this.scrollInto = 's'+(len-1);
-		console.log('scrollInto'+this.scrollInto)
+	setScrollTop(){
+		//设置滚动高度，滚动到新的回答
+		setTimeout(()=>{	//防止元素还没有渲染
+			const that = this
+			const query = uni.createSelectorQuery().in(that)
+			query.selectAll('.chat_area').boundingClientRect()
+			query.exec((res)=>{
+				res[0].forEach((item)=>{
+					that.totalHeight = that.totalHeight+item.height
+				})
+				if (that.totalHeight > that.scrollViewHeight) { //判断子元素高度是否大于显示高度
+					that.scrollTop = that.totalHeight - that.scrollViewHeight
+				}
+			})
+		},100)
 	},
     handleSendMessage() {
       // 获取发送消息的用户的消息数量
       const userMessageCount = this.send_messages.filter(msg => msg.sender === 'user').length;
 
-      if (userMessageCount >= 3) {
+      if (userMessageCount >= 1) {
         // 如果用户已经发送了2条消息，提示用户不能再发送
         uni.showToast({
           title: "AI 可是要交钱的哦,最多发送1条消息,刷新之后再试试吧~",
@@ -119,7 +136,7 @@ export default {
           this.send_message=this.input_message;
           this.input_message = "";  // 清空输入框
 			
-			this.setScroll()	//定位到最后一个元素
+			this.setScrollTop() //滚动条滚动
 			
           // 模拟向后端请求AI回答
           this.fetchAIResponse();
@@ -150,7 +167,7 @@ export default {
         },
         success: (res) => {
 
-          console.log("请求成功！请求数据是", res.data.data);
+          // console.log("请求成功！请求数据是", res.data.data);
           //这里请求数据成功！
           this.answer = res.data.data;
           // AI的消息
@@ -159,7 +176,7 @@ export default {
             sender: 'ai',  // 标记为AI消息
             message:this.answer
           });
-		  this.setScroll()	//定位到最后一个元素
+		  this.setScrollTop()	//滚动条滚动
         },
         error: (res) => {
           console.log("请求失败！请求数据是", res);
diff --git a/static/homepages/puppy_chat/css/puppy_chat.scss b/static/homepages/puppy_chat/css/puppy_chat.scss
index 1ea7945..8747a1b 100644
--- a/static/homepages/puppy_chat/css/puppy_chat.scss
+++ b/static/homepages/puppy_chat/css/puppy_chat.scss
@@ -7,7 +7,7 @@
 
 }
 
-.chat_scroll{
+#chat_scroll{
 	position: absolute;
 	width: 100%;
 	top: 12%;