BomApp/pages/index/index.vue

<template>
	<view class="page">
		<view class="content">
			<view class="group">
					<button v-for="(button, index) in buttons" class="button" @click="onHandleClick(button)">
						<uni-icons :type="button.icon" :size="button.size" />
						<view>{{button.name}}</view>
					</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryUser
	} from "@/services/index";
	
	import {buttons} from './buttonConfig.js'

	export default {
		data() {
			return {
				user: {},
				buttons: buttons.filter(item=>item.show)
			};
		},
		onShow() {
			this.getCurrentUser();
		},
		computed: {
			permission() {
				let permission = {};
				this.user?.Permissions.forEach((item) => {
					permission = {
						...permission,
						...item.Menus,
					};
				});
				return permission;
			},
		},
		methods: {
			onHandleClick(button) {
				uni.navigateTo({
					url: button.url,
				})
			},
			async getCurrentUser() {
				let res = {};
				res = await queryUser();
				this.user = res.data;
			},
		},
	};
</script>

<style lang="less" scoped>
	.content {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		background: none;
		
	}

	.group {
		width: calc(100% - 30px);
		height: calc(100% - 30px);
		padding: 20px 10px;
		border-radius: 5px;
		background-color: #ffffff;
		overflow-y: scroll;
		// 每行两个，三行
		display: grid;
		grid-template-columns: repeat(2, 45%);
		// grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(4, 300rpx);
		grid-row-gap: 10px;
		grid-column-gap: 10px;
		justify-content: space-evenly;
		justify-items: center;
		align-content: flex-start;
		align-items: center;
		
	}

	.button {
		width: 100%;
		margin: 5px;
		height: 300rpx;
		font-size: 32rpx;
		background-color: #edf1f7;
		box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1) ;
	}

	
</style>