feat(咨询页面): 添加咨询页面tab切换功能并优化首页布局

pages/home/admissions/index.vue

@@ -8,16 +8,29 @@
           @click="handleLeftClick"
         ></u-icon>
       </div>
-      <text class="header-title">招办在线</text>
+      <text class="header-title">在线咨询</text>
       <div></div>
     </view>
 
     <view class="admissions-content">
+      <!-- 自定义tab -->
+      <view class="custom-tab">
+        <view
+          v-for="tab in tabList"
+          :key="tab.id"
+          :class="['tab-item', { active: activeTab === tab.id }]"
+          @click="switchTab(tab.id)"
+        >
+          <text class="tab-text">{{ tab.name }}</text>
+          <view class="tab-underline" v-if="activeTab === tab.id"></view>
+        </view>
+      </view>
+
       <view class="teacher-list">
         <!-- 教师列表 -->
         <view
           class="teacher-item"
-          v-for="(teacher, index) in teacherList"
+          v-for="(teacher, index) in currentList"
           :key="index"
         >
           <image class="teacher-avatar" :src="teacher.avatar"></image>
@@ -32,9 +45,9 @@
               </view>
               <view class="teacher-department">{{ teacher.department }}</view>
             </view>
-            <view class="ask-button" @click="handleAskQuestion(teacher)">{{
+            <view class="ask-button" @click="handleAskQuestion(teacher)">
-              teacher.online ? "立即提问" : "留言"
+              立即提问
-            }}</view>
+            </view>
           </view>
         </view>
       </view>
@@ -58,6 +71,11 @@ export default {
   },
   data() {
     return {
+      activeTab: "1", // 当前激活的tab
+      tabList: [
+        { id: "1", name: "招生在线", key: "admissions" },
+        { id: "2", name: "迎新在线", key: "welcome" },
+      ],
       showLeaveMessage: false,
       teacherList: [
         {
@@ -89,10 +107,41 @@ export default {
           online: false,
         },
       ],
+      welcomeList: [
+        {
+          id: 5,
+          name: "李老师",
+          department: "学生处",
+          avatar: "/static/common/images/avatar.png",
+          online: true,
+        },
+        {
+          id: 6,
+          name: "张老师",
+          department: "宿管中心",
+          avatar: "/static/common/images/student.png",
+          online: true,
+        },
+        {
+          id: 7,
+          name: "迎新办陈老师",
+          department: "后勤服务中心",
+          avatar: "/static/common/images/student.png",
+          online: false,
+        },
+      ],
       currentTeacher: null,
     };
   },
+  computed: {
+    currentList() {
+      return this.activeTab === "1" ? this.teacherList : this.welcomeList;
+    },
+  },
   methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
     handleLeftClick() {
       uni.navigateBack();
     },
@@ -159,6 +208,44 @@ export default {
   }
 
   .admissions-content {
+    .custom-tab {
+      padding: 0 30rpx;
+      margin: 24rpx 0;
+      display: flex;
+      align-items: center;
+
+      .tab-item {
+        position: relative;
+        padding: 12rpx 0;
+        margin-right: 60rpx;
+        cursor: pointer;
+
+        .tab-text {
+          font-size: 32rpx;
+          font-weight: 500;
+          color: #505866;
+          letter-spacing: 0.04rpx;
+        }
+
+        &.active .tab-text {
+          color: #4f6aff;
+          font-weight: 600;
+        }
+
+        .tab-underline {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          right: 0;
+          width: 80rpx;
+          height: 4rpx;
+          background-color: #4f6aff;
+          border-radius: 2rpx;
+        }
+      }
+    }
+
     .teacher-list {
       .teacher-item {
         display: flex;

pages/home/index/index.vue

@@ -19,7 +19,7 @@
         >
       </view>
 
-      <!-- <view class="qa-section">
+      <view class="qa-section">
         <view class="qa-header">
           <text class="qa-title">大家都在问</text>
           <view class="more-link">
@@ -37,16 +37,6 @@
           </view>
         </view>
 
-        <button class="chat-button" @click="isChat = true">
-          <image
-            class="chat-icon"
-            src="/static/common/images/icon_chat.png"
-          ></image>
-          <text class="chat-text">开启对话</text>
-        </button>
-      </view> -->
-
-      <view class="start-chat">
         <button class="chat-button" @click="handleStartChat">
           <image
             class="chat-icon"
@@ -61,6 +51,9 @@
           class="feature-item"
           v-for="(item, index) in features"
           :key="index"
+          :style="{
+            background: item.background,
+          }"
           @click="handleFeatureClick(item)"
         >
           <image :src="item.icon" class="feature-icon"></image>
@@ -111,7 +104,7 @@
           <view class="loading-more" v-if="isLoading">
             <u-loading mode="circle" color="#4370fe"></u-loading>
           </view>
-          
+
           <!-- 到顶部提示 -->
           <view class="no-more-data" v-if="noMoreData">
             <text>已经到顶了</text>
@@ -279,7 +272,7 @@ export default {
       isLoadingMore: false, // 是否正在加载更多的标志位
       noMoreData: false, // 是否已加载全部历史消息
       isSwitchingConversation: false, // 是否正在切换对话的标志位
-      
+
       pageQuery: {
         PageIndex: 1,
         PageSize: 20,
@@ -294,18 +287,20 @@ export default {
       ],
       features: [
         {
-          title: "招办在线",
+          title: "在线咨询",
           icon: "/static/common/images/icon_admissions.png",
           path: "/pages/home/admissions/index",
+          background: "linear-gradient(0deg, #F4FBFE 0%, #F4FBFE 100%)",
         },
-        {
+        // {
-          title: "留言板",
+        //   title: "留言板",
-          icon: "/static/common/images/icon_messageBoard.png",
+        //   icon: "/static/common/images/icon_messageBoard.png",
-          path: "/pages/home/messageBoard/index",
+        //   path: "/pages/home/messageBoard/index",
-        },
+        // },
         {
           title: "电话咨询",
           icon: "/static/common/images/icon_phone.png",
+          background: "linear-gradient(0deg, #F4FBF9 0%, #F4FBF9 100%)",
         },
       ],
       popupShow: false,
@@ -505,7 +500,7 @@ export default {
       // 添加到消息列表
       this.messageGroups.push(userMessage);
       this.messageValue = "";
-      
+
       // 立即添加一个AI回复的加载状态消息
       const loadingMessage = {
         id: "loading_" + Math.random().toString(36).substring(2, 15),
@@ -519,7 +514,7 @@ export default {
         displayTime: "",
         isLoading: true, // 标记为加载状态
       };
-      
+
       // 添加加载状态消息到列表
       this.messageGroups.push(loadingMessage);
 
@@ -559,12 +554,12 @@ export default {
         })
         .catch((error) => {
           console.error("API请求失败:", error);
-          
+
           // 从消息列表中移除加载状态消息
           this.messageGroups = this.messageGroups.filter(
             (msg) => !msg.isLoading
           );
-          
+
           // 添加错误消息
           const errorMessage = {
             id: "error_" + Math.random().toString(36).substring(2, 15),
@@ -577,7 +572,7 @@ export default {
             timeLabel: 0,
             displayTime: "",
           };
-          
+
           this.messageGroups.push(errorMessage);
         });
     },
@@ -645,18 +640,18 @@ export default {
       // 关闭弹窗
       this.popupShow = false;
       this.isChat = true;
-      
+
       // 设置切换对话标志位，防止触发上拉刷新
       this.isSwitchingConversation = true;
-      
+
       this.currentConversationId = "";
       this.messageGroups = [];
-      
+
       // 重置分页和加载状态
       this.pageQuery.PageIndex = 1;
       this.isLoadingMore = false;
       this.noMoreData = false;
-      
+
       // 延迟重置切换对话标志位
       setTimeout(() => {
         this.isSwitchingConversation = false;
@@ -666,18 +661,18 @@ export default {
     // 开始新对话
     handleStartChat() {
       this.isChat = true;
-      
+
       // 设置切换对话标志位，防止触发上拉刷新
       this.isSwitchingConversation = true;
-      
+
       this.currentConversationId = "";
       this.messageGroups = [];
-      
+
       // 重置分页和加载状态
       this.pageQuery.PageIndex = 1;
       this.isLoadingMore = false;
       this.noMoreData = false;
-      
+
       // 延迟重置切换对话标志位
       setTimeout(() => {
         this.isSwitchingConversation = false;
@@ -692,7 +687,7 @@ export default {
     // 滚动到顶部事件处理
     onScrollToUpper() {
       console.log("触发上拉刷新");
-      
+
       // 如果已经没有更多数据或正在切换对话，不再触发上拉刷新
       if (this.noMoreData || this.isSwitchingConversation) {
         return;
@@ -771,7 +766,7 @@ export default {
 
   .main-content {
     padding: 30rpx;
-    padding-top: 100rpx;
+    padding-top: 60rpx;
 
     .welcome-message {
       //   display: inline-block;
@@ -784,8 +779,8 @@ export default {
 
       .avatar {
         display: inline-block;
-        width: 42rpx;
+        width: 50rpx;
-        height: 34rpx;
+        height: 44rpx;
         margin-right: 12rpx;
       }
 
@@ -894,20 +889,19 @@ export default {
       gap: 30rpx;
 
       .feature-item {
-        height: 210rpx;
+        height: 150rpx;
         border-radius: 16rpx;
-        background-color: #fafafc;
         display: flex;
-        flex-direction: column;
+        justify-content: flex-start;
         align-items: center;
-        justify-content: center;
+        padding-left: 30rpx;
-        // gap: 20rpx;
+        gap: 20rpx;
         flex: 1;
 
         .feature-icon {
           width: 80rpx;
           height: 80rpx;
-          margin-bottom: 12rpx;
+          margin-top: 16rpx;
         }
 
         .feature-text {
@@ -982,7 +976,7 @@ export default {
         text-align: center;
         margin-bottom: 32rpx;
       }
-      
+
       .no-more-data {
         text-align: center;
         font-size: 24rpx;
@@ -1030,7 +1024,7 @@ export default {
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            
+
             .dot {
               display: inline-block;
               width: 12rpx;
@@ -1040,20 +1034,20 @@ export default {
               margin: 0 6rpx;
               opacity: 0.6;
               animation: dot-flashing 1.5s infinite linear alternate;
-              
+
               &:nth-child(1) {
                 animation-delay: 0s;
               }
-              
+
               &:nth-child(2) {
                 animation-delay: 0.5s;
               }
-              
+
               &:nth-child(3) {
                 animation-delay: 1s;
               }
             }
-            
+
             @keyframes dot-flashing {
               0% {
                 opacity: 0.6;