YingXingAI/pages/consultation/index.vue

<template>
  <view class="page-container">
    <view class="page-header">
      <PageHeader title="在线咨询" :is-back="false" :border-bottom="false" />
    </view>
    
    <scroll-view 
      class="page-main" 
      scroll-y
      enable-back-to-top
    >
      <!-- 内容内层 - 添加内边距和安全区域 -->
      <view class="main-content">
        <!-- 咨询入口列表 -->
        <view 
          class="consultation-item" 
          v-for="(item, index) in consultationList" 
          :key="index" 
          @click="handleConsultation(item)"
        >
          <view class="item-left">
            <image class="item-icon" :src="item.icon"></image>
            <view class="item-info">
              <text class="item-title">{{ item.title }}</text>
              <text class="item-desc">{{ item.desc }}</text>
            </view>
          </view>
          <u-icon name="arrow-right" color="#999" size="20"></u-icon>
        </view>

        <!-- 无数据提示 -->
        <view class="empty-tip" v-if="consultationList.length === 0">
          暂无咨询服务
        </view>
      </view>
    </scroll-view>

    <view class="page-tabbar">
      <TabBar :currentPath="'/pages/consultation/index'" @change="handleTabChange" />
    </view>

    <u-modal
      v-model="showModal"
      :show-cancel-button="false"
      title="提示"
      :content="modalContent"
      @confirm="showModal = false"
    ></u-modal>
  </view>
</template>

<script>
import TabBar from "@/components/TabBar-optimized.vue";
import PageHeader from "@/components/PageHeader.vue";

export default {
  name: "ConsultationPage",
  components: {
    TabBar,
    PageHeader,
  },
  data() {
    return {
      showModal: false,
      modalContent: '',
      consultationList: [
        {
          id: 1,
          title: "智能问答",
          desc: "AI智能机器人为您解答",
          icon: "/static/common/icon/robot.png",
          type: "ai"
        },
        {
          id: 2,
          title: "招生咨询",
          desc: "招生相关问题咨询",
          icon: "/static/common/icon/admissions.png",
          type: "admissions"
        },
        {
          id: 3,
          title: "教务咨询",
          desc: "教务相关问题咨询",
          icon: "/static/common/icon/academic.png",
          type: "academic"
        },
      ],
    };
  },
  methods: {
    handleTabChange(path, index) {
      console.log("切换到标签页:", path, index);
    },
    handleConsultation(item) {
      // 这里可以跳转到具体的咨询页面
      this.modalContent = `即将进入${item.title}`;
      this.showModal = true;
    },
  },
};
</script>

<style scoped>
/* ===== 页面容器 - 主流三段式布局 ===== */
.page-container {
  /* 固定定位，占满整个视口 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Flex 布局 */
  display: flex;
  flex-direction: column;
  
  /* 背景色 */
  background-color: #f5f6fa;
  
  /* 防止溢出 */
  overflow: hidden;
}

/* ===== 头部导航 ===== */
.page-header {
  /* 不收缩，固定高度 */
  flex-shrink: 0;
  
  /* 层级 */
  z-index: 100;
}

/* ===== 内容区域 ===== */
.page-main {
  /* 占据剩余空间 */
  flex: 1;
  
  /* 重要：防止 flex 子元素溢出 */
  height: 0;
  
  /* 允许滚动 */
  overflow-y: auto;
  
  /* iOS 滚动优化 */
  -webkit-overflow-scrolling: touch;
}

/* ===== 内容内层 ===== */
.main-content {
  /* 内边距 */
  padding: 10px;
  
  /* 底部留出 TabBar 空间 + 安全区域 */
  padding-bottom: calc(50px + env(safe-area-inset-bottom) + 10px);
  
  /* 最小高度（确保可以滚动） */
  min-height: 100%;
}

/* ===== 底部导航 ===== */
.page-tabbar {
  /* 不收缩，固定高度 */
  flex-shrink: 0;
  
  /* 层级 */
  z-index: 100;
}

.consultation-item {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

.consultation-item:active {
  background-color: #f8f8f8;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-icon {
  width: 48px;
  height: 48px;
  margin-right: 15px;
  border-radius: 8px;
}

.item-info {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.item-desc {
  font-size: 13px;
  color: #999;
}

.empty-tip {
  text-align: center;
  padding: 50px 20px;
  color: #999;
  font-size: 14px;
}
</style>