yshop-pro-uniapp/pages/index/components/GridMenu/index.vue

<!--
    @name: 宫格菜单
    @author: kahu4
    @date: 2023-11-02 15:35
    @description：index
    @update: 2023-11-02 15:35
-->
<script setup>
import { useRouter } from "@/hooks/useRouter";
import { menuList } from "@/pages/index/components/GridMenu/index.data";
import { useInterface } from "@/hooks/useInterface";

const {push} = useRouter()

const {toast} = useInterface()

function handleClickItem(menu) {
  if (!menu.path) return toast({title:'敬请期待'})
  // todo 这里可以通过判断menu.path去处理跳转参数
  push({url: menu.path})
}
</script>

<template>
  <blank size="15"></blank>

  <view class="menu-container">
    <view class="menu-inner">
      <template
          v-for="menu in menuList"
          :key="menu.id"
      >
        <view
            class="menu-inner-item"
            @tap="handleClickItem(menu)"
        >
          <view class="menu-inner-item__icon">
            <image
                class="image"
                :src="menu.icon"
                mode="widthFix"
            />
          </view>
          <view class="menu-inner-item__name">
            {{ menu.label }}
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<style
    scoped
    lang="scss"
>
.menu-container {
  width: 100%;
  padding: 0 35rpx;
  box-sizing: border-box;

  .menu-inner {
    display: flex;
    align-items: center;
    height: 144rpx;
    background: #fff;
    border-radius: 15rpx;

    &-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .image {
        width: 50rpx;
        height: 50rpx;
        display: block;
      }

      &__name {
        margin-top: 18rpx;
        line-height: 32rpx;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
}


</style>