代码提交

pages/index/components/GridMenu/index.vue

@@ -0,0 +1,93 @@
+<!--
+    @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>