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

<template>
	<view>
		<componentLogin ref="refLogin"  :check="1"
		@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="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" @click="gotoIndex" v-if="permission">返回首页</view>
		</view>
		<view class="jpmain  " v-else>
			<view class="gradient-header">
				<view class="jpback">

				</view>
			</view>
			<view class="body" v-if="id" >
				<view class="page">
					<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.typeN">{{floorlockInfo.typeN}}</span>
							<span class="tag" :class="'status'+floorlockInfo.status">{{floorlockInfo.status==1?'在线':'离线'}}</span>
						</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/parkingDetails/item6.svg" alt="">
					</view>
				</template>
				<template v-else>
					<view class="name" v-if="floorlockInfo.lockStatus==0">
						<img class="img" src="@/assets/img/lockInfo/info1.png" alt="">
					</view>
					<view class="name" v-if="floorlockInfo.lockStatus==1">
						<img v-if="0" class="img img2" src="@/assets/img/lockInfo/info2.png" alt="">
						<img class="img" src="@/assets/img/parkingDetails/item4.svg" alt="">
					</view>
					<view class="name" v-if="floorlockInfo.lockStatus==2">
						
						<img class="img "
						src="@/assets/img/parkingDetails/item6.svg" alt="">
					</view>
				</template>
				<view class="value" v-if="floorlockInfo.status==0"  >
					设备离线
				</view>
				<view class="value" v-else>
					{{floorlockInfo.lockStatus==0?'未降锁':''}}
					{{floorlockInfo.lockStatus==1?'使用中':''}}
					{{floorlockInfo.lockStatus==2?'设备异常':''}}
				</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 jpbutton1" v-if="floorlockInfo.lockStatus==0">
							<img class="img" src="@/assets/img/button/lock.svg" alt="">
							降锁
						</view>
						<view class="jpbutton jpbutton6" v-if="floorlockInfo.lockStatus==1">
							使用中
						</view>
						<view class="jpbutton jpbutton5" v-if="floorlockInfo.lockStatus==2">
							<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="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>
</template>

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

	export default {
		components: {
			componentLogin,
		},
		data() {
			return {
				id: "",
				loading: false,
				permission: false,
				floorlockInfo: {},
				setIntervalId: "",
				showMessage: 0,
				content: "400-8899-619",
				
				openModalBl: false,
				
			}
		},
		onLoad(op) {
			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/index/main/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/index/main/lockInfo?id='+this.id ,
				}
			}else{
				return {
					title: '智泊e家',
					path: '/pages/index/index' ,
				}
			}
		},
		onReady() {
			this.$refs.refLogin.findByOpenId()
			
		},
		onUnload() {
			//setInterval
			if (this.setIntervalId) {
				clearInterval(this.setIntervalId)
			}

		},
		methods: {
			findByOpenId(res) {
				
				this.setIntervalId = setInterval(() => {
					this.getFloorlockDetails(1)
				}, 1000 * 5)
				
				this.getFloorlockDetails()
				
			},
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
			gotoIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			lockStatus0(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id,
				}
				
				API.operateFloorlock(obj).then((res) => {
				
					uni.hideLoading();
					this.showMessage = true;
					this.getFloorlockDetails()
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			lockStatus1(){
				uni.showToast({
					title: "该车位已被占用...",
					icon: "none"
				})
			},
			lockStatus2(){
				this.openModalBl=true;
			},
			operateBtn() {
				if(this.floorlockInfo.status==0){
					this.lockStatus2()
				}else{
					if(this.floorlockInfo.lockStatus==0){
						this.lockStatus0()
					}else if(this.floorlockInfo.lockStatus==1){
						this.lockStatus1()
					}else if(this.floorlockInfo.lockStatus==2){
						this.lockStatus2()
					}
				}
				
			},
			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 (res.data.usable) {

						uni.setNavigationBarTitle({
							title: this.floorlockInfo.parkingName
						})

						this.loading = true



					} else {
						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 
				}
				.typeN2{
					background-color:#8161FF
				}
				.status1{
					background-color:#00B962
				}
				.status0{
					background-color:#A7A2A2
				}
			}

		}

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

	}
</style>