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>