94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
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>
|