jp-housekeep-hall/pages/meterManagement/meterManagement.vue

<template>
	<view>
		<u-navbar title="电表管理" title-color="#101010"></u-navbar>
		<view class="background">
			
			<view  v-for="(query,i) in queryList" :key="i">
				<!-- <view class="meter-title" v-if="queryList.length>1">
					<span class="icon"></span>
				{{query.remark}} </view> -->
				<view class="meter-info"  @click="gotoInfo(query)"   >
					<view  class="titleMain" >
						<view class="title">
							<view class="icon">
								<image class="img"  
								src="@/assets/img/meter@3x.png" mode=""></image>
							</view>
							<view class="text" v-if="query.meterId">
								{{query.item.name}}
							</view>
							<view class="text" style="color:#777777  ;" v-else>
								未绑定
							</view>
						</view>
						<view class="unbind" 
						@click.stop.prevent="getScanCode(query)">
							
								
							<view class="text" :class="{
							meterId:query.meterId
							}">
								<image class="img" v-if="query.meterId" src="@/assets/img/riLine-link-unlink.svg" mode=""></image>
								
								<image class="img" v-else src="@/assets/img/riLine-qr-scan-2-line 1.svg" mode=""></image>
															
								{{query.meterId?'换绑电表':'绑定电表'}}
							</view>
						</view>
					</view>
					
					
					<view class="content">
						<view class="details">
							<view class="details-item">
								<view class="details-title">
									电表状态
								</view>
								<view class="details-value" v-if="query.meterId">
									<span class="spanradius" :class="{
											normal:query.item.online
										}" ></span>
									{{query.item.online?'电表在线':'电表离线'}}
								</view>
								<view class="details-value" v-else>
									
								</view>
							</view>
							<view class="details-item">
								<view class="details-title">
									设备编号
								</view>
								<view class="details-value">
									{{query.item.deviceNo}}
								</view>
							</view>
							<view class="details-item">
								<view class="details-title">
									地址简称
								</view>
								<view class="details-value">
									{{query.item.installationAddressSimple}}
						
								</view>
							</view>
							<view class="details-item">
								<view class="details-title">
									设备地址
								</view>
								<view class="details-value">
									{{query.item.installationAddress}}
												
								</view>
							</view>
							<view class="details-item" v-if="queryList.length>1">
								<view class="details-title">
									租住地址
								</view>
								<view class="details-value">
									{{query.address}}
								</view>
							</view>
						
						</view>
						
						
					</view>
					
				</view>
				
			</view>
			<u-divider :isnone="queryList.length==0"  nonetext="没有找到相关内容"
				border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		<!-- 底部 -->
	
		<!-- 账户信息弹窗 -->
		<view class="modal">
			<u-modal v-model="bindShow" :show-title="false" :show-cancel-button="true"
			 @confirm="submit"
			 
			 cancel-text="取消"
				confirm-text="确认绑定">
				<view class="headline">
					请确认您要绑定的电表信息

				</view>
				<view class="infos">
					<view class="item">
						<view class="title">
							设备名称
						</view>
						<view class="value">
							
							<u-input v-model="updateByMeter.name" :border="true" ></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备地址
						</view>
						<view class="value">
							
							<u-input v-model="updateByMeter.installationAddress"
							 type="textarea"
							 :border="true" ></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							地址简称
						</view>
						<view class="value">
							
							<u-input v-model="updateByMeter.installationAddressSimple" :border="true" ></u-input>
						</view>
					</view>
					<view class="item">
						<view class="title">
							电表编号
							
						</view>
						<view class="value">
							{{findByMeter.deviceNo}}
							
						</view>
					</view>
					<view class="item">
						<view class="title">
							设备类型
						</view>
						<view class="value">
							{{findByMeter.deviceTypeN}}
						</view>
					</view>
					
				</view>
				
			</u-modal>
		</view>
		<!-- 确认解绑弹窗 -->
		<u-popup v-model="unbindShow" mode="bottom" border-radius="24">
					<view class="unbind-popup">
						<view class="headline">
							确认解绑
						</view>
						<view class="affirm">
							您确定要解绑该电表？
						</view>
						<view class="button-box">
							<button class="think" @click="closeShow=false">我在想想</button>
							<button class="confirm" @click="closeWorkOrder">确认解绑</button>
						</view>
					</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	
	import {
			parseUnixTime
		
		} from '@/apis/utils'
	import * as API_Electricity from '@/apis/pagejs/tenantElectricityMeter.js'
	import * as WxJsApi from '@/apis/utils/wxJsApi.js'
	import * as API from '@/apis/pagejs/deduction.js'
	
	
	export default {
		data() {
			return {
				bindShow:false,
				unbindShow:false,
				findByMeter:{},
				updateByMeter:{},
				queryList:[],
				electricity:{
					
				},
				meterDetail:{},
				equipmentInfosShow:false,
				electricityMeterList:[],
				contractId:"",
				meterNo:"",
				
			}
		},
		onLoad() {
			WxJsApi.getWxConfig([ 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			
		},
		onShow(){
			this.contractList();
			
		},
		methods: {
			getMeterDetails(meterId){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_Electricity.meterDetails({
					meterId:meterId
				}).then((response) => {
					uni.hideLoading()
					this.meterDetail=response.data.meter;
					this.equipmentInfosShow=true;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			thisparseUnixTime(time){
				return parseUnixTime(new Date(time),'{y}年{m}月{d}日')
			},
			gotoInfo(query){
				if(query.meterId){
					//this.getMeterDetails(query.meterId)
					this.gotoUrl('/pages/meterManagement/equipmentDetails?id='+query.meterId)
				}
			},
			timeEnd(contractEndTime){
				return new Date()>new Date(contractEndTime)
			},
			contractList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.contractList(this.formData).then((response) => {
					uni.hideLoading();
					var queryList = response.data.data;
					if(queryList.length){
						this.getElectricityMeterList(queryList)
					}
					
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			updateByMeterMethod(){
				
				var sz=['name','installationAddress','installationAddressSimple']
				var sz2=['name','address','addressSimple']
				
				var bl=false;
				var obj={
					id:this.updateByMeter.id
				};
				for(var i in sz){
					var key=sz[i]
					var key2=sz2[i]
					//console.log(key,this.updateByMeter[key],this.findByMeter[key])
					if(this.updateByMeter[key]!=this.findByMeter[key]){
						bl=true;
						//console.log('aaa')
					}
					obj[key2]=this.updateByMeter[key]
				}
				
				if(bl){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_Electricity.updateMeter(obj).then((response) => {
						
						
						this.contractList()
					
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}else{
					this.contractList()
				}
				
			},
			submit(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_Electricity.bindMeter({
					meterNo:this.meterNo,
					contractId:this.contractId,
				}).then((response) => {
					uni.hideLoading()
					uni.showModal({
						showCancel:false,
						content:"操作成功",
						title:"提示"
					})
					
					this.updateByMeterMethod()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getScanCode(item) {
				if(this.timeEnd(item.endTime)){
					uni.showModal({
						showCancel:false,
						content:"缴费有效期已结束，不可修改",
						title:"提示"
					})
					return 
				}
				this.contractId=item.id;
				//console.log(item)
				if(!(process.env.NODE_ENV === "development") ){
					this.getScanCode1()
				}else{
					var code="CODE_128,2"
					this.getScanCode2(code)
				}
				
				
				
			},
			getScanCode1() {
			
					WxJsApi.scanQRCode(1,null,["qrCode","barCode"]).then(res => {
						//("scanQRCode------" + res)
						if (res) {
							
							this.getScanCode2(res)
						}
					}).catch(error => {
			
					})
			
				
			},
			getScanCode2(code) {
				if(code){
					if(code.indexOf(",")>-1){
						var sz= code.split(",")
						if(sz.length==2){
							this.findByMeterNo(sz[1]);
						}
					}else{
						this.findByMeterNo(code);
					}
				}
				
			},
			findByMeterNo(meterNo){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.meterNo=meterNo
				API_Electricity.findByMeterNo({
					meterNo:this.meterNo
				}).then((response) => {
					uni.hideLoading()
					console.log(response)
					this.bindShow=true;
					this.findByMeter=response.data.meter;
					this.updateByMeter={
						...this.findByMeter
					};
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						showCancel:false,
						content:error,
						title:"提示"
					})
				})
			},
			getElectricityMeterList(queryList){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_Electricity.electricityMeterList().then((response) => {
					uni.hideLoading()
					this.electricityMeterList=response.data.meterList
					
					for(var i in queryList){
						var item= queryList[i]
						queryList[i].item={}
						if(item.meterId){
							queryList[i].item=this.electricityMeterList.find(op=>{
								if(op.id==item.meterId){
									return 1
								}else{
									return 0
								}
							})
							
						}
					}
					this.queryList=queryList;
					this.$forceUpdate()
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		height: 400rpx;
	    background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
	    padding: 24rpx 32rpx;
		.meter-title{
			.icon{
				    width: 10rpx;
				    height: 40rpx;
				    background-color: #1677ff;
				    color: #1677ff;
				    margin: 0 12rpx 0 0rpx;
				  
				    display: inline-block;
			}
			    display: flex;
			    align-items: center;
			    color: #333333;
			    font-size: 36rpx;
			    margin-left: 16rpx;
				margin-bottom: 24rpx;
		}
	 .meter-info{
		 border-radius: 8px;
		 background-color: rgba(255,255,255,1);
		 padding: 24rpx;
		 margin-bottom: 24rpx;
		 .titleMain{
			  display: flex;
			      align-items: center;
		 }
		 .unbind{
		 				 margin-left: auto;
		 				   font-weight: bold;
						   font-size: 24rpx;

		 				.img{
		 					 width: 32rpx;
		 					 height: 32rpx;
		 					 margin: auto;
		 					margin-right: 4rpx;	 						
		 						 						 
		 				}
						color: #fff;
		 			.text{
						white-space: pre;
						border-radius: 50px;
						display: flex;
						align-items: center;
						padding: 6rpx 12rpx;
						background-color: rgba(0,185,98,1);
					}
					.meterId{
						
						background-color: rgba(22,119,255,1);
					}
		 }
		 .title{
			 display: flex;
			 align-items: center;
			 color: rgba(51,51,51,1);
			 font-size: 36rpx;
			 font-weight: bold;
			 .icon{
				 width: 48rpx;
				 height: 48rpx;
				 margin-right: 8rpx;
				 .img{
					 width: 100%;
					 height: 100%;
					 width: 48rpx;
					 height: 48rpx;
				 }
			 }
		 }
		 .content{
			 display: flex;
			 padding: 8rpx 0;
			 .details{
			 			 
			 			 .details-item{
			 				 display: flex;
			 				 margin-top: 16rpx;
			 			 }
			 			 
			 			 .details-title{
			 				 width: 112rpx;
			 				 color: rgba(119,119,119,1);
			 			 }
						 .details-value2{
							 width: 390rpx;
							 color: rgba(51,51,51,1);
						 }
			 			 .details-value{
			 				 width: 390rpx;
			 				 color: rgba(51,51,51,1);
			 				 margin-left: 24rpx;
							 .spanradius{
							 	width: 20rpx;
							 	height: 20rpx;
							 	background-color: #FF7B00  ;
							 	color: #FF7B00  ;
							 	margin-right: 4rpx;
							 	 border-radius: 50%; /* 将正方形变成圆形 */
							 	  display: inline-block; 
							 }
							 .normal{
							 	background-color: #00B962 ;
							 	color: #00B962 ;
							 }
			 			 }
			 }
			 
			
		 }
		 
	 }
	}


  // 底部
    .bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #fff;
		padding: 24rpx 32rpx;
		.bind{
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 80rpx;
			border-radius: 50px;
			color: #fff;
			font-size: 36rpx;
			background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
		
		 .img{
			 width: 40rpx;
			 height: 40rpx;
			 margin-right: 8rpx;
			 
		 }
		}
	}
// 账户信息弹窗
.modal {
		.headline {
			text-align: center;
			background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(20, 73, 159, 1) 100%);
			color: #fff;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 36rpx;

		}
		.infos {
			padding: 40rpx 48rpx 26rpx;
		
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
				align-items: center;
		
				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 32rpx;
					width: 138rpx;
				}
		
				.value {
					color: #333333;
					font-size: 32rpx;
					
					width: 388rpx;
					margin-left: 16rpx;
				}
			}
		
		}
		
	}
	// 确认解绑弹窗
	.unbind-popup{
		padding: 32rpx;
		text-align: center;
		.headline{
			color: rgba(16,16,16,1);
			font-size: 36rpx;
			font-weight: bold;
		}
		.affirm{
			color: rgba(16,16,16,1);
			font-size: 32rpx;
			margin-top: 40rpx;
			font-weight: bold;
		}
		
		.button-box {
			display: flex;
		    margin-top: 84rpx;
			.think {
				width: 328rpx;
		
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(222, 225, 228, 1);
				color: rgba(51, 51, 51, 1);
		
			}
		
			.confirm {
				width: 328rpx;
		
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 4px;
				background-color: rgba(255, 68, 68, 1);
				color: rgba(255, 255, 255, 1);
			}
		}
	}
	// 设备信息弹窗
	.equipment-popup {
	
		.content {
	
			padding: 32rpx;
	
			.headline {
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
	
			.infos {
				padding-bottom: 100rpx;
	
				.item:last-of-type {
					border: none;
				}
	
				.item {
					display: flex;
					align-items: center;
	
					line-height: 48rpx;
					padding: 24rpx 0;
					border-bottom: 1px solid #cccccc;
	
					.item-title {
						color: rgba(51, 51, 51, 1);
						width: 200rpx;
					}
	
					.item-value {
						color: #666666;
						flex: 1;
						margin-left: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.img{
							width: 32rpx;
							height: 32rpx;
							transform: rotate(90deg);
							margin-left: 96rpx;
						}
					}
				}
	
			}
	
			.get {
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 4px;
				background-color: rgba(22, 119, 255, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
			}
		}
	}
</style>