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

<template>
	<view>
		<view class="page-role" v-if="!loading">
			<img class="img" src="@/assets/img/nonwhitelist/info.png" alt="">
			<view class="text1">{{permission?'暂无权限':'加载中...'}}</view>
			<view class="text2" v-if="permission" >此车位仅限车主及白名单用户使用</view>
			<view class="botton" v-if="permission">返回首页</view>
		</view>
		<view class="jpmain  "  v-else  >
			<view class="gradient-header">
				<view class="jpback">

				</view>
			</view>
			<view class="page-top" v-if="id">
				<view class="name" v-if="floorlockInfo.status==0">
				<img class="img" src="@/assets/img/lockInfo/info1.png" alt="">
			</view>
				<view class="name" v-if="floorlockInfo.status==1">
					<img class="img img2" src="@/assets/img/lockInfo/info2.png" alt="">
				</view>
				<view class="name" v-if="floorlockInfo.status==2">
				<img class="img" src="@/assets/img/parkingDetails/item4.png" alt="">
			</view>
				<view class="value">
					{{floorlockInfo.status==0?'未降锁':''}}
					{{floorlockInfo.status==1?'使用中':''}}
					{{floorlockInfo.status==2?'异常':''}}
				</view>
			</view>
			<view class="body">


				<view class="page" v-if="id">
					<view class="page-main">

						<view class="name">
							{{floorlockInfo.name}}<span class="tag">{{floorlockInfo.typeN}}</span>
						</view>
						<view class="value" @click="operateBtn">
							<view class="jpbutton jpbutton1" 
							 v-if="floorlockInfo.status==0" >
								<img class="img" src="@/assets/img/button/lock.png" alt="">
								降锁
							</view>
							<view class="jpbutton jpbutton4" v-if="floorlockInfo.status==1">
								使用中
							</view>
							<view class="jpbutton jpbutton5" v-if="floorlockInfo.status==2">
								异常
							</view>
						</view>
					</view>
				</view>
				<view class="page">

					<view class="page-content">
						<view class="tip1">
							<view class="tip-title">温馨提示</view>

							<view class="step">

								1、微信扫描位于充电桩立柱或站内墙面上的二维码。
							</view>
							<view class="step">

								2、选择空闲车位。
							</view>
							<view class="step">

								3、选择需要降锁的车位，点击“降锁”按钮。
							</view>
							<view class="step">

								4、降锁完成后提示操作完成，并提示尽快停车。
							</view>
						</view>
						<view class="tip2">
							<view class="tip-title">温馨提示</view>

							<view class="step">1、顺利降锁后有三分钟时间，请及时就位；超时地锁自动升起，请重新扫码降锁。</view>
							<view class="step">2、请按降锁流程说明停车，严禁使用外力降锁。</view>
							<view class="step">3、地锁服务热线 400-0000-000</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'

	export default {
		data() {
			return {
				id: "",
				loading:false,
				permission:false,
				floorlockInfo: {},
				setIntervalId:"",
			}
		},
		onLoad(op) {
			if (op.id) {
				this.id = op.id
				uni.setNavigationBarTitle({
					title: "加载中..."
				})
				this.getFloorlockDetails()
			} else {
				this.loading=true
				uni.setNavigationBarTitle({
					title: "降锁说明"
				})
			}

		},
		onReady() {
			this.setIntervalId=setInterval(()=>{
				this.getFloorlockDetails(1)
			},1000*5)
		},
		onUnload() {
			//setInterval
			if(this.setIntervalId){
				clearInterval(this.setIntervalId)
			}
			
		},
		methods: {
			operateBtn(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj={
					id:this.id
				}
			
				API.operateFloorlock(obj).then((res) => {
				
					uni.hideLoading();
					this.getFloorlockDetails()
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			},
			getFloorlockDetails(bl) {
				if(!this.id){
					return
				}
				if(!bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				
				var obj = {
					id: this.id
				}

				API.floorlockDetails(obj).then((res) => {
					this.floorlockInfo = res.data.floorlockInfo
					if(this.floorlockInfo.type==1){
						
						uni.setNavigationBarTitle({
							title: this.floorlockInfo.parkingName
						})
						
						this.loading=true
						
						
						
					}else{
						this.permission=true
					}
					
					
					if(!bl){
						uni.hideLoading();
					}
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		},

	}
</script>
<style>
	page {
		/* //background-color: rgba(242, 244, 246, 1); */
	}
</style>
<style scoped lang="scss">
	/* styles.css */
.page-role {
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.img {
			width: 500rpx;
			height: 500rpx;
		}

		.text1 {
			color: rgba(51, 51, 51, 1);
			font-weight: bold;
			font-size: 48rpx;
			margin-bottom: 16rpx;
		}

		.text2 {
			color: rgba(51, 51, 51, 1);
			font-size: 36rpx;
			margin-bottom: 200rpx;
		}

		.botton {
			border-radius: 100rpx;
			width: 360rpx;
			text-align: center;
			border: 1px solid rgba(187, 187, 187, 1);
			color: rgba(22, 119, 255, 1);
			padding: 16rpx;

		}
	}

	.body {
		padding: 32rpx;
	}

	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 400rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}

	.page-top {
		padding: 40rpx;
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.name {
			width: 320rpx;
			height: 320rpx;
			display: flex;
			align-items: flex-end;

			.img {
				width: 320rpx;
				height: 320rpx;
			}

			.img2 {
				width: 320rpx;
				height: 140rpx;
			}
		}

		.value {
			margin-top: 24rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.page {

		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);

		padding: 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);

		.page-main {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				display: flex;

				align-items: center;

				.tag {
					margin-left: 8rpx;
					color: rgba(119, 119, 119, 1);
					border-radius: 8rpx;
					padding: 1px 4rpx;
					font-size: 24rpx;
					border: 1px solid rgba(187, 187, 187, 1);
				}
			}

		}

		.page-content {
			.step {
				margin-bottom: 16rpx;
			}

			.tip-title {
				color: #101010;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}

			.tip1 {
				.step {
					color: #101010
				}

				border-bottom: 1px solid rgba(241, 241, 241, 1);
				margin-bottom: 24rpx;
				padding-bottom: 8rpx;
			}

			.tip2 {

				.step {
					color: #333333
				}
			}
		}



	}


	.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>