jp-floorlock-phone/pages/business/lockInfo.vue

<template>
	<view>
		<componentLogin ref="refLogin"  
		@findByOpenId="findByOpenId"></componentLogin>
		<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 class="jpmain  "  v-if="loading"  >
			<view class="gradient-header">
				<view class="jpback">

				</view>
			</view>

			<view class="body" v-if="id" >
				<view class="page" v-if="floorlockInfo.id" >
					<view class="page-main">
				
						<view class="name">
							
							<view class="name-info">
								{{floorlockInfo.name}}
							</view>
							<view class="code-info">
								编号：{{floorlockInfo.lockNo}}
							</view>
						
						</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="page-info">
						<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="color:red;text-align: center;font-size: 28rpx;" v-if="floorlockInfo.lockStatus==2&&floorlockInfo.parkingStatus==0">
					3分钟后自动抬锁，请尽快驶入车位

				</view>
				<view class=" valuestatus">
					<view class="bo1">
						<img src="@/assets/img/lockstatus/status2.svg"> <span>雷达</span>  <span :style="floorlockInfo.parkingStatus==1?'color:#FF7B00':'color:#00B962'">{{floorlockInfo.parkingStatus==1?'有车':'无车'}}</span>
					</view>
					<view class="bo2">
						
					</view>
					<view class="bo1">
						<img src="@/assets/img/lockstatus/status1.svg"> <span>地锁</span> 
						<span v-if="floorlockInfo.lockStatus==1||floorlockInfo.lockStatus==2|floorlockInfo.lockStatus==3">
							<u-icon color="#00B962" v-if="floorlockInfo.lockStatus==1" name="arrow-upward"></u-icon>
							<u-icon  color="#8161FF" v-if="floorlockInfo.lockStatus==2" name="arrow-downward"></u-icon>
							<u-icon  name="more-dot-fill" v-if="floorlockInfo.lockStatus==3"></u-icon>
							
						</span>
						<span v-else>
							故障
						</span>
						
					</view>
				</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>
			<view class="body">


				
				<view class="page">

					<view class="page-content">
						<view class="tip1">
							<view class="step">1、从微信小程序入口进入停车场页面，或通过微信扫描位于充电桩或地锁上的二维码进入车位详情页面；</view>
							
							<view class="step">2、选择需要降锁的车位，点击“降锁”按钮，等待地锁降下后系统会提示降锁成功，此时即可将车辆驶入指定车位。</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-8899-619。</view>

						</view>
					</view>
				</view>
			</view>
			
			<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>
			

		</view>
		<view class="page-role" v-else>
			<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" @click="gotoIndex" v-if="permission">返回首页</view>
		</view>
	</view>
</template>

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

	export default {
		components: {
			componentLogin,
			//'u-modal': () => import('@/uni_modules/uview-ui/components/u-modal/u-modal'),
			//'u-popup': () => import('@/uni_modules/uview-ui/components/u-popup/u-popup'),
			//'u-button': () => import('@/uni_modules/uview-ui/components/u-button/u-button'),

		},
		data() {
			return {
				id: "",
				loading: true,
				usable:false,
				permission: false,
				loginBl:false,
				floorlockInfo: {
					lockStatusN:""
				},
				setIntervalId: "",
				showMessage: 0,
				content: "400-8899-619",
				openLockBl:false,
				closeLockBl:false,
				openModalBl: false,
				
			}
		},
		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
				}
				
			}
			 if (op.id) {
				this.id = op.id
				uni.setNavigationBarTitle({
					title: "加载中..."
				})
				// this.$refs.refLogin.findByOpenId()
			} else {
				this.loading = true
				uni.setNavigationBarTitle({
					title: "降锁说明"
				})
			}

		},
		onShareTimeline(){
			if(this.id){
				return {
					title: '智泊e家-'+this.floorlockInfo.name,
					path: '/pages/business/lockInfo?id='+this.id ,
				}
			}else{
				return {
					title: '智泊e家',
					path: '/pages/index/index' ,
				}
			}
			
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				//.log(res.target)
			}
			if(this.id){
				return {
					title: '智泊e家-'+this.floorlockInfo.name,
					path: '/pages/business/lockInfo?id='+this.id ,
				}
			}else{
				return {
					title: '智泊e家',
					path: '/pages/index/index' ,
				}
			}
		},
		onReady() {
			this.$refs.refLogin.findByOpenId()
			this.setIntervalId = setInterval(() => {
				this.getFloorlockDetails(1)
			}, 1000 * 3)
			
			this.jphelp.setInterval("lockInfo",this.setIntervalId)
			
			this.getFloorlockDetails()
			
		},
		onUnload() {
			//setInterval
			if (this.setIntervalId) {
				clearInterval(this.setIntervalId)
			}

		},
		methods: {
			findByOpenId(res) {
				
				
				
			},
			confirmPhone() {
				this.openModalBl = false;
				
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
			gotoIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			lockStatus1(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id,
					lockStatus:2
				}
				
				API.operateFloorlock(obj).then((res) => {
				
					uni.hideLoading();
					this.showMessage = true;
					this.getFloorlockDetails()
					
					setTimeout(() => {
						this.getFloorlockDetails(1)
					}, 1000 * 1)
				
					setTimeout(() => {
						this.getFloorlockDetails(1)
					}, 1000 * 2.5)
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			lockStatus2(){
				// uni.showToast({
				// 	title: "该车位已被占用...",
				// 	icon: "none"
				// })
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id,
					lockStatus:1
				}
				
				API.operateFloorlock(obj).then((res) => {
				
					uni.hideLoading();
					//this.showMessage = true;
					this.getFloorlockDetails()
					
					setTimeout(() => {
						this.getFloorlockDetails(1)
					}, 1000 * 1)
				
					setTimeout(() => {
						this.getFloorlockDetails(1)
					}, 1000 * 2.5)
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				// #ifdef H5
				// #endif
			},
			lockStatus3(){
				uni.showToast({
					title: "下降中...",
					icon: "none"
				})
			},
			lockStatus0(){
				this.openModalBl=true;
			},
			loginconfirm(){
				this.$refs.refLogin.ashow()
			},
			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()  //过程
					}
				}
				
			},
			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
					// this.floorlockInfo.status=1;
					// this.floorlockInfo.lockStatus=1
					
					if(this.floorlockInfo.parkingPhone){
						this.content=this.floorlockInfo.parkingPhone
					}
					
					if (res.data.usable) {

						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: 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: 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;
		}
	}

	.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;
				flex-direction: column;
				.name-info{
					font-size: 36rpx;
					font-weight: bold;
				
					
				}
				.code-info{
					font-size: 24rpx;
					color: rgba(119,119,119,1);
				
				}
				
			}
			.tags{
				
				.tag {
					
					
				
					
					font-size: 24rpx;
					border: 1px solid rgba(187, 187, 187, 1);
					border-radius: 4px;
					background-color: rgba(22,119,255,1);
					color: rgba(255,255,255,1);
					
					padding: 1px 8rpx;
					margin-left: 8rpx;
				}
				.typeN1{
					background-color:#1677FF ;
					border: 1px solid #1677FF ;
				}
				.typeN2{
					background-color:#8161FF;
						border: 1px solid #8161FF;
				}
				.status1{
					background-color:#00B962;
					border: 1px solid #00B962;
				}
				.status0{
					background-color:#A7A2A2;
					border: 1px solid #A7A2A2;
				}
			}

		}
		.page-info{
			    font-size: 24rpx;
			    color: #777777;
				display: flex;
				justify-content: space-between;
		}
		.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 {
		    margin-top: 60rpx;
		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;
	}

	.showMessage {
		//padding: 24rpx 56rpx;
		padding: 40rpx 40rpx 60rpx 40rpx;

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-top: 32rpx;
			text-align: center;
			font-weight: bold;
		}

		.body {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
			padding-bottom: 66rpx;
		}

	}
	
	.valuestatus{
		    display: flex;
		    align-items: center;
			    justify-content: space-around;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(229,240,255,1) 0%,rgba(255,255,255,1) 100%);
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			text-align: center;
			box-shadow: 0px 2px 10px 0px rgba(110,170,255,0.5);
			
			border: 1px solid rgba(255,255,255,1);
			
			width: 686rpx;
			height: 120rpx;
			
			.bo1{
				width: 230rpx;
				    display: flex;
				    align-items: center;
					img{
						height: 48rpx;
						width:  48rpx;
					}
			}
			.bo2{
				    height: 40rpx;
				border-left: 1px solid #9DA2A9 ;
			}
			span{
				margin-left:  16rpx;
			}
	}
</style>