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

<template>
	<view>
		<componentLogin ref="refLogin"
		@findByOpenId="findByOpenId" @findByOpenIdErr="findByOpenIdErr"></componentLogin>
		
		
		<view v-show="isReady" class="isReady">
			<view class="gradient-header">
				<view class="jpback">
			
				</view>
			</view>
			<view v-show="floorlockInfo.id" class="isReady_1">
				 <lockInfo ref="lockInfoRef"></lockInfo>
				 
			</view>
			<view v-show="!floorlockInfo.id" 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="gotobindLock()">
							<u-icon name="scan" label="绑定新地锁" color="#fff" label-color="#fff"
								label-size="36"></u-icon>
						</view>
					</view>
				</view>
			</view>


		</view>
		<u-modal v-model="loginBl" @confirm="loginconfirm"  :show-cancel-button="true"
			ref="uModal" title="提示" content="当前用户未登录,是否前往登录" confirm-text="登录"></u-modal>
		
		<tabbar   ></tabbar>
	</view>
</template>

<script>
	import componentLogin from '@/components/componentLogin.vue';
	import tabbar from '@/pages/business/as-components/Tabbar.vue';
	
	 import lockInfo from '@/pages/business/as-components/componentLockInfo.vue';
	
	
	import * as API from '@/apis/pagejs/pagesIndex.js'

	export default {
		components: {
			componentLogin,
			tabbar,
			lockInfo

			//'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、成功降锁后请于三分钟内将车辆驶入指定车位；超时地锁会自动升起，需重新扫码降锁；2、请按降锁流程说明停车，严禁使用外力降锁；3、地锁服务热线 400-8899-619。",
									open: false,
								}],
				content: "400-8899-619",
				setIntervalId: "",
				userInfo:{},
				userInfoPlus:{
					whiteList:[],
					myAllList:[]
				},
				
				showMessage: 0,
				
				openLockBl:false,
				closeLockBl:false,
				openModalBl: false,
				formX:0,
				loginBl: false,
				
			}
		},
		onLoad(op) {
			
			
			
			
			this.userInfo = this.jphelp.getPersonInfo()
			this.userInfoPlus=this.jphelp.getPersonInfoPlus()
			if(this.userInfo.id){
				
			}
			
			
			
			//this.lockInfoOnLoad()
		},
		onShow(){
			//
			
		},
		onReady() {
			this.$refs.refLogin.findByOpenId()
			
			
		},
		onShareTimeline(){
			return {
				title: '智泊e家',
			}
		},
		onShareAppMessage(res) {
			return {
				title: '智泊e家',
			}
		},
		methods: {
			loginconfirm(){
				this.$refs.refLogin.ashow()
			},
			gotobindLock(){
				if(!this.jphelp.getPersonInfo().id){
					this.loginBl=true;
					return
					
				}
				uni.navigateTo({
					url:'/pages/mylock/bindLock'
				})
				
			},
			
			findByOpenIdErr(){
				
				this.isReady=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"
				})
			},
			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
						}
					}
					
					this.whiteList = res.data.whiteList
					
					
						if(this.mylist.length){
							this.id = this.mylist[0].id
							this.getFloorlockDetails()
						}else if(this.whiteList.length){
							this.id = this.whiteList[0].id
							this.getFloorlockDetails()
						}else{
							this.isReady=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;
					
					this.$refs['lockInfoRef'].initRef(this.id,2)


					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
				}
			}
		}
	
	
	
	}
	
	
	.jpbutton {
		   margin-top: 30rpx;
		   margin-bottom: 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;
	}
</style>