transport_integrated_app/pages/home/home.vue

<template>
	<view class="home_warp">
		<view class="home_box">
			<view v-if="filterRoute.indexOf(item.meta.title) > -1" @click="goPage(item)" class="home_item" v-for="(item, index) in routeData" :index="index" :key="index">
				<image :src="imgFix + item.name.replace('/','') + '.png'" class="img"></image>
				<view class="txt">{{item.meta.title}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				imgFix: '/static/image/',
				routeData: [], //路由权限
				filterRoute:['机场','地铁','道路运输','铁路','水运','高速','港口','公交'],//排除非小程序菜单
			}
		},
		onShow() {
			if (uni.getStorageSync('satoken') && this.routeData.length == 0) {
				this.getRouters();
			}else if (!uni.getStorageSync('satoken')){
				console.log('未登录')
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			//拉取权限路由
			getRouters() {
				this.$request(getApp().globalData.baseUrl + '/api/login/getRouters', {}, 'GET').then(res => {
					if(res.code == 200) {
						console.log('权限路由');
						this.routeData = res.data;
					}
				}).catch(() => {
				})
			},
			goPage(item) {
				uni.navigateTo({
					url: '/pages/home/index?routers=' + JSON.stringify(item)
				})
			},
			//获取图形验证码
			getVerCode() {
				this.$request1(getApp().globalData.baseUrl + '/api/common/captchaBase64?type=5&_t=' + Date.parse(new Date()), {},
					'GET').then(res => {
					if (res.code == 200) {
						this.codeImg = res.data.img;
					}
				}).catch(() => {
					console.log('vercode err')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home_warp {
		height: calc(100vh - 60rpx);
		padding: 30rpx 50rpx;
		background-color: #fff;
		overflow: auto;

		.home_box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.home_item {
			width: 300rpx;
			height: 300rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 4rpx 10rpx 30rpx 1rpx rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.img {
				width: 128rpx;
				height: 128rpx;
				margin: 50rpx auto 12rpx;
			}

			.txt {
				color: #333;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
			}
		}
	}

	button {
		background-color: #007aff;
		color: #ffffff;
	}
</style>