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">({{vipUserList.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 vipUserList" :key="i">
									<td>{{item.userName}}</td>
									<td>{{item.phone}}</td>
									<td>{{item.carNum==0?'':item.carNum}}</td>
									<td class="" style="color:#1677FF" @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">
						<view class="popup-title">{{vipUser.id?'修改':'添加'}}白名单信息</view>
						<view style="padding: 4px;">白名单车主姓名<span style="color: red;">*</span></view>
						<u-input :customStyle="customStyle" v-model="vipUser.name" 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.carNum" placeholder="白名单车主车牌号"></u-input>

						<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 {
				listShow: true,
				popupShow: false,
				customStyle: {
					"border-radius": "50px",
					"background-color": 'rgba(242, 244, 246, 1)',
					padding: "5px 20px",
					margin: "5px 0 "
				},
				applyList: [],
				vipUserList: [],
				vipUser: {},
				delShow: false,
				obj: {},
			};
		},
		onLoad(op) {
			//this.myApplyList()

		},
		methods: {
			submitUser() {
				if (!this.vipUser.name) {
					uni.showToast({
						title: "请填写白名单车主姓名"
					})
					return
				}
				if (!this.vipUser.phone) {
					uni.showToast({
						title: "请填写白名单车主手机号码"
					})
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_apply.saveVipUser(this.vipUser).then((res) => {
					//this.obj = res.data
					uni.hideLoading()

					this.delShow = false
					this.popupShow = false
					this.findVipUser(1)

				}).catch(error => {

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


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

				}).catch(error => {

					uni.showToast({
						title: error
					})
				})
			},
			delUser() {
				this.delShow = true;
			},
			editUser(item) {
				this.popupShow = true;
				this.vipUser = item;
				this.vipUser.name = item.userName
				var item = this.applyList[0]
				this.vipUser.stationId = item.stationId
				if (this.vipUser.carNum == 0) {
					this.vipUser.carNum = ''
				}
			},
			addUser() {
				if (this.vipUserList.length >= 3) {
					uni.showToast({
						title: "添加白名单用户已达到上限"
					})
					return
				}
				this.popupShow = true;
				this.vipUser = {}
				var item = this.applyList[0]
				this.vipUser.stationId = item.stationId

			},
			findDeviceByNo() {
				var item = this.applyList[0]
				API_apply.findDeviceByNoD({
					deviceNo: item.deviceNo
				}).then((res) => {
					this.obj = res.data.chargingDevice
					uni.hideLoading()




				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			findVipUser(bl) {
				if (bl) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
				}
				var item = this.applyList[0]
				this.vipUserList = []
				API_apply.findVipUser({
					stationId: item.stationId
				}).then((res) => {
					if (bl) {

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

					this.vipUserList = res.data.vipUserList



				}).catch(error => {

					uni.showToast({
						title: error
					})
				})
			},
			myApplyList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_apply.myApplyList({

				}).then((res) => {
					//this.obj = res.data

					this.applyList = res.data.applyList;
					this.findVipUser()
					this.findDeviceByNo()

				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
		}
	}
</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;
	}
	.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;
				padding: 0 24rpx;
			}
			  /* 隔行变色: 偶数行设置背景色 */
			  .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; /* 奇数行 */
			      }
			 
		}
	}
	.popup-screen{
		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>