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"  v-if="query.meterId&&query.item"   >
					<view class="title">
						<view class="icon">
							<image class="img" src="@/assets/img/meter@3x.png" mode=""></image>
						</view>
						<view class="text">
							{{query.item.name}}
						</view>
					</view>
					
					<view class="content">
						<view class="details">
							<view class="details-item">
								<view class="details-title">
									电表状态
								</view>
								<view class="details-value">
									<span class="spanradius" :class="{
											normal:query.item.online
										}" ></span>
									{{query.item.online?'电表在线':'电表离线'}}
								</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.remark}}
								</view>
							</view>
						</view>
						
						<view class="unbind" 
						@click="getScanCode(query)">
							<view class="icon">
								<image class="img" src="@/assets/img/iconPark-link-interrupt 1@3x.png" mode=""></image>
							</view>
							<view class="text">
								更换
							</view>
						</view>
					</view>
					
				</view>
				<view  class="meter-info" v-else >
					<view class="content">
						<view class="details">
							
							
							<view class="details-item">
								<view class="details-title">
									绑定电表
								</view>
								
							</view>
							<view class="details-item">
								<view class="details-value2">
									{{!timeEnd(query.contractEndTime)?'未绑定电表，点击绑定':'合同已到期，无法绑定'}}
								</view>
								
							</view>
							<view class="details-item" v-if="queryList.length>1" >
								<view class="details-title">
									所属合同
								</view>
								<view class="details-value">
									{{query.remark}}
								</view>
							</view>
						</view>
						<view class="unbind" v-if="!timeEnd(query.contractEndTime)"
						@click="getScanCode(query)">
							<view class="icon">
								<image class="img" src="@/assets/img/iconPark-link-interrupt 1@3x.png" mode=""></image>
							</view>
							<view class="text">
								绑定
							</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">
							{{findByMeter.name}}
							
						</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 * 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:{},
				queryList:[],
				electricity:{
					
				},
				electricityMeterList:[],
				contractId:"",
				meterNo:"",
				
			}
		},
		onLoad() {
			WxJsApi.getWxConfig([ 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(res)
			})
			
		},
		onShow(){
			this.contractList();
			
		},
		methods: {
			timeEnd(contractEndTime){
				return new Date()>new Date(contractEndTime)
			},
			contractList() {
			
				API.contractList(this.formData).then((response) => {
					uni.hideLoading();
					this.queryList = response.data.data;
					if(this.queryList.length){
						this.getElectricityMeterList()
					}
					
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			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.contractList()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getScanCode(item) {
				this.contractId=item.id;
				this.getScanCode1()
				// var code="CODE_128,23456556121223"
				// 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;
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						showCancel:false,
						content:error,
						title:"提示"
					})
				})
			},
			getElectricityMeterList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API_Electricity.electricityMeterList().then((response) => {
					uni.hideLoading()
					this.electricityMeterList=response.data.meterList
					
					for(var i in this.queryList){
						var item= this.queryList[i]
						if(item.meterId){
							this.queryList[i].item=this.electricityMeterList.find(op=>{
								if(op.id==item.meterId){
									return 1
								}else{
									return 0
								}
							})
							
						}
					}
					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;
		 .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%;
				 }
			 }
		 }
		 .content{
			 display: flex;
			 
			 .details{
			 			 
			 			 .details-item{
			 				 display: flex;
			 				 margin-top: 8rpx;
			 			 }
			 			 
			 			 .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 ;
							 }
			 			 }
			 }
			 
			 .unbind{
				 margin-left: auto;
				   font-weight: bold;
				 .icon{
					 width: 40rpx;
					 height: 40rpx;
					 margin: auto;
					 
					 .img{
						 width: 100%;
						 height: 100%;
						 
					 }
				 }
				 color: rgba(22,119,255,1);
			 }
		 }
		 
	 }
	}


  // 底部
    .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: 144rpx;
			line-height: 144rpx;
			font-size: 36rpx;

		}
		.infos {
			padding: 40rpx 48rpx 26rpx;
		
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24rpx;
		
				.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);
			}
		}
	}
</style>