feat(home): 重构底部工具栏并添加浮动选项卡功能

pages/home/index/index.vue

@@ -219,42 +219,17 @@
       <!-- 底部工具栏 -->
       <view class="chat-footer">
         <!-- 悬浮工具栏 -->
-        <!-- <view class="floating-tabs">
+        <view class="floating-tabs">
           <view
             class="tab-item"
-            @click="handleFeatureClick({ title: '招生在线' })"
+            v-for="(tab, index) in floatingTabs"
+            :key="index"
+            @click="handleFeatureClick({ title: tab.title })"
           >
-            <image
+            <image class="tab-icon" :src="tab.icon" mode="scaleToFill" />
-              class="tab-icon"
+            <text>{{ tab.title }}</text>
-              src="/static/common/images/icon_admissions2.png"
-              mode="scaleToFill"
-            />
-
-            <text>招生在线</text>
           </view>
-          <view
-            class="tab-item"
-            @click="handleFeatureClick({ title: '留言板' })"
-          >
-            <image
-              class="tab-icon"
-              src="/static/common/images/icon_messageBoard2.png"
-              mode="scaleToFill"
-            />
-            <text>留言板</text>
         </view>
-          <view
-            class="tab-item"
-            @click="handleFeatureClick({ title: '电话咨询' })"
-          >
-            <image
-              class="tab-icon"
-              src="/static/common/images/icon_phone2.png"
-              mode="scaleToFill"
-            />
-            <text>电话咨询</text>
-          </view>
-        </view> -->
 
         <view class="input-container">
           <view class="input-area">
@@ -350,17 +325,30 @@ export default {
           path: "/pages/home/admissions/index",
           background: "linear-gradient(0deg, #F4FBFE 0%, #F4FBFE 100%)",
         },
-        // {
-        //   title: "留言板",
-        //   icon: "/static/common/images/icon_messageBoard.png",
-        //   path: "/pages/home/messageBoard/index",
-        // },
         {
           title: "电话咨询",
           icon: "/static/common/images/icon_phone.png",
           background: "linear-gradient(0deg, #F4FBF9 0%, #F4FBF9 100%)",
         },
       ],
+      floatingTabs: [
+        {
+          title: "首页",
+          icon: "/static/common/images/icon_home.png",
+        },
+        {
+          title: "招生在线",
+          icon: "/static/common/images/icon_admissions2.png",
+        },
+        {
+          title: "转人工",
+          icon: "/static/common/images/icon_conversation.png",
+        },
+        {
+          title: "电话咨询",
+          icon: "/static/common/images/icon_phone2.png",
+        },
+      ],
       popupShow: false,
       chatHistoryList3: [
         // {
@@ -472,8 +460,9 @@ export default {
       conversationId = "",
       dmid = "",
       autoResetSwitching = true,
+      isChat = true,
     } = {}) {
-      this.isChat = true;
+      this.isChat = isChat;
       this.isSwitchingConversation = true;
       this.currentConversationId = conversationId;
       this.currentDMid = dmid;
@@ -545,6 +534,11 @@ export default {
       });
     },
     handleFeatureClick(item) {
+      if (item.title === "首页") {
+        this.resetChatState({ isChat: false });
+        return;
+      }
+
       if (item.title === "电话咨询") {
         this.advicePhoneShow = true;
         return;
@@ -1181,13 +1175,13 @@ export default {
     flex-direction: column;
     padding: 0 30rpx;
     box-sizing: border-box;
-    height: calc(100vh - 88rpx - 146rpx);
+    height: calc(100vh - 88rpx - 180rpx);
     position: relative;
     overflow: hidden;
 
     .chat-scroll {
       flex: 1;
-      height: calc(100vh - 88rpx - 146rpx);
+      height: 100%;
       overflow-y: scroll;
     }
 
@@ -1463,19 +1457,19 @@ export default {
           align-items: center;
           justify-content: center;
           background-color: #ffffff;
-          padding: 8rpx 24rpx;
+          padding: 8rpx 20rpx;
           border-radius: 50rpx;
           box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
           margin-right: 12rpx;
 
           .tab-icon {
-            width: 28rpx;
+            width: 24rpx;
-            height: 28rpx;
+            height: 24rpx;
             margin-right: 10rpx;
           }
 
           text {
-            font-size: 28rpx;
+            font-size: 24rpx;
             color: #333333;
           }
         }