YingXingAI/pages/home/admissions/index.vue

<template>
  <view class="admissions-container">
    <header-bar title="在线咨询" @leftClick="handleLeftClick"></header-bar>

    <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 currentList"
          :key="index"
        >
          <image class="teacher-avatar" :src="teacher.avatar"></image>
          <view class="teacher-info">
            <view class="teacher-detail">
              <view class="teacher-name">
                <text>{{ teacher.name }}</text>
                <view v-if="teacher.online" class="online-status">
                  <view class="online-dot"></view>
                  <text>在线</text>
                </view>
              </view>
              <view class="teacher-department">{{ teacher.department }}</view>
            </view>
            <view class="ask-button" @click="handleAskQuestion(teacher)">
              立即提问
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 留言弹出层 -->
    <leave-message
      :show.sync="showLeaveMessage"
      :teacher="currentTeacher"
      @submit="handleMessageSubmit"
    />
  </view>
</template>

<script>
import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
import LeaveMessage from "@/components/LeaveMessage.vue";

export default {
  components: {
    HeaderBar, // 注册头部组件
    LeaveMessage,
  },
  data() {
    return {
      activeTab: "1", // 当前激活的tab
      tabList: [
        { id: "1", name: "招生在线", key: "admissions" },
        { id: "2", name: "迎新在线", key: "welcome" },
      ],
      showLeaveMessage: false,
      teacherList: [
        {
          id: 1,
          name: "孙老师",
          department: "招就处",
          avatar: "/static/common/images/avatar.png",
          online: true,
        },
        {
          id: 2,
          name: "杨老师",
          department: "电子信息学院",
          avatar: "/static/common/images/student.png",
          online: false,
        },
        {
          id: 3,
          name: "招办赵老师",
          department: "财政学院/会计专业",
          avatar: "/static/common/images/student.png",
          online: true,
        },
        {
          id: 4,
          name: "招办王老师",
          department: "电子信息学院",
          avatar: "/static/common/images/student.png",
          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();
    },
    handleAskQuestion(teacher) {
      if (!teacher.online) {
        // 留言
        this.currentTeacher = teacher;
        this.showLeaveMessage = true;
      } else {
        // 跳转老师详情
        uni.navigateTo({
          url: `/pages/home/teacherInfo/index?teacherId=${teacher.id}`,
        });
      }
    },
    handleMessageSubmit(data) {
      console.log("提交留言:", data.content, "教师:", data.teacher?.name);

      // 成功提示已经在组件内部处理，这里不需要重复提示
      // uni.showToast({
      //   title: "留言成功",
      //   icon: "success",
      // });

      // 这里可以进行其他操作，如更新页面数据等
      if (data.success) {
        console.log("留言提交成功，可以进行后续操作");
        // 例如刷新列表或其他业务逻辑
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.admissions-container {
  min-height: 100vh;
  padding-bottom: calc(112rpx + env(safe-area-inset-bottom));
  padding-top: 88rpx;
  background-color: #ffffff;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    z-index: 99;

    .header-left {
      font-size: 36rpx;
    }

    .header-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
    }
  }

  .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;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        padding: 0 30rpx;
        // margin-bottom: 30rpx;
        border-radius: 16rpx;

        .teacher-avatar {
          width: 96rpx;
          height: 96rpx;
          border-radius: 50%;
          margin-right: 24rpx;
          object-fit: cover;
        }

        .teacher-info {
          padding: 30rpx 0;
          flex: 1;
          flex-shrink: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1rpx solid #f2f2f2;

          .teacher-detail {
            .teacher-name {
              display: flex;
              align-items: center;
              font-size: 28rpx;
              font-weight: 600;
              color: #333333;
              margin-bottom: 12rpx;

              .online-status {
                display: flex;
                align-items: center;
                margin-left: 16rpx;

                .online-dot {
                  width: 14rpx;
                  height: 14rpx;
                  border-radius: 50%;
                  background-color: #4cd964;
                  margin-right: 8rpx;
                }

                text {
                  font-size: 24rpx;
                  color: #4cd964;
                  font-weight: normal;
                }
              }
            }

            .teacher-department {
              font-size: 24rpx;
              color: #999999;
            }
          }
          .ask-button {
            color: #ffffff;
            background-color: #4f6aff;
            font-size: 24rpx;
            width: 152rpx;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            border-radius: 50rpx;
          }
        }
      }
    }
  }
}

/* 响应式布局 - PC端样式 */
@media screen and (min-width: 768px) {
  .admissions-container {
    .content {
      max-width: 1200rpx;
      margin: 0 auto;
    }
  }
}
</style>