YingXingAI/pages/home/admissions/index.vue

<template>
  <view class="admissions-container">
    <view class="header">
      <div class="header-left">
        <u-icon
          class="header-left-icon"
          name="arrow-left"
          @click="handleLeftClick"
        ></u-icon>
      </div>
      <text class="header-title">招办在线</text>
      <div></div>
    </view>

    <view class="admissions-content">
      <view class="teacher-list">
        <!-- 教师列表 -->
        <view
          class="teacher-item"
          v-for="(teacher, index) in teacherList"
          :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)">{{
              teacher.online ? "立即提问" : "留言"
            }}</view>
          </view>
        </view>
      </view>
    </view>

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

<script>
import LeaveMessage from "@/components/LeaveMessage.vue";

export default {
  components: {
    LeaveMessage,
  },
  data() {
    return {
      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,
        },
      ],
      currentTeacher: null,
    };
  },
  methods: {
    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 {
    .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>