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

<template>
	<view class="jpmain  ">
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>
		<view class="body">
			<view class="page-top">
				<view class="text1">地锁名称</view>
				<view class="text2">地锁名称11<u-icon name="edit-pen" size="32" color="#FFFFFF"></u-icon></view>
			</view>
			<view class="page">
				<view class="info-title">
					<view class="name">设备信息</view>
					<view class="value">
						<view class="pack-up" v-show="listShow" @click="listShow=false">
							收起<u-icon name="arrow-up" size="32" color="#AAAAAA"></u-icon>
						</view>
						<view class="pack-up" v-if="!listShow" @click="listShow=true">
							展开<u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
						</view>
					</view>
				</view>
				<view class="table">
					<view class="row">
						<view class="name">设备型号</view>
						<view class="value">{{obj.model}}</view>
					</view>


					<view class="row">
						<view class="name">出厂编号</view>
						<view class="value">{{obj.deviceNo}}</view>
					</view>
					<template v-if="!listShow">
						<view class="row">
							<view class="name">固件版号</view>
							<view class="value">{{obj.firmwareVersion}}</view>
						</view>
						<view class="row">
							<view class="name">防护等级</view>
							<view class="value">{{obj.protectionGrade}}</view>
						</view>

						<view class="row">
							<view class="name">输入电压</view>
							<view class="value">{{obj.inputVoltage}}</view>
						</view>
						<view class="row">
							<view class="name">输出电压</view>
							<view class="value">{{obj.outputVoltage}}</view>
						</view>

						<view class="row">
							<view class="name">输出电流</view>
							<view class="value">{{obj.outputCurrent}}</view>
						</view>
						<view class="row">
							<view class="name">输出功率</view>
							<view class="value">{{obj.outputPower}}</view>
						</view>

						<view class="row">
							<view class="name">生产日期</view>
							<view class="value">{{obj.manufactureTime}}</view>
						</view>

						<view class="row">
							<view class="name">标准依据</view>
							<view class="value">{{obj.standardBasis}}</view>
						</view>
						<view class="row">
							<view class="name">联网卡号</view>
							<view class="value">{{obj.trafficCardNumber}}</view>
						</view>
						<view class="row">
							<view class="name">资费标准</view>
							<view class="value">{{obj.tariffStandard}}</view>
						</view>
						<view class="row">
							<view class="name">设备启动时间</view>
							<view class="value">{{obj.bindingTime}}</view>
						</view>
						<view class="row">
							<view class="name">设备质保期</view>
							<view class="value">{{obj.shelfLife}}</view>
						</view>
					</template>

				</view>
			</view>
			<view class="page">
				<view class="info-title">
					<view class="name">联网信息</view>
					<view class="value">

					</view>
				</view>
				<view class="table">
					<view class="row">
						<view class="name">联网卡号</view>
						<view class="value">{{obj.trafficCardNumber}}</view>
					</view>
					<view class="row">
						<view class="name">有效期至</view>
						<view class="value">{{obj.expirationTime?obj.expirationTime.split(' ')[0]:''}}

						</view>

					</view>
					<view class="tips">
						<u-icon style="    margin-top: 2px;" size="30" name="info-circle"></u-icon>
						<view>
							家用充电桩内含物联网卡，此卡随设备出厂时赠送三年免费使用时长，三年后将按5元/月资费标准收取费用。

						</view>

					</view>
				</view>
			</view>
			<view class="page">
				<view class="info-title">
					<view class="name">充电白名单<span class="span">({{whiteList.length}}/3)</span></view>
					<view class="value" @click="addUser()">
						<u-icon style="    margin-top: 2px;" size="30" name="plus"></u-icon> 添加
					</view>
				</view>
				<view class="table">
					<table>
						<tr>
							<td>姓名</td>
							<td>手机号</td>
							<td>车牌号</td>
							<td>操作</td>
						</tr>
						<tr v-for="(item,i) in whiteList" :key="i">
							<td>{{item.nickName}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.carNumber==0?'':item.carNumber}}</td>
							<td class="" style="color:#1677FF;white-space: pre;" @click="editUser(item)">修改</td>
						</tr>

					</table>

				</view>
			</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>
				<u-input :customStyle="customStyle" v-model="vipUser.nickName" placeholder="白名单车主姓名(必填)"></u-input>
				<view style="padding: 4px;">白名单车主手机号码<span style="color: red;">*</span></view>
				<u-input :customStyle="customStyle" 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 v-if="vipUser.id" style="display: flex;">
					<u-button type="info" style="margin-top: 10px;width: 49%;" shape="circle"
						@click="delUser()">删除</u-button>
					<u-button type="success" style="margin-top: 10px;width: 49%;" shape="circle"
						@click="submitUser()">保存</u-button>
				</view>
				<view v-else>

					<u-button type="success" style="margin-top: 10px;" shape="circle"
						@click="submitUser()">保存</u-button>
				</view>


			</view>
		</u-popup>
		<u-modal v-model="delShow" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true"
			ref="uModal" title="删除白名单用户" content="是否删除当前白名单用户?" confirm-text="删除"></u-modal>

		<view class="floating-button">
			<view class="button">

				保存
			</view>

		</view>


	</view>
</template>

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

	export default {
		data() {
			return {
				id: "",
				floorlockInfo: {},
				listShow: true,
				popupShow: false,
				customStyle: {
					"border-radius": "50px",
					"background-color": 'rgba(242, 244, 246, 1)',
					padding: "5px 20px",
					margin: "5px 0 ",
					
				},
				abc:false,
				whiteList: [],
				vipUser: {},
				delShow: false,
				obj: {},
				carshow: false,
			};
		},
		onLoad(op) {
			this.id = op.id
			this.getFloorlockDetails()

		},
		methods: {
			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
					}
				}
				
			},
			valChange(val){
				
				if(this.vipUser.carNumber.length>=8){
					return
				}
				this.vipUser.carNumber+=val
				this.valInit()
				this.$forceUpdate()
			},
			backspace(){
				//
				var value=this.vipUser.carNumber
				if(value.length){
					value = value.substr(0, value.length - 1);
					
				}
				this.vipUser.carNumber=value
				this.valInit()
				

			},
			getFloorlockDetails() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj = {
					id: this.id
				}

				API.floorlockDetails(obj).then((res) => {
					this.floorlockInfo = res.data.floorlockInfo

					uni.hideLoading();
					this.getWhiteList()
				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getWhiteList(bl) {

				if (bl) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				API.whiteList({
					floorlockId: this.id
				}).then((res) => {
					this.whiteList = res.data.whiteList

					if (bl) {
						uni.hideLoading()
						uni.showToast({
							title: "操作成功"
						})
					}




				}).catch(error => {

					uni.showToast({
						title: error
					})
				})


			},
			submitUser() {
				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)

				}).catch(error => {

					uni.showToast({
						title: error
					})
				})


			},
			confirmDelete() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.deleteWhite({
					id: this.vipUser.id
				}).then((res) => {
					//this.obj = res.data
					uni.hideLoading()
					this.delShow = false
					this.popupShow = false
					uni.showToast({
						title: "操作成功"
					})
					this.getWhiteList(1)

				}).catch(error => {

					uni.showToast({
						title: error
					})
				})
			},
			delUser() {
				this.delShow = true;
			},
			editUser(item) {
				this.popupShow = true;
				this.vipUser = item;
				this.vipUser.nickName = item.nickName


				this.vipUser.floorlockId = this.id
				if (this.vipUser.carNumber == 0) {
					this.vipUser.carNumber = ''
				}
			},
			addUser() {
				if (this.whiteList.length >= 3) {
					uni.showToast({
						title: "添加白名单用户已达到上限"
					})
					return
				}
				this.popupShow = true;
				this.vipUser = {
					carNumber:""
				}

				this.vipUser.floorlockId = this.id

			},


		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style lang="scss" scoped>
	.gradient-header {
		height: 0px;
	}

	.jpback {
		height: 360rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 11%, rgba(242, 244, 246, 1) 100%);
	}

	.body {
		padding: 32rpx 32rpx 120rpx 32px;
		//padding-bottom: ;
	}

	.page-top {
		color: rgba(255, 255, 255, 1);
		margin: 48rpx 0;

		.text1 {
			font-size: 36rpx;
			margin-bottom: 12rpx;
		}

		.text2 {
			font-size: 40rpx;

		}
	}

	.page {
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);

		padding: 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);

		.info-title {
			display: flex;
			justify-content: space-between;
			padding-bottom: 24rpx;

			.name {
				font-size: 36rpx;
				color: rgba(51, 51, 51, 1);
				font-weight: bold;

				.span {
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(119, 119, 119, 1);
				}
			}

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

		.pack-up {


			color: rgba(119, 119, 119, 100);
		}

		.tips {
			margin-top: 12rpx;
			display: flex;
			align-items: flex-start;
			font-size: 24rpx;
		}

		.table {
			table {
				width: 100%;
			}

			.row {
				display: flex;
				align-items: center;
				height: 72rpx;
				font-size: 28rpx;
				padding: 0 24rpx;

				.name {
					width: 240rpx;
				}

			}

			td {

				height: 72rpx;
				font-size: 28rpx;


			}

			/* 隔行变色: 偶数行设置背景色 */
			.row:nth-child(odd) {
				background-color: #f9f9f9;
				/* 偶数行 */
			}

			tr:nth-child(odd) {
				background-color: #f9f9f9;
				/* 偶数行 */
			}

			.row:nth-child(even) {
				background-color: #ffffff;
				/* 奇数行 */
			}

			tr:nth-child(even) {
				background-color: #ffffff;
				/* 奇数行 */
			}

		}
	}
/deep/.u-keyboard-grids-btn:nth-child(15){
			background-color: red;
		}
	.popup-screen {
		
		.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;
		}
		

		padding: 40rpx;

		.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);

				}
			}
		}
	}

	.floating-button {
		position: fixed;
		bottom: 0;
		/* 距离底部 20px */
		width: 100%;
		display: flex;
		height: 120rpx;
		justify-content: center;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
		}
	}
</style>