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">
      <!-- ✅ 修复1：增加可选链+默认值，防止数据为undefined报错 -->
      <text class="welcome-text u-line-1">你好{{userInfo?.user?.nickname || ''}}，欢迎登录</text>
      <text class="platform-name">全域智能运营管理平台</text>
    </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';
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[]>([]);
// ✅ 修复2：声明全局的用户信息变量，模板可访问 + 初始化空对象兜底，杜绝undefined
const userInfo = ref<any>(cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {});

// 计算属性：过滤出有子节点的父模块（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;
    // ✅ 修复3：重新赋值全局userInfo，保证数据最新
    userInfo.value = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {};

    // 登录状态判断（多维度校验，确保准确性）
    const isLogin = () => {
      // 从缓存获取token（核心登录标识）
      const token = cache.get(globalConfig.cache.tokenKey) || userStore.token;
      // 从全局变量取值，无需再声明局部变量
      const userInfoVal = userInfo.value;
      console.log('当前用户信息：', userInfoVal?.user);
      // 满足任一核心条件即视为已登录
      return !!token && !!userInfoVal;
    };

    // 未登录处理：跳转登录页，阻止后续逻辑执行
    if (!isLogin()) {
      uni.showToast({ title: '请先登录', icon: 'none', duration: 1500 });
      // 延迟跳转，确保提示语正常显示
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/index',
          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: 260px;
  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 1;
  color:#fff;
  text-align: left;
  padding-left: 20px;
  .welcome-text {
    padding-top: 80px;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
  }

  .platform-name {
    margin-bottom: 10px;
    font-size: 16px;
    display: block;
    opacity: 0.95;
  }
}

.content-wrap {
  position: relative;
  z-index: 2;
  padding: 140px 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;
  //padding: 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>