JCSS / jcss-miniprogram

<template>
  <!-- 外层容器：包含蓝色块 + 原始内容 -->
  <view class="page-container">
    <!-- 加载页：覆盖整个容器，渲染完成后隐藏 -->
    <up-loading-page

        :loading="loading"
        loading-text="加载中..."
        color="#577ee3"
        zIndex="1000"
    ></up-loading-page>

    <!-- 蓝色装饰块：#577ee3 -->
    <view class="blue-decor-block" v-show="!loading"></view>

    <!-- 原始内容容器 -->
    <view class="content-wrap">
      <!-- uview-plus空状态组件 -->
      <u-empty
          v-if="!moduleList.length && !loading"
          mode="permission"
      ></u-empty>

      <!-- 菜单卡片列表（替换grid为flex布局） -->
      <view  class="menu-card-wrap">
        <up-card
            :title-size="18"
            :border="false"
            :shadow="true"
            :foot-border-top="false"
            v-for="(parentModule, index) in moduleList"
            :key="`$parentModule.id_${index}`"
            :title="parentModule.name"
            class="card-container"
        >
          <template #body>
            <!-- 替换up-grid：改用flex流式布局容器 -->
            <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, nextTick } 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[]>([]);

onShow(async () => {
  try {
    loading.value = true;

    const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);
    const menuData = rawMenuData || [];
    moduleList.value = menuData;
    //
    // // await nextTick();
    // setTimeout(() => {
    //   loading.value = false;
    // }, 500);
    loading.value = false;
    console.log('菜单数据：', moduleList.value);
  } catch (error) {
    console.error('获取菜单数据失败：', error);
    moduleList.value = [];
    await nextTick();
    loading.value = false;
  }
});

const handleMenuClick = (item: MenuItem) => {
  if (!item.jumpUrl) {
    uni.showToast({
      title: '暂无跳转链接',
      icon: 'none',
      duration: 2000
    });
    return;
  }
  console.log(item.jumpUrl);
  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%;
}

/* 卡片容器：重置up-card默认样式 */
.card-container {
  --u-card-content-padding: 0; // 取消卡片默认内边距
  border-radius: 8rpx; // 新增：卡片圆角
  overflow: hidden; // 新增：裁剪内部元素
}

/* 核心：小块容器（Flex 流式布局） */
.card-content {
  display: flex;
  flex-wrap: wrap; // 自动换行
  gap: 20rpx; // 关键：小块之间的上下+左右间距统一

}

/* 小块样式：一行最多4个，宽度自适应 + 内部flex布局 */
.content-block {
  // 宽度计算：(100% - 3*间距) / 4 （4个元素有3个间距）
  width: calc((100% - 3 * 20rpx) / 4);
  // 小块内部样式：改用flex布局，确保子元素居中
  display: flex;
  flex-direction: column;
  align-items: center; // 水平居中（核心：解决图片不居中问题）
  justify-content: center; // 垂直居中（可选，优化视觉）
  padding: 24rpx 0;
  border-radius: 8rpx;
  text-align: center;
  // 点击反馈
  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>