feat: 新增首页IP交互

src/pages/index/components/chat/ChatMainList/index.vue

@@ -2,7 +2,10 @@
   <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
     <!-- 顶部自定义导航栏 -->
     <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <ChatTopNavBar :mainPageDataModel="mainPageDataModel" />
+      <ChatTopNavBar
+        ref="topNavBarRef"
+        :mainPageDataModel="mainPageDataModel"
+      />
     </view>
 
     <!-- 消息列表（可滚动区域） -->
@@ -120,7 +123,7 @@
 </template>
 
 <script setup>
-import { onMounted, nextTick, onUnmounted, ref, defineEmits } from "vue";
+import { onMounted, nextTick, onUnmounted, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import {
   SCROLL_TO_BOTTOM,
@@ -153,7 +156,7 @@ import {
   recentConversation,
 } from "@/request/api/ConversationApi";
 import WebSocketManager from "@/utils/WebSocketManager";
-import { IdUtils } from "@/utils";
+import { ThrottleUtils, IdUtils } from "@/utils";
 import { checkToken } from "@/hooks/useGoLogin";
 import { useAppStore } from "@/store";
 
@@ -162,6 +165,8 @@ const appStore = useAppStore();
 const statusBarHeight = ref(20);
 /// 输入框组件引用
 const inputAreaRef = ref(null);
+const topNavBarRef = ref();
+const welcomeRef = ref();
 
 const holdKeyboardTimer = ref(null);
 /// focus时，点击页面的时候不收起键盘
@@ -174,9 +179,6 @@ const isKeyboardShow = ref(false);
 ///（控制滚动位置）
 const scrollTop = ref(99999);
 
-// 用户滚动状态控制
-const isUserScrolling = ref(false);
-
 /// 会话列表
 const chatMsgList = ref([]);
 /// 输入口的输入消息
@@ -234,9 +236,10 @@ const handleKeyboardHide = () => {
 };
 
 // 处理用户滚动事件
-const handleScroll = (e) => {
-  // 标记用户正在滚动
-};
+const welcomeHeight = ref(0);
+const handleScroll = ThrottleUtils.createThrottle(({ detail }) => {
+  topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value;
+}, 50);
 
 // 处理滚动到底部事件
 const handleScrollToLower = () => {};
@@ -381,6 +384,7 @@ const loadConversationMsgList = async () => {
 };
 
 // 获取首页数据
+
 const getMainPageData = async () => {
   /// 从个渠道获取如二维，没有的时候就返回首页的数据
   const sceneId = appStore.sceneId || "";
@@ -390,6 +394,11 @@ const getMainPageData = async () => {
     initData();
     mainPageDataModel.value = res.data;
     agentId.value = res.data.agentId;
+    // 数据更新后再次测量欢迎区高度
+    welcomeRef.value.measureWelcomeHeight((data) => {
+      console.log("🚀 ~ getMainPageData ~ data:", data);
+      welcomeHeight.value = data.height;
+    });
   }
   appStore.setSceneId(""); // 清空sceneId,分身二次进入展示默认的
 };

src/pages/index/components/chat/ChatMoreTips/index.vue

@@ -7,7 +7,7 @@
         :key="index"
       >
         <text
-          class="font-500 font-size-12 line-height-24 text-center"
+          :class="['font-500 font-size-12 text-center', `color-${index}`]"
           @click="sendReply(item)"
         >
           {{ item }}

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

@@ -6,6 +6,7 @@
   .more-tips-item {
     background: #f7f7f7;
     border-radius: 5px;
+    box-sizing: border-box;
     padding: 6px 8px;
 
     &:last-child {
@@ -13,3 +14,31 @@
     }
   }
 }
+
+.color-0 {
+  color: #47c2ff;
+}
+
+.color-1 {
+  color: #fb3748;
+}
+
+.color-2 {
+  color: #1fc16b;
+}
+
+.color-3 {
+  color: #f6b51e;
+}
+
+.color-4 {
+  color: #7d52f4;
+}
+
+.color-5 {
+  color: #fb4ba3;
+}
+
+.color-6 {
+  color: #22d3bb;
+}

src/pages/index/components/chat/ChatTopNavBar/index.vue

@@ -4,10 +4,20 @@
 
     <!-- 隐藏 -->
     <view class="flex-full h-full flex flex-items-center flex-justify-center">
-      <!-- 需要添加的image-animated动画 -->
-      <image class="w-32 h-32" :src="logoImageUrl" mode="aspectFit" />
-      <!-- 需要添加的text-animated动画 -->
-      <text class="font-size-14 font-500 color-171717 ml-10">沐沐</text>
+      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
+      <image
+        v-show="show"
+        class="w-32 h-32"
+        :class="{ 'image-animated': show }"
+        :src="logoImageUrl"
+        mode="aspectFit"
+      />
+      <text
+        v-show="show"
+        class="font-size-14 font-500 color-171717 ml-10"
+        :class="{ 'text-animated': show }"
+        >沐沐</text
+      >
     </view>
 
     <view class="w-24 h-24"></view>
@@ -15,7 +25,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from "vue";
+import { ref, defineProps, computed, defineExpose } from "vue";
 
 const props = defineProps({
   mainPageDataModel: {
@@ -24,11 +34,15 @@ const props = defineProps({
   },
 });
 
+const show = ref(false);
+
 const logoImageUrl = computed(
   () => props.mainPageDataModel.initPageImages?.logoImageUrl
 );
 
 const showDrawer = () => uni.$emit("SHOW_DRAWER");
+
+defineExpose({ show });
 </script>
 
 <style lang="scss" scoped>

src/pages/index/components/chat/ChatTopWelcome/index.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from "vue";
+import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
 import ChatMoreTips from "../ChatMoreTips/index.vue";
 
 const props = defineProps({
@@ -54,6 +54,25 @@ const props = defineProps({
 const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
 const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
 const guideWords = computed(() => props.mainPageDataModel.guideWords);
+
+// Welcome 可视状态与高度
+const instance = getCurrentInstance();
+
+// 测量欢迎区域高度
+const measureWelcomeHeight = (callback) => {
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select(".welcome-content")
+    .boundingClientRect((res) => {
+      if (res && res.height) {
+        callback(res);
+      }
+    })
+    .exec();
+};
+
+defineExpose({ measureWelcomeHeight });
 </script>
 
 <style lang="scss" scoped>