调整离线显示

pages/index/main/lockInfo.vue

@@ -1,72 +1,78 @@
 <template>
-	<view>
-		<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>
+		<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="text2" v-if="permission">此车位仅限车主及白名单用户使用</view>
 			<view class="botton" @click="gotoIndex" v-if="permission">返回首页</view>
 		</view>
-		<view class="jpmain  "  v-else  >
+		<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">
+							{{floorlockInfo.name}}
+						</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">
 				<view class="name" v-if="floorlockInfo.lockStatus==0">
-				<img class="img" src="@/assets/img/lockInfo/info1.png" alt="">
-			</view>
+					<img class="img" src="@/assets/img/lockInfo/info1.png" alt="">
+				</view>
 				<view class="name" v-if="floorlockInfo.lockStatus==1">
 					<img class="img img2" src="@/assets/img/lockInfo/info2.png" alt="">
 				</view>
 				<view class="name" v-if="floorlockInfo.lockStatus==2">
-				<img class="img" src="@/assets/img/parkingDetails/item4.svg" alt="">
-			</view>
+					<img class="img" src="@/assets/img/parkingDetails/item4.svg" alt="">
+				</view>
 				<view class="value">
-					{{floorlockInfo.lockStatus==0?'未降锁':''}}
-					{{floorlockInfo.lockStatus==1?'使用中':''}}
+					{{floorlockInfo.lockStatus==0?'未降锁':''}}
+					{{floorlockInfo.lockStatus==1?'使用中':''}}
 					{{floorlockInfo.lockStatus==2?'异常':''}}
+				</view>
+				<view class="valuebutton" @click="operateBtn">
+					<view class="jpbutton jpbutton1" v-if="floorlockInfo.lockStatus==0">
+						<img class="img" src="@/assets/img/button/lock.svg" alt="">
+						降锁
+					</view>
+					<view class="jpbutton jpbutton4" v-if="floorlockInfo.lockStatus==1">
+						使用中
+					</view>
+					<view class="jpbutton jpbutton5" v-if="floorlockInfo.lockStatus==2">
+						异常
+					</view>
 				</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.lockStatus==0" >
-								<img class="img" src="@/assets/img/button/lock.svg" alt="">
-								降锁
-							</view>
-							<view class="jpbutton jpbutton4" v-if="floorlockInfo.lockStatus==1">
-								使用中
-							</view>
-							<view class="jpbutton jpbutton5" v-if="floorlockInfo.lockStatus==2">
-								异常
-							</view>
-						</view>
-					</view>
-				</view>
+				
 				<view class="page">
 
 					<view class="page-content">
@@ -100,9 +106,9 @@
 						</view>
 					</view>
 				</view>
-			</view>
-			
-			
+			</view>
+
+
 		</view>
 	</view>
 </template>
@@ -113,12 +119,12 @@
 	export default {
 		data() {
 			return {
-				id: "",
-				loading:false,
-				permission:false,
-				floorlockInfo: {},
-				setIntervalId:"",
-				showMessage:0,
+				id: "",
+				loading: false,
+				permission: false,
+				floorlockInfo: {},
+				setIntervalId: "",
+				showMessage: 0,
 			}
 		},
 		onLoad(op) {
@@ -128,95 +134,95 @@
 					title: "加载中..."
 				})
 				this.getFloorlockDetails()
-			} else {
-				this.loading=true
+			} 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: {
-			gotoIndex(){
-				uni.switchTab({
-					url:"/pages/index/index"
-				})
-			},
-			operateBtn(){
-				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"
-					})		
-				})
+		onReady() {
+			this.setIntervalId = setInterval(() => {
+				this.getFloorlockDetails(1)
+			}, 1000 * 5)
+		},
+		onUnload() {
+			//setInterval
+			if (this.setIntervalId) {
+				clearInterval(this.setIntervalId)
+			}
+
+		},
+		methods: {
+			gotoIndex() {
+				uni.switchTab({
+					url: "/pages/index/index"
+				})
 			},
-			getFloorlockDetails(bl) {
-				if(!this.id){
-					return
-				}
-				if(!bl){
-					uni.showLoading({
-						title: "加载中",
-						mask: true,
-					})
+			operateBtn() {
+				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"
+					})
+				})
+			},
+			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(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 (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();
+
+
+					if (!bl) {
+						uni.hideLoading();
 					}
 				}).catch(error => {
 
@@ -238,7 +244,7 @@
 </style>
 <style scoped lang="scss">
 	/* styles.css */
-.page-role {
+	.page-role {
 		padding-top: 120rpx;
 		display: flex;
 		flex-direction: column;
@@ -288,7 +294,7 @@
 
 	.page-top {
 		padding: 40rpx;
-		padding-top: 120rpx;
+		padding-top: 0rpx;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -341,14 +347,36 @@
 
 				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);
-				}
+				
+			}
+			.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
+				}
 			}
 
 		}
@@ -388,18 +416,20 @@
 	}
 
 
-	.jpbutton {
+	.jpbutton {
+		    margin-top: 60rpx;
 		border-radius: 100rpx;
-		width: 160rpx;
+		width: 400rpx;
+		height: 84rpx;
 		color: #fff;
 		padding: 8rpx;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
+		    font-size: 36rpx;
 		.img {
 			margin-right: 8rpx;
-			width: 32rpx;
+			width: 36rpx;
 			height: 32rpx;
 		}
 	}
@@ -444,26 +474,29 @@
 
 	.jpbutton4 {
 		background-color: #A7A2A2;
-	}
-	.jpbutton5 {
-		background-color: red;
-	}
-	
-	.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;
-		}
-	
+	}
+
+	.jpbutton5 {
+		background-color: red;
+	}
+
+	.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>

pages/index/main/parkingDetails.vue

@@ -46,29 +46,44 @@
 					<view class="name">请选择空闲车位</view>
 					<view class="value">
 
-						<img class="img" src="@/assets/img/parkingDetails/item4.svg" alt="">
+						<img class="img " src="@/assets/img/parkingDetails/item4.svg" alt="">
 						<span class="item1">使用中</span>
 
-						<img class="img" src="@/assets/img/parkingDetails/item3.svg" alt="">
+						<img class="img " src="@/assets/img/parkingDetails/item3.svg" alt="">
 
-						<span>空闲</span>
+						<span class="item" >空闲</span>
+ 						
 
 					</view>
 				</view>
 				<view class="list">
 					<view  v-for="(item,i) in floorlockInfoList  " 
-					@click="gotoInfoLock(item)"
+					
 					class="item" >
-						<view class="name">
-							<img class="img" v-if="item.lockStatus==0"
-							 src="@/assets/img/parkingDetails/item3.svg" alt="">
-							<img class="img"  v-else
-							src="@/assets/img/parkingDetails/item4.svg" alt="">
+						<view class="name">
+							<template v-if="item.status==0" >
+								<img class="img color5" 
+								 src="@/assets/img/parkingDetails/item5.svg" alt="">
+								
+							</template>
+							<template v-else >
+								<img class="img color3" v-if="item.lockStatus==0"
+								 src="@/assets/img/parkingDetails/item3.svg" alt="">
+								<img class="img color4"  v-else
+								src="@/assets/img/parkingDetails/item4.svg" alt="">
+							</template>
+							
 							
 							{{item.name}}
+						</view>
+						<view class="value" v-if="item.status==0">
+							<view class="jpbutton jpbutton4" >
+								离线
+							</view>
 						</view>
-						<view class="value">
-							<view class="jpbutton jpbutton1" v-if="item.lockStatus==0" >
+						<view class="value" v-else >
+							<view class="jpbutton jpbutton1" @click="gotoInfoLock(item)"
+							 v-if="item.lockStatus==0" >
 								<img class="img" src="@/assets/img/button/lock.svg" alt="">
 								降锁
 							</view>
@@ -245,6 +260,7 @@
 				.img{
 					width: 56rpx;
 					height: 56rpx;
+					  
 				}
 
 			}
@@ -261,6 +277,7 @@
 				.img{
 					width: 32rpx;
 					height: 32rpx;
+					
 				}
 			}
 		}
@@ -273,6 +290,7 @@
 				.img{
 					width: 36rpx;
 					height: 36rpx;
+					
 				}
 			}
 			.item2 {
@@ -317,6 +335,7 @@
 			.img{
 				width: 32rpx;
 				height: 32rpx;
+				
 			}
 
 		}
@@ -350,6 +369,7 @@
 				.img {
 					width: 32rpx;
 					height: 32rpx;
+					
 				}
 				span {
 					margin-left: 8rpx;
@@ -370,9 +390,21 @@
 					align-items: center;
 
 					.img {
-						width: 50rpx;
-						height: 50rpx;
-						margin-right: 16rpx;
+						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);
 					}
 				}
 			}