JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 加载页 -->

      <up-loading-page

          :loading="loading"

          loading-text="加载中..."
          color="#577ee3"

          zIndex="1000"

      ></up-loading-page>
  

      <!-- 蓝色装饰块 -->

      <view class="blue-decor-block" v-show="!loading"></view>

      <!-- 内容容器 -->

      <view class="content-wrap">

        <!-- 空状态：过滤后无数据且非加载中时显示 -->

        <u-empty

            v-if="!filteredModuleList.length && !loading"

            mode="permission"

        ></u-empty>
  

        <!-- 菜单卡片列表：仅渲染有子节点的父模块 -->
        <view class="menu-card-wrap">

          <up-card

              :title-size="18"

              :border="false"
              :shadow="true"
              :foot-border-top="false"

              v-for="(parentModule, index) in filteredModuleList"

              :key="`$parentModule.id_${index}`"

              :title="parentModule.name"

              class="card-container"

          >

            <template #body>

              <view class="card-content">
                <view
                    v-for="(listItem, listIndex) in parentModule.children"
                    :key="listItem.id"
                    class="content-block"
                    @click="handleMenuClick(listItem)"

                >

                  <u-image
                      :src="listItem.icon"
                      mode="aspectFit"
                      width="80rpx"
                      height="80rpx"
                      lazy-load
                      radius="16rpx"
                      class="block-icon"
                  ></u-image>
                  <text class="grid-text">{{ listItem.name }}</text>
                </view>

              </view>
            </template>
          </up-card>

        </view>
      </view>
    </view>
  </template>
  

  <script setup lang="ts">

  import { ref, computed } from 'vue'; // 新增 computed

  import { onShow } from '@dcloudio/uni-app';
  import { useUserStore } from '@/pinia/user';
  import globalConfig from '@/common/config/global';
  import cache from '@/common/utils/cache';

  
  interface MenuItem {
    id: number;
    name: string;
    subtitle?: string;
    type: number;
    sort: number;
    parentId: number;
    icon: string;
    jumpUrl: string;
    miniAppId?: string;
    badgeText?: string;
    badgeColor?: string;
    statisticCount: number | null;
    hasStatistic: boolean;
    extra: any;
    children: MenuItem[];
  }

  const loading = ref(true);

  const userStore = useUserStore();

  const moduleList = ref<MenuItem[]>([]);
  

  // 计算属性：过滤出有子节点的父模块（children 存在且长度 > 0）
  const filteredModuleList = computed(() => {
    return moduleList.value.filter(item => {
      // 确保 children 是数组且长度大于 0
      return Array.isArray(item.children) && item.children.length > 0;
    });
  });
  

  onShow(async () => {

    try {

      loading.value = true;

  
      // ========== 核心新增：登录状态判断 ==========
      // 1. 定义登录判断逻辑（多维度校验，确保准确性）
      const isLogin = () => {
  
        // 从缓存获取token（核心登录标识）
        const token = cache.get(globalConfig.cache.tokenKey) || userStore.token;
        // 从缓存/Pinia获取用户信息
        const userInfo = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo;
        // 满足任一核心条件即视为已登录
        return  (!!token && !!userInfo);
      };
  
      // 2. 未登录处理：跳转登录页，阻止后续逻辑执行
      if (!isLogin()) {
        uni.showToast({ title: '请先登录', icon: 'none', duration: 1500 });
        // 延迟跳转，确保提示语正常显示
        setTimeout(() => {
          // 使用reLaunch跳转，清空页面栈，避免返回当前菜单页
          uni.reLaunch({
            url: '/pages/login/login', // 替换为你的实际登录页路径
            fail: (err) => {
              console.error('跳转登录页失败：', err);
              uni.showToast({ title: '跳转登录页异常', icon: 'none' });
            }
          });
        }, 1500);
        // 隐藏加载状态
        loading.value = false;
        // 终止后续代码执行
        return;
      }
  

      const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);

      moduleList.value = rawMenuData || [];

      loading.value = false;

      console.log('原始菜单数据：', moduleList.value);
      console.log('过滤后有子节点的父模块：', filteredModuleList.value);

    } catch (error) {
      console.error('获取菜单数据失败：', error);
      moduleList.value = [];

      loading.value = false;

    }

  });

  const handleMenuClick = (item: MenuItem) => {
    if (!item.jumpUrl) {

      uni.showToast({ title: '暂无跳转链接', icon: 'none', duration: 2000 });

      return;

    }

    uni.navigateTo({
      url: item.jumpUrl,
      fail: (err) => {
        console.error('页面跳转失败：', err);

        uni.showToast({ title: '页面路径错误', icon: 'none', duration: 2000 });

      }
    });

  };
  </script>
  

  <style scoped lang="scss">

  .page-container {

    position: relative;
    min-height: 100vh;

  }

  .blue-decor-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: #577ee3;
    z-index: 1;

  }

  .content-wrap {
    position: relative;
    z-index: 2;

    padding: 120px 0 0;

    display: flex;
    flex-direction: column;

    gap: 20rpx;

  }
  

  .menu-card-wrap {
    width: 100%;
  }
  

  .card-container {

    --u-card-content-padding: 0;
    border-radius: 8rpx;
    overflow: hidden;

  }
  

  .card-content {
    display: flex;

    flex-wrap: wrap;
    gap: 20rpx;

  }
  

  .content-block {

    width: calc((100% - 3 * 20rpx) / 4);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
    padding: 14rpx 0;

    border-radius: 8rpx;

    touch-action: manipulation;
    transition: background-color 0.2s;

  }

  .content-block:active {
    background-color: #e9ecef;
  }

  .block-icon {

    display: block;
    margin: 0 auto;

  }
  

  .grid-text {

    font-size: 26rpx;

    color: #333;
    text-align: center;
    margin-top: 10rpx;

    display: block;

  }

  </style>