OfficeSystem/pages/index/index.vue

<template>
  <!-- 顶部Tabs栏（只在非客户管理页面显示） -->
  <view class="fixed-tabs" v-if="value !== 3">
    <uv-tabs :list="topTabs" :current="topTabValue" @click="clickTab"></uv-tabs>
  </view>
  
  <!-- 内容区域 -->
  <view class="content-wrapper">
    <!-- 客户管理（底部导航栏选中时显示，使用 v-show 避免组件销毁重建） -->
    <CustomerManagement v-if="value === 3" ref="customerManagementRef" />

    <!-- 其他内容（底部导航栏未选中客户管理时显示） -->
    <template v-else>
      <!-- 日程编辑 -->
      <ScheduleEditor
        v-if="topTabValue === 0"
        ref="scheduleEditorRef"
        :events="allEvents"
        @date-change="handleDateChange"
      />

      <!-- 内容看板 -->
      <ContentDashboard v-if="topTabValue === 1" />

      <!-- 待办事项 -->
      <TodoList v-if="topTabValue === 2" />

      <!-- 消息内容 -->
      <MessageContent v-if="topTabValue === 3" />
    </template>
  </view>

  <!-- 悬浮新建按钮（只在日程编辑页显示） -->
  <FabPlus v-if="topTabValue === 0 && value !== 3" @click="handleAddClick" />

  <!-- 新建日程弹窗（保留以备后用） -->
  <AddEventModal :show="showAdd" @ok="addEvent" @cancel="showAdd = false" />

  <!-- 底部导航 -->
  <uv-tabbar :value="value" @change="index=>value = index">
    <uv-tabbar-item text="首页" icon="home"></uv-tabbar-item>
    <uv-tabbar-item text="工作台" icon="calendar"></uv-tabbar-item>
    <uv-tabbar-item text="月度考核 " icon="integral"></uv-tabbar-item>
    <uv-tabbar-item text="客户管理" icon="kefu-ermai" ></uv-tabbar-item>
    <uv-tabbar-item text="我的" icon="account"></uv-tabbar-item>
  </uv-tabbar>

</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { useUserStore } from '@/store/user';
import { getUserInfo } from '@/common/api';

import FabPlus from '@/components/FabPlus.vue';
import AddEventModal from '@/components/AddEventModal.vue';
import ScheduleEditor from '@/components/ScheduleEditor.vue';
import ContentDashboard from '@/components/ContentDashboard.vue';
import TodoList from '@/components/TodoList.vue';
import MessageContent from '@/components/MessageContent.vue';
import CustomerManagement from '@/components/CustomerManagement.vue';

// 顶部tabs选项
const topTabs = [
  { name: '日程编辑', value: 0 },
  { name: '内容看板', value: 1 },
  { name: '待办事项', value: 2 },
  { name: '消息内容', value: 3 }
];
// 默认显示内容看板
const topTabValue = ref(1);

function clickTab(item) {
  topTabValue.value = item.value;
  console.log('切换tab:', item.name);
}

// 当前选择的日期，格式：YYYY-MM-DD（用于新建日程时传递日期）
const selectedDate = ref(new Date().toISOString().slice(0, 10));

// 示例日程
const today = new Date().toISOString().slice(0, 10);
// 获取明天的日期
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
const tomorrowStr = tomorrow.toISOString().slice(0, 10);
// 获取昨天的日期
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
const yesterdayStr = yesterday.toISOString().slice(0, 10);

const allEvents = ref([
  {id:1,title:'今天的日程1',startHour:10,startMin:30,color:'#e3fae6',date:today},

  {id:5,title:'明天的日程2',startHour:10,startMin:30,color:'#fae1e1',date:tomorrowStr},
  {id:6,title:'昨天的日程3',startHour:10,startMin:30,color:'#e3fae6',date:yesterdayStr},
]);

// 处理日期变化（从 ScheduleEditor 组件传来）
const handleDateChange = (dateStr) => {
  selectedDate.value = dateStr;
  console.log('通过日历组件更新选择日期：', selectedDate.value);
}

// 悬浮按钮/弹窗控制
const showAdd = ref(false);

// ScheduleEditor 组件引用
const scheduleEditorRef = ref(null);

// CustomerManagement 组件引用
const customerManagementRef = ref(null);

// 处理添加按钮点击
const handleAddClick = () => {
  // 从 ScheduleEditor 组件获取当前选择的日期
  const currentDate = scheduleEditorRef.value?.selectedDate || selectedDate.value;
  uni.navigateTo({
    url: `/pages/event/add/index?date=${currentDate}`
  });
};


// 添加日程
function addEvent(e) {
  // e是{title, startHour, startMin, color, date等}，如果没有date则使用selectedDate
  allEvents.value.push({
    ...e,
    date: e.date || selectedDate.value,
    id: Date.now()
  });
  showAdd.value = false;
}

const value=ref(0);

// 页面加载时请求接口
onMounted(() => {
  const userStore = useUserStore();
  console.log('当前 token:', userStore.token);
  
  // 请求用户信息接口
  getUserInfo().then(res => {
    console.log('getInfo 接口返回:', res);
  }).catch(err => {
    console.error('getInfo 接口请求失败:', err);
  });
  
  // 看板数据已由 ContentDashboard 组件自己加载，这里不再请求
});

// 页面显示时处理从新建日程页面返回的数据
onShow(() => {
  // 从全局存储中读取新添加的日程数据
  try {
    const newEventData = uni.getStorageSync('newEventData');
    if (newEventData) {
      addEvent(newEventData);
      // 清除存储的数据
      uni.removeStorageSync('newEventData');
    }
  } catch (e) {
    console.error('读取新日程数据失败:', e);
  }
  
  // 如果当前在客户管理页面，检查是否需要刷新客户列表
  if (value.value === 3 && customerManagementRef.value) {
    // 检查是否有刷新标志（从客户详情页删除后设置）
    const needRefresh = uni.getStorageSync('customerListNeedRefresh');
    if (needRefresh) {
      // 刷新客户列表
      customerManagementRef.value.refresh();
      // 清除刷新标志
      uni.removeStorageSync('customerListNeedRefresh');
    }
  }
});

// 触底加载更多（仅在客户管理页面时生效）
onReachBottom(() => {
  // 只有在客户管理页面（value === 3）时才触发加载更多
  if (value.value === 3 && customerManagementRef.value) {
    customerManagementRef.value.winB_LoadMore();
  }
});
</script>

<style lang="scss" scoped>

.status_bar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.fixed-tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.content-wrapper {
  padding-top: 8rpx;
  overflow: hidden;
  margin-top: var(--status-bar-height, 0);
  
  /* 客户管理页面不需要顶部 padding */
  :deep(.customer-management) {
    margin-top: 0;
    padding-top: 0;
    
    /* 使用 v-show 隐藏时确保不可见 */
    &[style*="display: none"] {
      display: none !important;
    }
  }
}

:deep(.bottom-tabbar) { z-index: 1000 !important; }
</style>