parking-manage-mobile/pages/parking/myparkings.vue

<template>
	<view class="container">
		<u-navbar title="我的停车场"  :background="{backgroundColor: '#ffffff'}" class="top-navbar" title-size="30">
		</u-navbar>
		<view class="parking-panel" v-for="(item,index) in parkingSites" :key="item.park_id">
			<view class="panel-left">
				<text class="left-title">{{item.parking_name}}</text>
				<text class="left-txt">{{item.address_}}</text>
				<!-- <view class="left-txt">总车位数<text class="num-txt">{{item.total_parking_number}}</text> <!-- / <text class="newpower-txt">新能源车位<text class="num-txt">40</text></text> </view>--> 
			</view>
			<u-icon name="arrow-right" style="padding:15rpx;" @tap="showDtl(item.park_id)"></u-icon>
		</view>
		
		
	</view>
</template>

<script>
	import * as api from '@/apis/myparkings.js'
	
	export default {
		data() {
			return {
				parkingSites:[]
			}
		},
		onLoad(){
			this.loadPageData();
			
		},
		methods: {
			showDtl(id){
				uni.navigateTo({
					url:'parkingSiteDes?park_id='+id
				})
			},
			loadPageData(){
				uni.showLoading({
					title:'加载中...'
				});
				api.loadPageData().then(resp => {
					console.log(resp);
					uni.hideLoading();
					if(!resp.success){
						uni.showToast({
							title:resp.msg||'加载数据失败',
							icon:'none'
						})
						
						return;
					}
					this.parkingSites=resp.data;
				}).catch(error => {
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style>
	page{
			
			background-color: #f4f4f4;
			padding:15rpx;
			font-family: '宋体';
		}
		
	.parking-panel{
		background-color: #ffffff;
		border-radius: 10rpx;
		padding:20rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.parking-panel .panel-left{
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		align-items: flex-start;
		font-family: '华文行楷';
		
	}
	.parking-panel .panel-left .left-txt{
		font-size:24rpx;
		color:#695f5f;
		margin-top:15rpx;
		
	}
	.parking-panel .panel-left .left-title{
		font-weight: bold;
		font-size:32rpx;
		
		color:#000000;
	}
	.left-txt .num-txt{
		font-size: 28rpx;
		font-weight: bold;
		margin:0rpx 10rpx;
	}
	.newpower-txt{
		color:#27bf3e;
		margin:0rpx 10rpx;
	}
</style>