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

<template>
	<view class="jpmain ">
		<componentLogin ref="refLogin"  :check="0"
		@findByOpenId="findByOpenId"></componentLogin>
		<view class="title">
			<view class="name">
				<view class="stationName">
					<img class="img" src="@/assets/img/parkingDetails/item1.svg" alt="">
					<span class="item1">{{parkingInfo.name}}</span>
				</view>
				<view class="address" v-if="parkingInfo.distance">
					
					<span class="item1">{{distanceN(parkingInfo.distance)}}</span>
				</view>
			</view>
			
			<view class="value" >
				<view class="value1" @click="clickStar">
					<view class="item1">
						<u-icon name="star-fill" v-if="isStar" size="48" color="#FFAE00"></u-icon>
						<u-icon name="star" v-else   size="48" color="#fff"></u-icon>
 					</view>
					<view class="item2">常用</view>
				</view>
				<view class="value1" @click="gotoMain" >
					<view class="item1">
						<img class="img" src="@/assets/img/parkingDetails/item2.svg" alt="">
					</view>
					<view class="item2">切换</view>
				</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>{{totalNum}}个</span>
					</view>
					<view class="item-b">
						空闲地锁：<span>{{idleNum}}个</span>
					</view>
					<view class="item-c" @click="gotoUrl('pages/index/lockInfo')">
						
						<u-icon name="question-circle" color="#1677FF" label-color="#1677FF" label-size	="32" size="32" :margin-left="8" label="降锁说明"></u-icon>
						
					</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/item4.svg" alt="">
						<span class="item1">使用中</span>

						<img class="img " src="@/assets/img/parkingDetails/item3.svg" alt="">

						<span class="item" >空闲</span>
 						

					</view>
				</view>
				<view class="list">
					<view  v-for="(item,i) in floorlockInfoList  " 
					
					class="item"  @click="gotoInfoLock(item)" >
						<view class="name">
							<template v-if="item.status==0||item.lockStatus==4||item.lockStatus==0" >
								<img class="img color5" 
								 src="@/assets/img/parkingDetails/item5.svg" alt="">
								
							</template>
							<template v-else >
								<img class="img color4"  v-if="item.parkingStatus==1"
								src="@/assets/img/parkingDetails/item4.svg" alt="">
								<img class="img color3" v-else
								 src="@/assets/img/parkingDetails/item3.svg" alt="">
								
							</template>
							
							<view class="name-text">
								<view class="name-info">
									{{item.name}}
								</view>
								<view class="code-info">
									编号：{{item.lockNo}}
								</view>
							</view>
							<view class="goto">
								<u-icon name="arrow-right" color="#BBBBBB"></u-icon>
							</view>
							
							
						</view>
						<view class="value" v-if="item.status==0" >
							<view class="jpbutton jpbutton4" >
								离线
							</view>
						</view>
						<view class="value" v-else     >
							
							<view class="jpbutton jpbutton6" v-if="item.parkingStatus==1">
								使用中
							</view>
							<view class="jpbutton jpbutton1"
							 v-else-if="item.lockStatus==1" >
								<img class="img" src="@/assets/img/button/lock.svg" alt="">
								降锁
							</view>
							
							<view class="jpbutton jpbutton6" v-else-if="item.lockStatus==2">
								地锁降
							</view>
							<view class="jpbutton jpbutton6"
							v-else-if="item.lockStatus==3" >
								降锁中
							</view>
							<view class="jpbutton jpbutton4" v-else-if="item.lockStatus==4||item.lockStatus==0">
								异常
							</view>
						</view>
					</view>
					
				
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import componentLogin from '@/components/componentLogin.vue';
	
	export default {
		components: {
			componentLogin,
		},
		data() {
			return {
				id:"",
				floorlockInfo:{},
				floorlockInfoList:[],
				parkingInfo:[],
				latitude: 30.337053,
				longitude: 112.240222,
				point:false,//是否获取了定位
				setIntervalId:"",
				isStar:false,
				isReady:false,
				totalNum:0,
				idleNum:0,
			}
		},
		onLoad(op) {
			
			if(op.q){
				var val =decodeURIComponent(op.q);
				
				if(val&&val.indexOf("?id=")>-1){
					val=val.split("?id=")[1]
					if(val.indexOf("&")>-1){
						val=val.split("&")[0]	
					}
					this.id = val
				}
				
			}
			this.id=op.id
			if(op.point){
				this.point=1
				this.latitude=op.latitude
				this.longitude=op.longitude
				console.log(op)
			}
			
		},
		
		onShareTimeline(){
			return {
				title: '智泊e家-'+this.parkingInfo.name,
				path: '/pages/index/main/parkingDetails?id='+this.id ,
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			return {
				title: '智泊e家-'+this.parkingInfo.name,
				path: '/pages/index/main/parkingDetails?id='+this.id ,
			}
		},
		onShow(){
			if(this.isReady){
				var sz=this.jphelp.getInterval()
				if(sz){
					sz.forEach(item=>{
						if(item.key!='parkingDetails'){
							this.findByOpenId()
						}
					})
				}
			
			}
			
		},
		onReady() {
			//this.$refs.refLogin.findByOpenId()
			this.isReady=true;
			this.getParkingDetails()
			
			this.setIntervalId=setInterval(()=>{
				this.getParkingFloorlockList(1)
			},1000*3)
			this.jphelp.setInterval("parkingDetails",this.setIntervalId)
			
		},
		onUnload() {
			//setInterval
			if(this.setIntervalId){
				clearInterval(this.setIntervalId)
			}
			
		},
		computed:{
			
		},
		methods: {
			findByOpenId(res) {
				
			},
			clickStar(){
				//this.isStar=!this.isStar
				if(this.jphelp.getPersonInfo().id){
					this.setPreferred()
				}else{
					this.$refs.refLogin.ashow()
				}
				
			},
			gotoMain(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			setPreferred(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj={
					id:this.id,
					preferred:!this.isStar
				}
				
				API.setPreferred(obj).then((res) => {
					this.getParkingDetails()
					
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			},
			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.isStar=this.parkingInfo.userPreferred
					this.totalNum=this.parkingInfo.totalNum
					this.idleNum=this.parkingInfo.idleNum
					this.getParkingFloorlockList()
					uni.hideLoading();
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			},
			gotoInfoLock(item){
				this.gotoUrl('pages/index/lockInfo?id='+item.id)
				
			},
			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;
			    width: 160rpx;
			    justify-content: space-around;
			.value1{
				display: flex;
				flex-direction: column;
				align-items: center;
				    justify-content: space-between;
				.item1{
					.img{
						width: 48rpx;
						height: 48rpx;
						
					}
				}
				.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;
				    align-items: center;
				margin-bottom: 32rpx;

				.name {
					
					display: flex;
					align-items: center;
					.name-text{
						  width: 320rpx;
						.name-info{
							font-size: 36rpx;
							font-weight: bold;
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							
						}
						.code-info{
							font-size: 20rpx;
							color: rgba(119,119,119,1);

						}
					}
					
					.img {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
						padding: 12rpx;
						border-radius: 8rpx;

					}
					.color3{
						background-color: rgba(215,249,233,1);
					}
					.color4{
						background-color: rgba(255,237,198,1);
					}
					.color5{
						background-color: rgba(228,228,228,1);
					}
				}
			}
		}
	}

	.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;
	}
	.jpbutton6 {
		background-color: #FF7B00;
	}
	.jpbutton5 {
		background-color: red;
	}
</style>