FileCollect/pages/index/index.vue

<template>
  <view class="index-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <image src="@/static/logo.svg" mode="aspectFit" style="width: 40rpx; height: 40rpx; margin-right: 10rpx;"></image>
      <text class="title">文件收集系统</text>
    </view>
    
    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 欢迎信息 -->
      <view class="welcome-section">
        <text class="welcome-text">欢迎使用文件收集系统</text>
        <text class="subtitle">请选择您需要的功能</text>
      </view>
      
      <!-- 功能入口按钮组 -->
      <view class="button-grid">
        <view class="button-row">
          <view class="button-item primary" @click="navigateTo('/pages/login/index')">
            <u-icon name="account" size="60" color="#606266"></u-icon>
            <text>登录页面</text>
          </view>
          <view class="button-item primary" @click="navigateTo('/pages/user-home/user-home')">
            <u-icon name="home" size="60"></u-icon>
            <text>用户首页</text>
          </view>
        </view>
        
        <view class="button-row">
          <view class="button-item primary" @click="navigateTo('/pages/task-management/task-management')">
            <u-icon name="list" size="60"></u-icon>
            <text>任务管理</text>
          </view>
          <view class="button-item primary" @click="navigateTo('/pages/user-profile/user-profile')">
            <u-icon name="account" size="60"></u-icon>
            <text>个人中心</text>
          </view>
        </view>
        
        <view class="button-row">
          <view class="button-item primary" @click="navigateTo('/pages/image-upload/image-upload')">
            <u-icon name="photo" size="60" color="#606266"></u-icon>
            <text>图片上传</text>
          </view>
        </view>
      </view>
      
      <!-- 管理员和部门负责人专用入口 -->
      <view class="special-access">
        <view class="special-title">管理入口</view>
        <view class="special-buttons">
          <view class="button-item admin" @click="navigateTo('/pages/admin-home/admin-home')">
            <u-icon name="account" size="60" color="#606266"></u-icon>
            <text>管理员首页</text>
          </view>
          <view class="button-item dept" @click="navigateTo('/pages/dept-home/dept-home')">
            <u-icon name="account" size="60" color="#606266"></u-icon>
            <text>部门负责人首页</text>
          </view>
          <view class="button-item admin" @click="navigateTo('/pages/admin-center/admin-center')">
            <u-icon name="setting" size="60" color="#606266"></u-icon>
            <text>管理员中心</text>
          </view>
        </view>
      </view>
      
      <!-- 其他页面入口 -->
      <view class="special-access">
        <view class="special-title">其他入口</view>
        <view class="special-buttons">
          <view class="button-item primary" @click="navigateTo('/pages/login/index')">
            <u-icon name="account" size="60" color="#606266"></u-icon>
            <text>登录页面</text>
          </view>
          <view class="button-item primary" @click="navigateTo('/pages/user-home/user-home')">
            <u-icon name="home" size="60" color="#606266"></u-icon>
            <text>用户主页</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 页面数据
    }
  },
  methods: {
    // 统一导航方法
    navigateTo(url) {
      // 检查URL是否存在
      if (!url) {
        this.$u.toast('页面地址无效');
        return;
      }
      
      // 根据URL判断是否为tabBar页面
      const tabBarPages = ['/pages/user-home/user-home', '/pages/task-management/task-management', '/pages/user-profile/user-profile'];
      const isTabBar = tabBarPages.includes(url);
      
      try {
        if (isTabBar) {
          uni.switchTab({
            url: url,
            success: () => {
              console.log('Tab切换成功:', url);
            },
            fail: (err) => {
              console.error('Tab切换失败:', err);
              this.$u.toast('切换标签页失败');
            }
          });
        } else {
          uni.navigateTo({
            url: url,
            success: () => {
              console.log('页面跳转成功:', url);
            },
            fail: (err) => {
              console.error('页面跳转失败:', err);
              this.$u.toast('页面不存在');
            }
          });
        }
      } catch (e) {
        console.error('导航异常:', e);
        this.$u.toast('导航发生错误');
      }
    }
  },
  onLoad() {
    // 页面加载时的初始化操作
    console.log('首页加载完成');
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  padding-top: 44px; // 适配顶部导航栏
  height: 100vh;
  box-sizing: border-box;
  background-color: #f5f7fa;
  
  .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background-color: #1989fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    z-index: 999;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
  
  .content {
    padding: 40rpx 30rpx;
  }
  
  .welcome-section {
    text-align: center;
    margin-bottom: 50rpx;
    
    .welcome-text {
      font-size: 40rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 15rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
      color: #909399;
    }
  }
  
  .button-grid {
    margin-bottom: 50rpx;
  }
  
  .button-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
    
    &:last-child {
      justify-content: center;
    }
  }
  
  .button-item {
    flex: 1;
    aspect-ratio: 1.5;
    max-width: calc(50% - 15rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;
    margin: 0 15rpx 15rpx 0;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    
    &:last-child {
      margin-right: 0;
    }
    
    &.button-row:last-child .button-item {
      max-width: 80%;
    }
    
    &.primary {
      background-color: #1989fa;
    }
    
    &.admin {
      background-color: #67c23a;
    }
    
    &.dept {
      background-color: #e6a23c;
    }
    
    text {
      color: #ffffff;
      font-size: 28rpx;
      margin-top: 15rpx;
      font-weight: bold;
    }
  }
  
  .special-access {
    
    .special-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 25rpx;
      padding-left: 10rpx;
    }
    
    .special-buttons {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>