jp-floorlock-phone/pages/mylock/myLock.vue

<template>
	<view class="jpmain  ">


		<view class="body">


			<view class="page">

				<view class="page-content">
					
					
					<view class="item" v-for="(item,i) in list"
					 @click="gotoItem(item)">
						<view class="title">

							<view class="name">
								<img class="img" src="@/assets/img/mylock/item1.svg" alt="">

								{{item.name}}
								<span v-if="item.phonetype==1" class="tag tag1">我的</span>
								<span v-if="item.phonetype==2"  class="tag tag2">共享</span>
							</view>
							<view class="value">
								<span v-if="item.parkingName">{{item.parkingName}}</span>
								<span v-if="item.typeN">{{item.typeN}}</span>
								<span v-if="item.addWhiteUserName">来自{{item.addWhiteUserName}}的共享</span>
								
								<span v-if="item.whitePhoneNum">白名单：{{item.whitePhoneNum}}</span>
							</view>
						</view>
						<view class="goto">

							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>

						</view>
					</view>
					
					<u-empty text="列表为空" mode="list" margin-top="80" v-if="!list.length">
						
					</u-empty>
					
					

				</view>
			</view>

		</view>
		<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 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>

<script>
	import * as API from '@/apis/pagejs/mylock.js'

	export default {
		components: {
		//'u-button': () => import('@/uni_modules/uview-ui/components/u-button/u-button'),
		//'u-keyboard': () => import('@/uni_modules/uview-ui/components/u-keyboard/u-keyboard'),
		
			//'u-popup': () => import('@/uni_modules/uview-ui/components/u-popup/u-popup'),
			//'u-select': () => import('@/uni_modules/uview-ui/components/u-select/u-select'),
			//'u-input': () => import('@/uni_modules/uview-ui/components/u-input/u-input'),
			
		},
		data() {
			return {
				popupShow:false,
				whiteList:[],
				list:[],
				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() {
			
		},
		onShow() {
			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)
				}
				if(item.phonetype==2){
					this.gotoUrl('pages/business/lockInfo?id='+item.id)
				}
			},
			
			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"
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style scoped lang="scss">
	/* styles.css */


	.body {
		padding: 32rpx;
	}





	.page {

		.page-content {

			.item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;

				.title {


					.name {
						    display: flex;
						    align-items: center;
						color: rgba(22, 119, 255, 1);
						font-size: 32rpx;
						font-weight: bold;
						margin-bottom: 8rpx;

						.img {
							width: 36rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}

					}

					.value {
						color: rgba(119, 119, 119, 1);
						font-size: 24rpx;

						span {
							margin-right: 16rpx;
						}
					}

				}

				.goto {

					color: rgba(119, 119, 119, 1);

				}

			}
		}


	}

	.floating-button {
		position: fixed;
		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;
			height: 80rpx;

			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			.img {
				width: 40rpx;
				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{
		border-radius: 4px;
		background-color: rgba(255,255,255,1);
		color: rgba(0,185,98,1);
		font-size: 24rpx;
		text-align: center;
		margin: 0 8rpx;
		padding: 2rpx 8rpx;
		border: 1px solid rgba(0,185,98,1);
	}
	.tag1{
	
		color: #1677FF ;
	
		border: 1px solid #1677FF ;
	}
	.tag2{
	
		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>