tiechang_erp_mini/src/pages/bills/index.vue

<template>
  <view class="bills-page">
    <!-- 整页分区宫格：所有域一次铺开，上下滚动看全，无需左右滑 -->
    <view v-for="group in billGroups" :id="'pkg-' + group.pkg" :key="group.pkg" class="card">
      <view class="card__head">
        <text class="card__title">{{ group.icon }} {{ group.title }}</text>
        <text class="card__count">{{ group.modules.length }} 项</text>
      </view>
      <view class="grid">
        <view v-for="m in group.modules" :key="m.key" class="grid__item">
          <ModuleGridCell :title="m.title" :color="domainColor(group.pkg)" @click="openModule(m)" />
        </view>
      </view>
    </view>

    <!-- 右侧域索引：点击直达对应分区 -->
    <view v-if="billGroups.length > 3" class="side-index">
      <view
        v-for="g in billGroups"
        :key="g.pkg"
        class="side-index__item"
        @click="scrollToGroup(g.pkg)"
      >
        <text class="side-index__text">{{ g.title.slice(0, 2) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 单据页：业务域分区宫格目录（注册表驱动，菜单权限过滤，剔除报表中心）
 * 右侧域索引快速定位；待办总数同步「单据」tab 角标。
 */
import { computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import type { ModuleConfig } from '@/modules/registry'
import { useMenuStore } from '@/store/modules/menu'
import { useTodoStore } from '@/store/modules/todo'
import { requireLogin } from '@/utils/auth'
import { moduleListPage } from '@/constants/routes'
import { domainColor } from '@/modules/domainStyle'
import ModuleGridCell from '@/components/common/ModuleGridCell.vue'

const menuStore = useMenuStore()
const todoStore = useTodoStore()

// 单据页展示的域（菜单权限驱动，排除报表中心——报表从工作台进入）
const billGroups = computed(() => menuStore.visibleBillGroups)

onShow(() => {
  requireLogin()
  menuStore.ensureMenus().catch(() => {})
  todoStore
    .ensureTodos()
    .then(() => todoStore.syncTabBadge())
    .catch(() => {})
})

function scrollToGroup(pkg: string) {
  uni.pageScrollTo({ selector: `#pkg-${pkg}`, duration: 200, offsetTop: -16 })
}

function openModule(m: ModuleConfig) {
  if (!menuStore.isModuleAllowed(m.key)) {
    uni.showToast({ title: '无该功能权限', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `${moduleListPage(m.pkg)}?module=${m.key}` })
}
</script>

<style lang="scss" scoped>
.bills-page {
  min-height: 100vh;
  background: #f2f5fa;
  padding-bottom: 40rpx;
}

.card {
  margin: 24rpx 24rpx 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8rpx;
  }

  &__title {
    font-size: 28rpx;
    font-weight: 600;
    color: #303133;
  }

  &__count {
    font-size: 22rpx;
    color: #909399;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;

  &__item {
    width: 25%;
  }
}

.side-index {
  position: fixed;
  right: 8rpx;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24rpx;
  padding: 8rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  z-index: 20;

  &__item {
    padding: 10rpx 16rpx;
    display: flex;
    justify-content: center;

    &:active {
      opacity: 0.6;
    }
  }

  &__text {
    font-size: 22rpx;
    color: #606266;
  }
}
</style>