快捷充电， 首页调整

components/Tabbar.vue

@@ -0,0 +1,73 @@
+<template>
+	<view>
+		<u-tabbar :list="tabbarList" 
+		 mid-button-size="112" :mid-button="true"
+		 @input="gotoinput"
+		 inactive-color="#ADB8C2" active-color="#5098FF">
+		</u-tabbar>
+
+	</view>
+</template>
+
+<script>
+ 
+	export default {
+		name: "Tabbar",
+		props: {
+			 
+		},
+		data() {
+			return {
+				 
+				tabbarList: [{
+
+						iconPath:require("@/assets/img/tabBar/index1.png") ,
+						selectedIconPath: require( "@/assets/img/tabBar/index1-HL.png"),
+						text: '附近 ',
+						pagePath: "/pages/index/index",
+					},
+					 {
+					 	iconPath: require("@/assets/img/tabBar/parking_icon.png"),
+					 	selectedIconPath: require("@/assets/img/tabBar/parking_icon.png"),
+					 	text: '',
+						pagePath2: "/pages/business/quickInfo",
+					 	midButton: true,
+					 },
+					
+					
+					{
+						iconPath: require("@/assets/img/tabBar/center.png"),
+						selectedIconPath: require("@/assets/img/tabBar/center-HL.png"),
+
+						text: '我的',
+						pagePath: "/pages/index/center",
+					}
+				],
+			};
+
+		},
+		methods: {
+			gotoinput(i){
+				var item=this.tabbarList[i]
+				if(!item.pagePath){
+					uni.reLaunch({
+						url:item.pagePath2
+					})
+				}
+			}
+			
+		},
+		mounted() {
+
+		},
+		destroyed() {
+
+		}
+
+
+	}
+</script>
+
+<style>
+
+</style>

pages/business/quickInfo.vue

@@ -0,0 +1,583 @@
+<template>
+	<view>
+		<view v-if="isReady" class="isReady">
+			<view class="gradient-header">
+				<view class="jpback">
+			
+				</view>
+			</view>
+			<view v-if="0" class="isReady_1">
+				 
+
+				<view class="body">
+					<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.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="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">
+						<view class="page-main">
+							<view class="mitem">
+								<img class="img" src="@/assets/img/quick/item2.svg" alt="">
+								
+								绑定地锁
+							</view>
+							<view class="mitem">
+								<img class="img" src="@/assets/img/quick/item1.svg" alt="">
+								
+								白名单
+							</view>
+							<view class="mitem end">
+								<img class="img" src="@/assets/img/quick/item3.svg" alt="">
+								属性查看
+							</view>
+						</view>
+					</view>
+					<view class="page  ">
+					<u-collapse   :itemStyle="{
+								'border':'1px solid rgba(187, 187, 187, 0.43);'
+							}">
+							<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 v-else class="isReady_2">
+				<view class="page-top" >
+					<view class="name">
+						<img class="img" src="@/assets/img/lockstatus/index0.svg" alt="">
+					
+					</view>
+					<view class=" value  r2text" >
+						<view class="r2text1">暂无车位</view>
+						<view class="r2text2">您尚未绑定地锁或未被授权使用车位</view>
+
+					</view>
+					<view class="valuebutton" >
+						<view class="jpbutton jpbutton1" @click="gotoUrl('pages/mylock/bindLock')">
+							<u-icon name="scan" label="绑定新地锁" color="#fff" label-color="#fff"
+								label-size="36"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+
+
+		</view>
+
+		<tabbar></tabbar>
+	</view>
+</template>
+
+<script>
+	import componentLogin from '@/components/componentLogin.vue';
+	import tabbar from '@/components/Tabbar.vue';
+	import * as API from '@/apis/pagejs/mylock.js'
+
+	export default {
+		components: {
+			componentLogin,
+			tabbar,
+			'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 {
+				isReady: false,
+				id: "",
+				whiteList: [],
+				list: [],
+				mylist: [],
+				loginBl: false,
+				floorlockInfo: {
+					lockStatusN: ""
+				},
+				itemList: [{
+									head: "操作指南",
+									body: "点击“降锁”按钮，等待地锁降下后系统会提示降锁成功，此时即可将车辆驶入指定车位。",
+									open: true,
+									disabled: true
+								},{
+									head: "温馨提示",
+									body: "1、成功降锁后请于三分钟内将车辆驶入指定车位；超时地锁会自动升起，需重新扫码降锁；2、请按降锁流程说明停车，严禁使用外力降锁；3、地锁服务热线 400-8899-619。",
+									open: false,
+								}],
+				content: "400-8899-619",
+				setIntervalId: "",
+			}
+		},
+		onLoad(op) {
+			if (op.id) {
+				this.id = op.id
+			}
+			if (1) {
+				this.isReady = 1
+				this.id=1
+				this.getFloorlockDetails()
+			}
+		},
+		methods: {
+			getFloorlockList() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				this.list = []
+				API.myParkingSpot().then((res) => {
+
+					this.mylist = res.data.floorList
+					this.whiteList = res.data.whiteList
+
+					for (var i in this.mylist) {
+						var item = this.mylist[i]
+						item.phonetype = 1
+						this.list.push(item)
+					}
+					for (var i in this.whiteList) {
+						var item = this.whiteList[i]
+						item.phonetype = 2
+						this.list.push(item)
+					}
+
+					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
+				}
+
+				API.floorlockDetails(obj).then((res) => {
+					this.floorlockInfo = res.data.floorlockInfo
+					if(1){
+						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:#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;
+		.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-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;
+	}
+</style>