ieplus-app/src/pagesStudy/pages/index/compoentns/index-menu.vue

<template>
  <view class="menu-container">
    <template v-for="menu in menus" :key="menu.label">
      <view class="menu-item" v-if="menu.visible" @click="navigateTo(menu)">
        <ie-image :is-oss="true" :src="menu.icon" custom-class="w-98 h-110" />
        <view class="text-26 text-fore-title">{{ menu.label }}</view>
      </view>
    </template>
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';

const { transferTo, routes } = useTransferPage();
const userStore = useUserStore();
type MenuItem = {
  label: string;
  icon: string;
  pageUrl: string;
}
const menus = computed(() => [
  {
    label: '课程学习',
    icon: '/menu/menu-course.png',
    pageUrl: routes.pageCourseStudy,
    visible: true
  },
  {
    label: '组卷作业',
    icon: '/menu/menu-exam.png',
    pageUrl: routes.pageHomework,
    visible: userStore.isStudent
  },
  {
    label: '收藏夹',
    icon: '/menu/menu-favorite.png',
    pageUrl: routes.pageCollect,
    visible: true
  },
  {
    label: '错题本',
    icon: '/menu/menu-mistake.png',
    pageUrl: routes.pageWrongBook,
    visible: true
  },
  {
    label: '学习记录',
    icon: '/menu/menu-record.png',
    pageUrl: routes.pageStudyHistory,
    visible: true
  }
])
const navigateTo = (menu: MenuItem) => {
  if (menu.label === '错题本') {
    transferTo(routes.pageWrongBook, {
      data: {}
    });
  } else {
    transferTo(menu.pageUrl);
  }
}
</script>
<style lang="scss" scoped>
.menu-container {
  @apply mx-30 mt-32 grid grid-cols-5 items-center gap-x-20;
}

.menu-item {
  @apply flex flex-col items-center justify-center;
}
</style>