jp-floorlock-phone/pages/information/parkingInfo.vue

<template>
	<view>
		<view class="top-step">
			<u-steps :list="numList" activeColor="#00B962"
			 mode="number" :current="current" un-active-color="#999999"></u-steps>
		</view>
		<view class="top" :class="'top'+current">
			
			<view class="view1 viewa">
				<view class="name">
					扫码订单
				</view>
				<view class="time">
					{{showTime(info.userParkingRecord.createTime)}}
				</view>
			</view>
			<view class="view1 viewb">
				<view class="name">
					落锁使用
				</view>
				<view class="time">
					{{showTime(info.userParkingRecord.startTime)}}
				</view>
			</view>
			<view class="view1 viewc">
				<view class="name">
					结束抬锁
				</view>
				<view class="time">
					{{showTime(info.userParkingRecord.endTime)}}
				</view>
			</view>
		</view>
		<view class="main">
			<view class="item">
				<view class="name">
					停车状态

				</view>
				<view class="value" :class="'userParkingRecord-status'+info.userParkingRecord.status">
					{{(info.userParkingRecord.statusN)}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					停车时长

				</view>
				<view class="value">
					{{getTime(info.userParkingRecord)}}
				</view>
			</view>
			<view class="item" v-if="info.parkingInfo">
				<view class="name">
					停车场

				</view>
				<view class="value">
					{{info.parkingInfo.name}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					车位号

				</view>
				<view class="value">
					{{info.floorlockInfo.name}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					车位类型

				</view>
				<view class="value">
					{{info.floorlockInfo.typeN}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					停车单号
			
				</view>
				<view class="value">
					{{info.userParkingRecord.orderNo}}
				</view>
			</view>
			

			
		</view>
		
		<view class="main">
			<view class="item">
				<view class="name">
					地锁状态

				</view>
				<view class="value">
					{{info.floorlockInfo.lockStatusN}}
				</view>
			</view>
			<view class="item" v-if="0">
				<view class="name">
					电池电量

				</view>
				<view class="value">
					123
				</view>
			</view>
			
			
		</view>
		
		<view class="main" v-if="info.recordUser">
			<view class="item">
				<view class="name">
					用户名

				</view>
				<view class="value">
					{{info.recordUser.nickName?info.recordUser.nickName:'未填写'}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					用户类型

				</view>
				<view class="value">
					停车用户

				</view>
			</view>
			<view class="item">
				<view class="name">
					联系方式

				</view>
				<view class="value">
					{{info.recordUser.phone?info.recordUser.phone:'未填写'}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					车牌号

				</view>
				<view class="value">
					{{info.recordUser.carNumber?info.recordUser.carNumber:'未填写'}}
				</view>
			</view>
			
			
		</view>
	</view>
</template>


<script>
	import * as API from '@/apis/pagejs/index.js'
	import {
		newDate,
	
	} from '@/apis/utils'
	export default {
		data() {
			return {
				current: 0,
				numList: [{
					name: ''
				}, {
					name: ''
				}, {
					name: ''
				}],
				info:{
					parkingInfo:{},
					userParkingRecord:{},
					recordUser:{},
					floorlockInfo:{}
				}
			};
		},
		onLoad(op) {
			this.id = op.id
			this.getInfo()
		
		},
		methods: {
			getTime(item){
				if(item.startTime&&item.endTime){
					var stime=newDate(item.startTime)
					var etime=newDate(item.endTime)
					//etime=new Date()
					var k=(etime.getTime()-stime.getTime())/1000/60
					
					var H=k/60
					var fen=k%(60)
					var str="";
					if(k>60){
						str+=parseInt(H)+'小时'
					}
					if(fen==0&&str!=''){
						
					}else{
						str+=parseInt(fen)+'分钟'
					}
					return str
				}else{
					return '未结束'
				}
			},
			showTime(time){
					if(time){
						return time.substr(5).replace('-','.')
					}else{
						return ''
					}
			},
			getInfo() {
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id
				}
			
				API.recordDetails(obj).then((res) => {
					this.info = res.data
			
					uni.hideLoading();
					this.current=this.info.userParkingRecord.status
					
					//this.getWhiteList()
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
		
	}
</script>

<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style lang="scss" scoped>
	.top-step{
		margin-top: 40rpx;
	}
	.top{
		margin-bottom: 40rpx;
		display: flex;
		    justify-content: space-between;
			
			.view1{
				width: 33%;
				    text-align: center;
					.name{
						color: rgba(51,51,51,1);
						font-size: 28rpx;
					}
					.time{
						color: rgba(119,119,119,1);
						font-size: 20rpx;
					}
			}
	}
	.top0{
		.viewb,.viewc{
			.name{
				color: rgba(119,119,119,1);
			}
			
		}
	}
	.top1{
		.viewc{
			.name{
				color: rgba(119,119,119,1);
			}
			
		}
	}
	.main{
		margin-bottom: 24rpx;
		background: #fff;
		.item{
			display: flex;
			    justify-content: space-between;
				padding: 20rpx 32rpx;
				border-top: 1px solid rgba(232,232,232,1);
				color: rgba(51,51,51,1);
				font-size: 16px;
			.name{
				white-space: pre;
				
			}
			.value{
				
			}
			.userParkingRecord-status0{
				
			}
			.userParkingRecord-status1{
				color: #FF5100 ;
			}
			.userParkingRecord-status2{
				color: rgba(22,119,255,1);
			}
		}
	}
</style>