parking_inspection/pages/index/chooseRoad/chooseRoad.vue

<template>
	<view class="road">
		<view class="road-list">
			<view class="road-list-item" v-for="(item, index) in roadList" :key="index" @click="jumpPage(type, { roadName: item.roadName })">
				<view class="road-list-item-icon">
					<u--image src="./../../../static/icons/road-icon.png" width="50rpx" height="60rpx"></u--image>
				</view>
				<view>{{ item.roadName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roadList: [
					{
						roadName: '可处路'
					},
					{
						roadName: '党固路'
					}
				],
				type: 1
			}
		},
		onLoad(page) {
			if (page.type) {
				this.type = page.type
				switch (Number(this.type)){
					case 1:
						this.roadList = [{roadName: '本杰路'}, { roadName: '丰林路' }]
						break;
					case 2:
						this.roadList = [{roadName: '顺时路'}, { roadName: '党固路' }]
						break;
					case 3:
						this.roadList = [{roadName: '税务大楼'}, { roadName: '政务大楼' }]
						break;
				}
			}
		},
		methods: {
			jumpPage(type, params) {
				let url
				switch (Number(type)){
					case 1:
						url = 'pages/index/geomagDetails/geomagDetails'
						break;
					case 2:
						url = 'pages/index/lockDetails/lockDetails'
						break;
					case 3:
						url = 'pages/index/gateDetails/gateDetails'
						break;
				}
				uni.$u.route({
					url,
					params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.road {
	&-list {
		padding: 40rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		&-item {
			text-align: center;
			color: #1e1e1e;
			font-size: 26rpx;
			width: 33%;
			margin-bottom: 40rpx;
			&-icon {
				text-align: center;
				width: 50rpx;
				margin: 0 auto 20rpx;
			}
		}
	}
}
</style>