jp-floorlock-phone/pages/index/main/parkingDetails.vue

<template>
	<view class="jpmain ">
		<view class="title">
			<view class="name">
				<view class="stationName">
					<img class="img" src="@/assets/img/parkingDetails/item1.png" alt="">
					<span class="item1">{{parkingInfo.name}}</span>
				</view>
				<view class="address" v-if="parkingInfo.distance">
					<img class="img" src="@/assets/img/if-location-pin@1x-2.png" alt="">
					<span class="item1">{{distanceN(parkingInfo.distance)}}</span>
				</view>
			</view>
			<view class="value" @click="gotoMain">
				<view class="item1">
					<img class="img" src="@/assets/img/parkingDetails/item2.png" alt="">
				</view>
				<view class="item2">切换</view>
			</view>
		</view>
		<view class="body">


			<view class="describe ">
				<view class="item1">
					地址：<span>{{parkingInfo.address}}</span>
				</view>
				<view class="item2">
					<view class="item-a">
						车位总数：<span>{{floorlockInfoList.length}}个</span>
					</view>
					<view class="item-b">
						空闲车位：<span>{{idleNum}}个</span>
					</view>
					<view class="item-c" @click="gotoUrl('pages/index/main/lockInfo')">
						<img class="img" src="@/assets/img/if-location-pin@1x.png" alt="">
						降锁说明
					</view>
				</view>

			</view>
			<u-empty text="列表为空" mode="list" margin-top="80"  v-if="!floorlockInfoList.length"></u-empty>
			
			<view class="data " v-if="floorlockInfoList.length">
				<view class="info">
					<view class="name">请选择空闲车位</view>
					<view class="value">

						<img class="img" src="@/assets/img/parkingDetails/item3.png" alt="">
						<span class="item1">使用中</span>

						<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">

						<span>空闲</span>

					</view>
				</view>
				<view class="list">
					<view  v-for="(item,i) in floorlockInfoList  " 
					@click="gotoInfoLock(item)"
					class="item" >
						<view class="name">
							<img class="img" v-if="item.lockStatus==0"
							 src="@/assets/img/parkingDetails/item3.png" alt="">
							<img class="img"  v-else
							src="@/assets/img/parkingDetails/item4.png" alt="">
							
							{{item.name}}
						</view>
						<view class="value">
							<view class="jpbutton jpbutton1" v-if="item.lockStatus==0" >
								<img class="img" src="@/assets/img/button/lock.png" alt="">
								降锁
							</view>
							<view class="jpbutton jpbutton4" v-if="item.lockStatus==1">
								使用中
							</view>
							<view class="jpbutton jpbutton5" v-if="item.lockStatus==2">
								异常
							</view>
						</view>
					</view>
					
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	
	export default {
		data() {
			return {
				id:"",
				floorlockInfo:{},
				floorlockInfoList:[],
				parkingInfo:[],
				latitude: 30.337053,
				longitude: 112.240222,
				point:false,//是否获取了定位
				setIntervalId:"",
			}
		},
		onLoad(op) {
			this.id=op.id
			this.getParkingDetails()
			
			
		},
		onReady() {
			this.setIntervalId=setInterval(()=>{
				this.getParkingFloorlockList(1)
			},1000*5)
		},
		onUnload() {
			//setInterval
			if(this.setIntervalId){
				clearInterval(this.setIntervalId)
			}
			
		},
		computed:{
			idleNum(){
				var num=0;
				this.floorlockInfoList.forEach(item=>{
					if(item.lockStatus==0){
						num++
					}
				})
				return num
			}
		},
		methods: {
			gotoMain(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			getParkingDetails(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj={
					id:this.id
				}
				if(this.point){
					obj.longitude=this.longitude
					obj.latitude=this.latitude
				}
				API.parkingDetails(obj).then((res) => {
					this.parkingInfo=res.data.parkingInfo
					this.getParkingFloorlockList()
					uni.hideLoading();
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			},
			gotoInfoLock(item){
				if(item.lockStatus==0){
					this.gotoUrl('pages/index/main/lockInfo?id='+item.id)
					
				}else if(item.lockStatus==1){
					uni.showToast({
						title: "使用中",
						icon: "none"
					})	
				}else if(item.lockStatus==2){
					uni.showToast({
						title: "设备异常",
						icon: "none"
					})	
				}
			},
			getParkingFloorlockList(bl){
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				var obj={
					parkingId:this.id
				}
				
				API.parkingFloorlockList(obj).then((res) => {
					this.floorlockInfoList=res.data.floorlockInfoList
					if(!bl){
						uni.hideLoading();
					}
					
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		background-color: rgba(22, 119, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx;
		color: rgba(255, 255, 255, 1);

		.name {
			display: flex;
			align-items: center;

			.stationName {
				font-size: 40rpx;

				display: flex;
				align-items: center;

				.item1 {
					margin: 0 24rpx;
				}
				.img{
					width: 56rpx;
					height: 56rpx;
				}

			}

			.address {
				font-size: 28rpx;

				display: flex;
				align-items: center;

				.item1 {
					margin: 0 8rpx;
				}
				.img{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.value {
			display: flex;
			flex-direction: column;
			align-items: center;
			.item1{
				.img{
					width: 36rpx;
					height: 36rpx;
				}
			}
			.item2 {
				font-size: 24rpx;

			}
		}
	}

	.describe {
		font-size: 32rpx;
		color: rgba(119, 119, 119, 1);
		padding-bottom: 32rpx;
		border-bottom: 1px solid rgba(232, 232, 232, 1);

		.item1 {
			span {
				color: rgba(51, 51, 51, 1);
			}

			padding-bottom: 16rpx;
		}

		.item-a {
			span {
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		.item-b {
			span {
				color: rgba(0, 185, 98, 1);
				font-weight: bold;
			}
		}

		.item-c {
			color: rgba(22, 119, 255, 1);
			display: flex;
			align-items: center;
			.img{
				width: 32rpx;
				height: 32rpx;
			}

		}

		.item2 {
			display: flex;
			justify-content: space-between;
		}

	}

	.data {
		

		.info {
			margin: 32rpx 0;
			padding: 16rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 8rpx;

			border: 1px solid rgba(216, 220, 226, 1);

			.value {
				display: flex;
				align-items: center;

				.item1 {
					margin-right: 40rpx;
				}
				.img {
					width: 32rpx;
					height: 32rpx;
				}
				span {
					margin-left: 8rpx;
				}
			}
		}

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.name {
					font-weight: bold;
					font-size: 36rpx;
					display: flex;
					align-items: center;

					.img {
						width: 50rpx;
						height: 50rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
	}

	.jpbutton {
		border-radius: 100rpx;
		width: 160rpx;
		color: #fff;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.img{
				margin-right: 8rpx;
				width: 32rpx;
				height: 32rpx;
		}
	}

	.jpbutton1 {
		background-color: #2979FF;
		.img {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.jpbutton2 {
		background-color: #2979FF;

		.img {
			width: 40rpx;
			height: 40rpx;
			animation: spin 2s linear infinite;
			/* 添加无限旋转动画 */
		

		}

		/* 定义旋转动画 */
		@keyframes spin {
			from {
				transform: rotate(0deg);
				/* 起始角度 */
			}

			to {
				transform: rotate(360deg);
				/* 结束角度 */
			}
		}
	}

	.jpbutton3 {
		background-color: #00B962;
	}

	.jpbutton4 {
		background-color: #A7A2A2;
	}
	.jpbutton5 {
		background-color: red;
	}
</style>