ieplus-app/src/pagesMain/pages/index/components/index-banner.vue

<template>
  <view class="shadow-card mx-30 bg-white overflow-hidden rounded-17 p-2">
    <ie-image :is-oss="true" src="/banner/index-banner-1.png" custom-class="w-full min-h-264 overflow-hidden"
      :round="15" />
    <view class="pt-24 pb-40 bg-white grid grid-cols-4 gap-y-32 justify-items-center">
      <view class="w-fit" v-for="item in validMenus" :key="item.name" @click="navigateTo(item)">
        <ie-image :is-oss="true" custom-class="w-auto h-82" :round="10" :src="item.icon" mode="heightFix" />
        <view class="text-26 text-fore-title">{{ item.name }}</view>
      </view>
    </view>
  </view>
  <view class="mx-30 mt-36">
    <ie-image :is-oss="true" src="/banner/index-banner-2.png" custom-class="w-full min-h-180 bg-back" :round="15" />
  </view>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo } = useTransferPage();
import { useUserStore } from '@/store/userStore';
import { Transfer } from '@/types';
const userStore = useUserStore();
type MenuItem = {
  name: string;
  icon: string;
  pageUrl: string;
  navigateType?: Transfer.TransferType;
  noLogin?: boolean
  visible?: boolean
}
const navigateTo = async (item: MenuItem) => {
  const { pageUrl, navigateType, noLogin } = item;
  if (!noLogin) {
    const isLogin = await userStore.checkLogin();
    if (isLogin) {
      transferTo(pageUrl, {
        type: navigateType || 'navigateTo',
      });
    };
  } else {
    transferTo(pageUrl, {
      type: navigateType || 'navigateTo',
    });
  }
}
const validMenus = computed(() => {
  const menus: MenuItem[] = [
    {
      name: '学习备考',
      icon: '/menu/menu-study.png',
      pageUrl: '/pagesStudy/pages/index/index',
      visible: !userStore.isAuditor,
    },
    {
      name: '志愿填报',
      icon: '/menu/menu-volunteer.png',
      pageUrl: '/pagesMain/pages/volunteer/volunteer',
      navigateType: 'switchTab',
    },
    {
      name: '找院校',
      icon: '/menu/menu-college.png',
      pageUrl: '/pagesOther/pages/college-library/index/index',
    },
    {
      name: '查专业',
      icon: '/menu/menu-major.png',
      pageUrl: '/pagesOther/pages/major/index/index',
      noLogin: true
    },
    {
      name: '看职业',
      icon: '/menu/menu-work.png',
      pageUrl: '/pagesOther/pages/vocation-library/index/index',
      noLogin: true
    },
    {
      name: '自我测评',
      icon: '/menu/menu-test.png',
      pageUrl: '/pagesOther/pages/test-center/index/index',
    },
    {
      name: '单招资讯',
      icon: '/menu/menu-news.png',
      pageUrl: '/pagesOther/pages/news/index/index',
      noLogin: true
    },
    // {
    //   name: '专升本',
    //   icon: '/menu/menu-upgrade.png',
    //   pageUrl: '/pages/index/index',
    // }
  ]
  return menus.filter(item => item.visible !== false);
});
</script>
<style lang="scss" scoped></style>