77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<view class="book-keeping">
|
||
|
|
<uni-grid :column="2" :showBorder="false" @change="e => changeGrid(e)">
|
||
|
|
<uni-grid-item v-for="menu in menuList" :key="menu.menuId" :index="menu.menuId">
|
||
|
|
<view class="grid-item">
|
||
|
|
<image class="grid-logo" :src="menu.src"></image>
|
||
|
|
<text class="text">{{menu.menuName}}</text>
|
||
|
|
</view>
|
||
|
|
</uni-grid-item>
|
||
|
|
</uni-grid>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
listByParams
|
||
|
|
} from "@/api/system/menu";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// 生活账本菜单列表
|
||
|
|
menuList: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getMenuList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* @param {Object} e
|
||
|
|
* 切换grid事件
|
||
|
|
*/
|
||
|
|
changeGrid(e) {
|
||
|
|
const path = this.menuList.find(item => item.menuId === e.detail.index).path;
|
||
|
|
this.$tab.navigateTo(path + '/index');
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 获取菜单列表
|
||
|
|
*/
|
||
|
|
getMenuList() {
|
||
|
|
listByParams({parentId: 2023}).then(res => {
|
||
|
|
this.menuList = res.data.map(item => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
src: require('@/static/images/function/bookkeeping/' + item.path + '.png')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scope>
|
||
|
|
.book-keeping {
|
||
|
|
padding: 1rem;
|
||
|
|
.uni-grid-item {
|
||
|
|
width: 50%;
|
||
|
|
.grid-item {
|
||
|
|
margin: 0.5rem;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 100%;
|
||
|
|
background-color: $uni-text-color-inverse;
|
||
|
|
border-radius: 0.5rem;
|
||
|
|
.grid-logo {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
width: $uni-img-size-lg;
|
||
|
|
height: $uni-img-size-lg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|