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">
      <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="14"
            :titleColor="'#000'"
            :border="false"
            :shadow="true"
            :head-style="{
             fontWeight:'500'
            }"
            :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="48px"
                    height="48px"
                    lazy-load
                    radius="8px"
                    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[]>([]);
const userInfo = ref<any>(cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {});

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

onShow(async () => {
  try {
    loading.value = true;
    userInfo.value = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {};

    // 登录状态判断（多维度校验，确保准确性）
    const isLogin = () => {
      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%;
  padding: 80px 15px 115px;
  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;

  .welcome-text {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
  }

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

.content-wrap {
  position: relative;
  z-index: 2;
  padding: 125px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.card-container {
  --u-card-content-padding: 0;
  border-radius: 4px;
  overflow: hidden;
}

.card-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.content-block {
  width: calc((100% - 3 * 10px) / 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 0;
  border-radius: 4px;
  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: 13px;
  color: #1C1C1C;
  text-align: center;
  margin-top: 5px;
  display: block;
}
</style>