zhxy-jsd/src/pages/base/service/index.vue

<template>
  <view class="service-page">
    <!-- 1. 顶部 Header -->
    <view class="header-section">
      <image
        class="header-image"
        src="@/static/base/home/120851x.png"
        mode="aspectFit"
      ></image>
    </view>

    <!-- 2. 主要内容区域 -->
    <view class="main-content">
      <!-- 循环渲染功能分区 -->
      <view class="section-block" v-for="section in sections" :key="section.id">
        <view class="section-title">
          <view class="title-decorator"></view>
          <text>{{ section.title }}</text>
        </view>
        <view class="section-grid-card">
          <template v-for="item in section.items" :key="item.id">
            <view
              v-if="item.show"
              class="grid-item"
              @click="handleGridItemClick(item)"
            >
              <!-- 根据 item.icon 动态拼接图片路径 -->
              <image
                class="grid-icon"
                :src="`/static/base/home/${item.icon}.png`"
                mode="aspectFit"
              ></image>
              <text class="grid-text">{{ item.text }}</text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

interface GridItem {
  id: number | string;
  icon: string; // 图标文件名 (不含扩展名)
  text: string;
  show: boolean; // 是否显示
  // 可以添加 permissionKey 等字段
  path?: string; // 页面路径
}

interface Section {
  id: number | string;
  title: string;
  items: GridItem[];
}

// 定义功能分区数据
const sections = reactive<Section[]>([
  {
    id: "routine",
    title: "常规",
    items: [
      {
        id: 10,
        text: "一师一策",
        icon: "clipboardfill",
        path: "/pages/view/routine/yishiyice/index",
        show: true,
      },
      {
        id: "r2",
        icon: "stack-fill",
        text: "教学资源",
        show: true,
        path: "/pages/view/routine/JiaoXueZiYuan/index",
      },
      {
        id: "r3",
        icon: "file-list-3-fil",
        text: "活动资源",
        show: true,
        path: "/pages/view/routine/HuoDongZiYuan/index",
      },
      {
        id: "r4",
        icon: "file-paper-2-fill",
        text: "公文流转",
        show: true,
        path: "/pages/view/routine/GongWenLiuZhuan/index",
      },
      {
        id: "r5",
        icon: "file-mark-fill",
        text: "积分评价",
        show: true,
        path: "/pages/view/routine/JiFenPingJia",
      },
      {
        id: "r6",
        icon: "pass-pending-fill",
        text: "课服巡查",
        show: true,
        path: "/pages/view/routine/kefuxuncha/KeFuXunCha",
      },
    ],
  },
  {
    id: "home-school",
    title: "家校",
    items: [
      {
        id: "hs1",
        icon: "file-text-fill",
        text: "教师课表",
        show: true,
        path: "/pages/view/homeSchool/JiaoShiKeBiao",
      },
      {
        id: "hs2",
        icon: "file-text-fill-2",
        text: "班级课表",
        show: true,
        path: "/pages/view/homeSchool/BanJiKeBiao",
      },
      {
        id: "hs3",
        icon: "file-paper-2-fill",
        text: "家长通讯录",
        show: true,
        path: "/pages/view/homeSchool/parentAddressBook/index",
      },
      {
        id: "hs4",
        icon: "newspaper-fill",
        text: "通知列表",
        show: true,
        path: "/pages/view/notice/index",
      },
      // {
      //   id: "hs5",
      //   icon: "message-3-line",
      //   text: "家校沟通",
      //   show: true,
      //   path: "/pages/view/homeSchool/JiaXiaoGouTong",
      // },
      {
        id: "hs6",
        icon: "filechart2fil",
        text: "成绩分析",
        show: true,
        path: "/pages/view/homeSchool/ChengJiFenXi",
      },
    ],
  },
  {
    id: "hr",
    title: "人事",
    items: [
      {
        id: "hr1",
        icon: "draftfill",
        text: "请假申请",
        show: true,
        path: "/pages/view/hr/leaveApplication/index",
      },
      {
        id: "hr2",
        icon: "file-user-fill",
        text: "教师档案",
        show: true,
        path: "/pages/view/hr/teacherProfile/index",
      },
      {
        id: "hr3",
        icon: "newspaper-fill",
        text: "工资条",
        show: true,
        path: "/pages/view/hr/salarySlip/index",
      },
    ],
  },
]);

// 处理网格项点击事件
const handleGridItemClick = (item: GridItem) => {
  console.log("Clicked item:", item);
  if (item.path) {
    uni.navigateTo({ url: item.path });
  } else {
    uni.showToast({ title: `功能 ${item.text} 暂未开放`, icon: "none" });
  }
};
</script>

<style scoped lang="scss">
.service-page {
  background-color: #f4f5f7; // 页面背景色
  min-height: 100vh;
}

// 顶部 Header
.header-section {
  background-color: #447ade; // 主题蓝色
  color: #ffffff;
  overflow: hidden; // 防止图片溢出

  .header-image {
    width: 100%; // 根据图片实际调整
    height: 204rpx; // 根据图片实际调整
    display: block; // 消除图片底部空隙
  }
}

// 主要内容区域
.main-content {
  padding: 15px;
  position: relative;
}

// 功能分区块
.section-block {
  margin-bottom: 15px;

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 5px; // 微调标题位置

    .title-decorator {
      width: 6px;
      height: 6px;
      background-color: #447ade;
      border-radius: 50%;
      margin-right: 8px;
    }

    text {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }

  .section-grid-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px 5px; // 稍微减少左右 padding，让网格项间距更明显
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: repeat(4, 1fr); // 每行 4 列
    gap: 15px 5px; // 行间距 15px，列间距 5px
  }
}

// 网格项
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer; // 提示可点击

  .grid-icon {
    width: 32px; // 图标尺寸
    height: 32px; // 图标尺寸
    margin-bottom: 8px;
  }

  .grid-text {
    font-size: 12px;
    color: #666;
    // 可能需要限制行数或处理换行
    line-height: 1.3;
  }
}
</style>