parking_h5/pages/parkingInformation/parkingInformation.vue

<template>
	<view class="parking-information">
		<view class="parking-information-slider">
			<image src="../../static/img/parking-info-bg.png" mode=""></image>
		</view>
		<view class="parking-information-content">
			<view class="parking-information-content-title">
				<view class="pict-left">
					<view class="title">{{roadInfo.areaName}}</view>
					<view class="subtitle">{{roadInfo.roadName}}</view>
				</view>
				<view class="pict-right" @click="navigation(roadInfo.latitude, roadInfo.longitude)">
					<image src="../../static/img/distance-icon.png" mode=""></image>
					<view class="m">{{roadInfo.distance|kmUnit}}</view>
				</view>
			</view>
			<view class="parking-information-content-time">
				<view>服务时间：<text>{{roadInfo.workBeginTime}}-{{roadInfo.workEndTime}}</text></view>
				<view>包月费用：<text>{{roadInfo.monthAmount}}</text>元</view>
			</view>
			<view class="parking-information-content-cars">
				<view class="picc-tag">
					<view>{{roadInfo.spaceTotal}}</view>
					<view>共有车位</view>
				</view>
				<view class="picc-tag">
					<view>{{roadInfo.spaceIdle}}</view>
					<view>空闲车位</view>
				</view>
			</view>
			<view class="parking-information-content-price" @click="lookParkingRule(roadInfo)">
				<text>点击查看停车规则</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<u-button class="parking-information-content-button" @click="createMonth(roadInfo)">办理包月</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roadInfo:[],
			}
		},
		onLoad(page) {
			this.roadInfo = JSON.parse(page.roadInfo);
			console.log('this.roadInfo',this.roadInfo);
		},
		methods: {
			/**
			 * 跳转停车标准页面
			 * {roadNo} 路段编码
			  * */
			lookParkingRule (item) {
				this.$u.route({
					url: 'pages/chargeStandard/chargeStandard',
					params: {
						roadNo: item.roadNo
					}
				})
			},
			createMonth(item){
				this.$u.route({
					url: 'pages/handleMonthly/handleMonthly',
					params: {
						roadNo:item.roadNo
					}
				});
			},
			/**
			  * 导航 
			  * */
			navigation (lat, lon) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					scale: 18
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
@import './parkingInformation';
</style>