增加二维码控制， 白名单添加功能

pages/index/index.vue

@@ -33,7 +33,9 @@
 						
 					</view>
 					
-					<view class="value">小于50米</view>
+					<view class="value">小于50米
+					<u-icon name="arrow-right"  color="#CCCCCC"></u-icon>
+					</view>
 				</view>
 			</view>
 			
@@ -74,7 +76,7 @@
 						</view>
 						
 					</view>
-					<view class="value">{{distanceN(item.distance)}}</view>
+					<view class="value" v-if="item.distance" >{{distanceN(item.distance)}}<u-icon name="arrow-right" color="#CCCCCC"></u-icon></view>
 					
 					
 				</view>
@@ -326,7 +328,7 @@
 						font-size: 32rpx;
 						display: flex;
 						align-items: center;
-				
+						padding-bottom: 8rpx;
 						
 						.tag{
 							font-size: 24rpx;

pages/index/main/parkingDetails.vue

@@ -163,6 +163,19 @@
 			}
 		},
 		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
+				}
+				
+			}
 			this.id=op.id
 			if(op.point){
 				this.point=1
@@ -171,10 +184,6 @@
 				console.log(op)
 			}
 			
-			
-			
-			
-			
 		},
 		
 		onShareTimeline(){

pages/mylock/myLock.vue

@@ -46,14 +46,67 @@
 			</view>
 
 		</view>
-		<view class="floating-button" @click="gotoUrl('pages/mylock/bindLock')">
-			<view class="button">
+		<view class="floating-button">
+			<view class="button  "  :class="{
+				lt1:mylist.length
+			}"
+			 @click="gotoUrl('pages/mylock/bindLock')" >
 				<img class="img" src="@/assets/img/mylock/item2.svg" alt="">
 
 				绑定新地锁
 			</view>
-
-		</view>
+			<view class="button lt2"  v-if="mylist.length"
+			 @click="addUser()" >
+				<img class="img" src="@/assets/img/mylock/item4.svg" alt="">
+			
+				添加白名单
+			</view>
+		</view>
+		
+		<u-popup v-model="popupShow" mode="bottom" :closeable="true" border-radius="30">
+			<view class="popup-screen">
+		
+						<u-keyboard ref="uKeyboard"  @change="valChange" @backspace="backspace"
+						:tips="vipUser.carNumber?vipUser.carNumber:'请输入车牌号'"
+						mode="car" v-model="carshow"  :abc="abc" ></u-keyboard>
+		
+		
+				<view class="popup-title">{{vipUser.id?'修改':'添加'}}白名单信息</view>
+			<view style="padding: 4px;">绑定的车位<span style="color: red;">*</span></view>
+			
+			<view class="carNumber"  @click="selectFloorShow=true"
+			:class="{
+							'carNumber1':!vipUser.floorlockId
+						}">
+				{{vipUser.floorlockId?mylist[selectFloorIndex[0]].name:'请先选择需要绑定的车位'}}
+			</view>
+				<view style="padding: 4px;">白名单车主姓名<span style="color: red;">*</span></view>
+				<u-input :customStyle="customStyle"  maxlength="8"  v-model="vipUser.nickName" placeholder="白名单车主姓名(必填)"></u-input>
+				<view style="padding: 4px;">白名单车主手机号码<span style="color: red;">*</span></view>
+				<u-input :customStyle="customStyle" maxlength="13" type="number" v-model="vipUser.phone"
+					placeholder="白名单车主手机号码(必填)"></u-input>
+				<view style="padding: 4px;">白名单车主车牌号</view>
+				<!-- 						<u-input :customStyle="customStyle" v-model="vipUser.carNumber" placeholder="白名单车主车牌号"></u-input> -->
+		
+				<view class="carNumber"  @click="carshow=true,valInit(1)"
+				:class="{
+								'carNumber1':!vipUser.carNumber
+							}">
+					{{vipUser.carNumber?vipUser.carNumber:'白名单车主车牌号'}}
+				</view>
+				
+				<view >
+		
+					<u-button type="success" style="margin-top: 10px;" shape="circle"
+						@click="submitUser()">保存</u-button>
+				</view>
+		
+				<u-select v-model="selectFloorShow" value-name="id" label-name="name"
+				:list="mylist" :default-value="selectFloorIndex"  @confirm="confirm"></u-select>
+				
+			</view>
+		</u-popup>
+		
 	</view>
 </template>
 
@@ -63,10 +116,22 @@
 	export default {
 		data() {
 			return {
-				
+				popupShow:false,
 				whiteList:[],
 				list:[],
-				mylist:[],
+				mylist:[],
+				vipUser: {},
+				abc:false,
+				carshow: false,
+				selectFloorShow:false,
+				selectFloorIndex:[0],
+				customStyle: {
+					"border-radius": "50px",
+					"background-color": 'rgba(242, 244, 246, 1)',
+					padding: "5px 20px",
+					margin: "5px 0 ",
+					
+				},
 			}
 		},
 		onLoad() {
@@ -76,6 +141,116 @@
 			this.getFloorlockList()
 		},
 		methods: {
+			addUser() {
+				
+				this.popupShow = true;
+				this.vipUser = {
+					carNumber:""
+				}
+				this.selectFloorIndex=[0]
+				if(this.mylist.length==1){
+					this.vipUser.floorlockId = this.mylist[0].id
+				}
+				
+			},
+			confirm(e) {
+				console.log(e);
+				this.vipUser.floorlockId=e[0].value
+				var i =this.mylist.findIndex(item=>{
+					return item.id==this.vipUser.floorlockId
+				})
+				this.selectFloorIndex=[i]
+			},
+			backspace(){
+				//
+				var value=this.vipUser.carNumber
+				if(value.length){
+					value = value.substr(0, value.length - 1);
+					
+				}
+				this.vipUser.carNumber=value
+				this.valInit()
+				
+			
+			},
+			valChange(val){
+				
+				if(this.vipUser.carNumber.length>=8){
+					return
+				}
+				this.vipUser.carNumber+=val
+				this.valInit()
+				this.$forceUpdate()
+			},
+			submitUser() {
+				
+				if (!this.vipUser.floorlockId) {
+					uni.showToast({
+						title: "请先选择需要绑定的车位"
+					})
+					return
+				}
+				if (!this.vipUser.nickName) {
+					uni.showToast({
+						title: "请填写白名单车主姓名"
+					})
+					return
+				}
+				if (!this.vipUser.phone) {
+					uni.showToast({
+						title: "请填写白名单车主手机号码"
+					})
+					return
+				}
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				this.vipUser.name = this.vipUser.nickName
+				API.addWhite(this.vipUser).then((res) => {
+					//this.obj = res.data
+					uni.hideLoading()
+			
+					this.delShow = false
+					this.popupShow = false
+					//this.getWhiteList(1)
+					uni.showModal({
+						title: '提示',
+						showCancel: false,
+						content: "操作成功",
+						success: res1 => {
+							if (res1.confirm) {
+								// uni.navigateTo({
+								// 	url:"/pages/searchPile/stationAndPile/chargingPileDetails?isback=1&id="+gunNo
+								// })
+							} else if (res1.cancel) {
+								//('用户点击取消');
+							}
+						}
+					})
+					this.getFloorlockList()
+				}).catch(error => {
+			
+					uni.showToast({
+						title: error
+					})
+				})
+			
+			
+			},
+			valInit(bl){
+				if(bl){
+					this.abc=this.vipUser.carNumber.length>0
+				}else{
+					if(this.vipUser.carNumber.length==1&&this.abc==false){
+						this.abc=true
+					}
+					if(this.vipUser.carNumber.length==0&&this.abc==true){
+						this.abc=false
+					}
+				}
+				
+			},
 			gotoItem(item){
 				if(item.phonetype==1){
 					this.gotoUrl('pages/mylock/infoLock?id='+item.id)
@@ -196,18 +371,21 @@
 
 	.floating-button {
 		position: fixed;
-		bottom: 120rpx;
-		width: 100%;
+		bottom: 0;
+		width: 100%;
+		height: 120rpx;
 		display: flex;
-
+		background-color:#fff;
 		justify-content: center;
-
+		padding-top: 20rpx;
 		.button {
 			border-radius: 50px;
 			background-color: rgba(49, 51, 52, 1);
 			color: rgba(255, 255, 255, 1);
 			font-size: 28rpx;
-			width: 240rpx;
+			width: 240rpx;
+			height: 80rpx;
+
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -218,6 +396,14 @@
 				height: 40rpx;
 				margin-right: 8rpx;
 			}
+		}
+		.lt1{
+			    border-radius: 50px 0 0 50px;
+				background-color: #53B56B;
+		}
+		.lt2{
+			    border-radius:0 50px 50px 0;
+				background-color: #307AF6;
 		}
 	}
 	.tag{
@@ -241,5 +427,76 @@
 		color: rgba(0,185,98,1);
 	
 		border: 1px solid rgba(0,185,98,1);
-	}
+	}
+	
+	
+	
+::v-deep.u-keyboard-grids-btn:nth-child(15){
+			background-color: red;
+		}
+	.popup-screen {
+		padding: 40rpx 40rpx 60rpx 40rpx;
+		.carNumber {
+			background-color: #F2F4F6;
+			padding: 5px 20px;
+			margin: 5px 0 15px 0;
+			height: 90rpx;
+			display: flex;
+			align-items: center;
+			border-radius: 50px;
+			
+		}
+		.carNumber1{
+			color: #bcbcbc;
+		}
+		
+
+		
+
+		.popup-title {
+			font-size: 36rpx;
+			color: rgba(51, 51, 51, 1);
+			font-weight: bold;
+			padding-bottom: 10px;
+		}
+
+		.cardList {
+			display: flex;
+			justify-content: space-evenly;
+
+			.cardInfo {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 8px;
+				background-color: rgba(255, 255, 255, 1);
+				text-align: center;
+				border: 1px solid rgba(187, 187, 187, 1);
+
+				.name {
+					color: rgba(16, 16, 16, 1);
+					font-size: 28rpx;
+				}
+
+				.price {
+					color: rgba(16, 16, 16, 1);
+					font-size: 48rpx;
+					font-weight: bold;
+				}
+			}
+
+			.cardInfoCk {
+				background-color: rgba(225, 247, 237, 1);
+				border: 1px solid rgba(0, 185, 98, 1);
+
+				.price {
+					color: rgba(0, 161, 85, 1);
+
+				}
+			}
+		}
+	}
+
 </style>