jp-floorlock-phone/pages/business/as-components/componentLockInfo.vue

<template>
	<view>
		<componentLogin ref="refLogin"
		@findByOpenId="findByOpenId"></componentLogin>
		
		<u-modal v-model="openLockBl" @confirm="lockStatus1" confirm-color="#00B962" :show-cancel-button="true"
			ref="uModal" title="提示" content="是否下降当前地锁?" confirm-text="开启"></u-modal>
		<u-modal v-model="closeLockBl" @confirm="lockStatus2" confirm-color="#fa3534" :show-cancel-button="true"
			ref="uModal" title="提示" content="是否结束使用当前地锁?" confirm-text="结束"></u-modal>
		
		
		<u-modal v-model="loginBl" @confirm="loginconfirm"  :show-cancel-button="true"
			ref="uModal" title="提示" content="当前用户未登录,是否前往登录" confirm-text="登录"></u-modal>
		
		
		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="content"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		
		
		
		<u-popup v-model="showMessage" mode="bottom" border-radius="30">
			<view class="showMessage">
				<view class="title">降锁成功</view>
				<view class="body">
					车位锁已经降锁，请尽快驶入车位！<br />
		
					若超过3分钟未停车，车位锁将自动升起上锁，如需继续使用请重新扫码降锁。
		
				</view>
				<view class="botton">
					<u-button @click="showMessage=false" type="primary" shape="square">知道了</u-button>
				</view>
			</view>
		</u-popup>
		
		
		<view v-if="isReady" class="isReady">
			<view class="gradient-header">
				<view class="jpback">
			
				</view>
			</view>
			<view v-if="floorlockInfo.id" class="isReady_1">
				 

				<view class="body">
					<view class="page">
						<view class="page-main page-border ">

							<view class="name">

								<view class="name-info">
									<view class="name-text">
										{{floorlockInfo.name}}
									</view>
									
									<view class=" tags">
										<span class="tag typeN"
											:class="'typeN'+floorlockInfo.type">{{floorlockInfo.typeN}}</span>
										<span class="tag"
											:class="'status'+floorlockInfo.status">{{floorlockInfo.status==1?'在线':'离线'}}</span>
									</view>
									
								</view>
								<view class="code-info">
									编号：{{floorlockInfo.lockNo}}
								</view>

							</view>
							<view class="value1" @click="gotoMain" >
								<view class="item1">
									<img class="img" src="@/assets/img/parkingDetails/item7.png" alt="">
									
								</view>
								<view class="item2">切换</view>
							</view>
							
						</view>
						<view class="page-info" >
							<view class="address">
								<view class="name">
									{{floorlockInfo.parkingName}}
								</view>
								<view class="text" v-if="floorlockInfo.locationAddress">
									<u-icon name="map-fill" size="24" color="#999999" ></u-icon>
									{{floorlockInfo.locationAddress?floorlockInfo.locationAddress:''}}
								</view>
							</view>
							
							<view class="value2" v-if="floorlockInfo.longitude&&floorlockInfo.latitude" @click="openLocation" >
								<view class="item1">
									<img class="img" src="@/assets/img/parkingDetails/item8.png" alt="">
									
								</view>
								<view class="item2">导航</view>
							</view>
						</view>
						
						<view class="page-info" v-if="0">
							<view class="info-span" v-if="floorlockInfo.lastOnlineTime">
								更新时间：{{floorlockInfo.lastOnlineTime}}

							</view>
							<view class="info-span" v-if="floorlockInfo.batteryLevel">
								电压：{{floorlockInfo.batteryLevel}}V
							</view>
						</view>
					</view>
				</view>
				<view class="page-top" v-if="id">
					<template v-if="floorlockInfo.status==0">
						<view class="name">
							<img class="img" src="@/assets/img/lockstatus/index4.png" alt="">

						</view>
					</template>
					<template v-else>

						<view class="name" v-if="floorlockInfo.parkingStatus==1">

							<img class="img" src="@/assets/img/lockstatus/index3.png" alt="">
						</view>
						<view class="name" v-else-if="floorlockInfo.lockStatus==1">
							<img class="img" src="@/assets/img/lockstatus/index1.png" alt="">
						</view>
						<view class="name" v-else-if="floorlockInfo.lockStatus==3">
							<img class="img" src="@/assets/img/lockstatus/index2.png" alt="">

						</view>
						<view class="name" v-else-if="floorlockInfo.lockStatus==2">
							<img class="img" src="@/assets/img/lockstatus/index2.png" alt="">
						</view>
						<view class="name" v-else-if="floorlockInfo.lockStatus==4||floorlockInfo.lockStatus==0">

							<img class="img" src="@/assets/img/lockstatus/index4.png" alt="">
						</view>

					</template>
					<view class=" value" style="text-align: center;font-size: 40rpx;color: rgba(51,51,51,1);font-weight: bold;">
						{{floorlockInfo.lockStatusN}}
					
					</view>
					<view class=" value" style="color: rgba(255,61,0,1);;text-align: center;font-size: 24rpx;margin:10rpx"
						v-if="floorlockInfo.lockStatus==2&&floorlockInfo.parkingStatus==0">
						{{showsecondsDistance()}}后自动抬锁<br>
						
						请尽快驶入地锁


					</view>
					
					<view class="valuebutton" @click="operateBtn"  >

						<template v-if="floorlockInfo.status==0">
							<view class="jpbutton jpbutton5">
								<u-icon name="phone-fill" label="电话报修" color="#fff" label-color="#fff"
									label-size="36"></u-icon>
							</view>
						</template>
						<template v-else>

							<view class="jpbutton jpbutton6" v-if="floorlockInfo.parkingStatus==1">
								该地锁已被占用
							</view>

							<view class="jpbutton jpbutton1" v-else-if="floorlockInfo.lockStatus==1">
								<img class="img" src="@/assets/img/button/lock.svg" alt="">
								降锁
							</view>

							<!-- <view class="jpbutton jpbutton6" v-else-if="floorlockInfo.lockStatus==2">
								地锁降
				
							</view> -->
							<view class="jpbutton jpbutton4" v-else-if="floorlockInfo.lockStatus==3">
								降锁中

							</view>

							<view class="jpbutton jpbutton5"
								v-else-if="floorlockInfo.lockStatus==4||floorlockInfo.lockStatus==0">
								<u-icon name="phone-fill" label="电话报修" color="#fff" label-color="#fff"
									label-size="36"></u-icon>
							</view>
						</template>


					</view>
					<view class="page  pagemanage" v-if="isMy">
						<view class="page-main">
							<view class="mitem" @click="gotoUrl('pages/mylock/bindLock')">
								<img class="img" src="@/assets/img/quick/item2.svg" alt="">
								
								绑定地锁
							</view>
							<view class="mitem"  @click="gotoUrl('pages/mylock/infoLock?add=1&id='+floorlockInfo.id)" >
								<img class="img" src="@/assets/img/quick/item1.svg" alt="">
								
								白名单
							</view>
							<view class="mitem end"  @click="gotoUrl('pages/mylock/bindLock?id='+floorlockInfo.id)">
								<img class="img" src="@/assets/img/quick/item3.svg" alt="">
								属性查看
							</view>
						</view>
					</view>
					<view class="page  "  >
					<u-collapse  >
							<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :open="item.open" :key="index">
								{{item.body}}
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
			</view>
			


		</view>
		<view class="page-role" v-else>
			<u-icon name="hourglass" size="300" color="#19be6b"  v-if="!permission"></u-icon>
			<img class="img"  v-else src="@/assets/img/nonwhitelist/info.png" alt="">
			<view class="text1">{{permission?'暂无权限':'加载中...'}}</view>
			<view class="text2" v-if="permission">此车位仅限车主及授权用户使用</view>
			<view class="botton" @click="gotoIndex" v-if="permission">返回首页</view>
		</view>
		 
	</view>
</template>

<script>
	import componentLogin from '@/components/componentLogin.vue';
	 
	import * as API from '@/apis/pagejs/pagesIndex.js'
	import {
		secondsDistance,newDate,
	
	} from '@/apis/utils'
	export default {
		components: {
			componentLogin,
			 
			//'u-collapse-item': () => import('@/uni_modules/uview-ui/components/u-collapse-item/u-collapse-item'),
			//'u-collapse': () => import('@/uni_modules/uview-ui/components/u-collapse/u-collapse'),
			
			
		},

		data() {
			return {
				isBack:false,
				isMy:0,
				showtabbar:false,
				isReady: false,
				id: "",
				opid:"",
				whiteList: [],
				list: [],
				mylist: [],
				loginBl: false,
				floorlockInfo: {
					lockStatusN: ""
				},
				itemList: [{
									head: "操作指南",
									body: "点击“降锁”按钮，等待地锁降下后系统会提示降锁成功，此时即可将车辆驶入指定车位。",
									open: true,
									disabled: true
								},{
									head: "温馨提示",
									body: "1、成功降锁后请于三分钟内将车辆驶入指定车位；超时地锁会自动升起，需重新扫码降锁；\n\t2、请按降锁流程说明停车，严禁使用外力降锁；\n\t3、地锁服务热线 400-8899-619。",
									open: false,
								}],
				content: "400-8899-619",
				setIntervalId: "",
				userInfo:{},
				userInfoPlus:{
					whiteList:[],
					myAllList:[]
				},
				
				showMessage: 0,
				permission:false,
				openLockBl:false,
				closeLockBl:false,
				openModalBl: false,
				isOnLoad:0,
				
			}
		},
		onLoad(op) {
			this.isOnLoad=1
			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.userInfo = this.jphelp.getPersonInfo()
			this.userInfoPlus=this.jphelp.getPersonInfoPlus()
			if(this.userInfo.id){
				
			}
			uni.setNavigationBarTitle({
				title: "加载中..."
			})
			
			if (op.id) {
				
				this.id = op.id
			}
			
			//this.lockInfoOnLoad()
		},
		onShow(){
			//
			
		},
		onReady() {
			this.initRef()
			
		},
		onShareTimeline(){
			return {
				title: '智泊e家',
			}
		},
		onShareAppMessage(res) {
			return {
				title: '智泊e家',
			}
		},
		methods: {
			showsecondsDistance(){
				if((this.floorlockInfo.id&&this.floorlockInfo.lastOperationTime)){
					var time1=new Date()
					
					var time2=newDate(this.floorlockInfo.lastOperationTime)
					var time3=secondsDistance(time2,time1)
					var k=3*60-time3
					
					var fen=parseInt(k/60)
					var miao=parseInt(k%60)
					if(k>0){
						if(fen>0){
							return `${fen}分${miao}秒`
						}else{
							return `${miao}秒`
						}
					}else{
						return "3分钟"
					}
					
					
				}else{
					return "3分钟"
				}
				
			},
			initRef(id,ref){
				if(ref==1){
					this.isOnLoad=1
				}
				if(id){
					this.id = id
				}
				
				this.$refs.refLogin.findByOpenId()
				this.setIntervalId = setInterval(() => {
					this.getFloorlockDetails(1)
				}, 1000 * 3)
				
				this.jphelp.setInterval("lockInfo",this.setIntervalId)
				console.log("eeeeeeeeeeeeeeeeeeee")
				this.getFloorlockDetails(0,1)
			},
			
			findByOpenId(res) {
				
				this.getFloorlockList()
				
			},
			confirmPhone() {
				this.openModalBl = false;
				
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
			lockStatus3(){
				uni.showToast({
					title: "下降中...",
					icon: "none"
				})
			},
			lockStatus0(){
				this.openModalBl=true;
			},
			loginconfirm(){
				this.$refs.refLogin.ashow()
			},
			gotoMain(){
				uni.reLaunch({
					url:"/pages/business/index"
				})
			},
			openLocation(){
				
				   
				   uni.openLocation({
				   			latitude:this.floorlockInfo.latitude,
				   			longitude: this.floorlockInfo.longitude,
				   			success: function () {
				   				console.log('success');
				   			}
				   		});

			},
			operateBtn() {
				if(!this.jphelp.getPersonInfo().id){
					this.loginBl=true;
					
				}else if(this.floorlockInfo.status==0){
					this.lockStatus0()
				}else{
					if(this.floorlockInfo.lockStatus==4){
						this.lockStatus0() //异常
					}else if(this.floorlockInfo.lockStatus==1){
						//this.lockStatus1()  //未使用
						this.openLockBl=true;
					}else if(this.floorlockInfo.lockStatus==2){
						//this.lockStatus2() 
						//this.closeLockBl=true;
						 //使用
					}else if(this.floorlockInfo.lockStatus==3){
						this.lockStatus3()  //过程
					}
				}
				
			},
			getFloorlockList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.list = []
				API.myParkingSpot().then((res) => {

					this.mylist = res.data.floorList
					for(var i in this.mylist){
						var item=this.mylist[i]
						if(item.id==this.id){
							this.isMy=1
						}
					}
					
					
					uni.hideLoading();

				}).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
				}
				this.isBack=false
				API.floorlockDetails(obj).then((res) => {
					this.floorlockInfo = res.data.floorlockInfo
					
					this.isReady=1;
					if(this.floorlockInfo.parkingPhone){
						this.content=this.floorlockInfo.parkingPhone
					}
					
					if (res.data.usable) {
						if(this.isOnLoad){
							uni.setNavigationBarTitle({
								title: this.floorlockInfo.parkingName
							})
						}
						

						this.loading = true



					} else {
						this.loading = false
						this.permission = true
						// #ifdef MP-WEIXIN
						uni.setBackgroundColor({
							backgroundColor: '#ffffff',
						})
						// #endif
					}


					if (!bl) {
						uni.hideLoading();
					}
				}).catch(error => {

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

<style>
	page{
		background-color:#F2F4F6;
	}
</style>
<style scoped lang="scss">
	.body {
		padding: 32rpx;
	}

	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 760rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
	}
	.isReady_2{
		margin-top: 80rpx;
		.r2text{
			text-align: center;
			.r2text1{
				color: rgba(51,51,51,1);
				font-size: 40rpx;
				font-weight: bold;
			}
			.r2text2{
				font-weight: 400;
				color: rgba(51,51,51,1);
				font-size: 32rpx;
			}
		}
	}
	
	.page-top {
		padding: 40rpx;
		padding-top: 0rpx;
		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;
		}
	}
	.pagemanage{
		margin-top: 80rpx;
		margin-bottom: 80rpx;
		.mitem{
			width: 33%;
			display: flex;
			flex-direction: column;
			align-items: center;
				img{
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}
				border-right: 1px solid rgba(187,187,187,0.43);
		}
		.end{
			border-right:0
		}
	}
	
	.page {
	
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 4px 8px 0px rgba(22,119,255,0.2);
		padding: 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);
		    width: 100%;
			.page-border{
				border-bottom: 1px solid  rgba(232,232,232,1);
				padding-bottom: 16rpx;
			}
		.page-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			
			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				
				display: flex;
				flex-direction: column;
				    display: flex;
				.name-info{
					    display: flex;
					.name-text{
						font-size: 36rpx;
						font-weight: bold;
										
					}
					
					
				}
				.code-info{
					font-size: 24rpx;
					color: rgba(119,119,119,1);
				
				}
				
			}
			.tags{
				    display: flex;
				    align-items: center;
					margin-left: 8rpx;
				.tag {
					
					
					font-size: 24rpx;
					border: 1px solid rgba(187, 187, 187, 1);
					border-radius: 4px;
					color: rgba(22,119,255,1);
					
					
					padding: 1px 8rpx;
					margin-left: 8rpx;
				}
				.typeN1{
					color:#1677FF ;
					border: 1px solid #1677FF ;
				}
				.typeN2{
					color:#8161FF;
						border: 1px solid #8161FF;
				}
				.status1{
					color:#00B962;
					border: 1px solid #00B962;
				}
				.status0{
					color:#A7A2A2;
					border: 1px solid #A7A2A2;
				}
			}
			
			.value1{
				display: flex;
				flex-direction: column;
				align-items: center;
				    justify-content: space-between;
				.item1{
					.img{
						width: 48rpx;
						height: 48rpx;
						
					}
					    display: flex;
				}
				.item2 {
					font-size: 24rpx;
					color: rgba(119,119,119,1);

				}
			}
	
		}
		.page-info{
			padding-top: 16rpx;
			    font-size: 24rpx;
			    color: #777777;
				display: flex;
				justify-content: space-between;
				.address{
					.name{
						color: rgba(119,119,119,1);
						font-size: 28rpx;
					}
					.text{
						color: rgba(51,51,51,1);
						font-size: 24rpx;
					}
				}
				.value2{
					display: flex;
					flex-direction: column;
					align-items: center;
					    justify-content: space-between;
					.item1{
						.img{
							width: 32rpx;
							height: 32rpx;
							
						}
						    display: flex;
					}
					.item2 {
						font-size: 24rpx;
						color: rgba(119,119,119,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
				}
			}
		}
	
	
	
	}
	
	.valuebutton{
		  margin-bottom: 30rpx;
	}
	.jpbutton {
		   margin-top: 30rpx;
		 
		border-radius: 100rpx;
		width: 400rpx;
		height: 84rpx;
		color: #fff;
		padding: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		    font-size: 36rpx;
		.img {
			margin-right: 8rpx;
			width: 36rpx;
			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: #1677FF;
	}
	
	.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;
	
		}
	}
</style>