|
|
@@ -7,28 +7,52 @@
|
|
|
<!-- <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 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="text">
|
|
|
- {{query.item.name}}
|
|
|
+ <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">
|
|
|
+ <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">
|
|
|
@@ -58,63 +82,19 @@
|
|
|
</view>
|
|
|
<view class="details-item" v-if="queryList.length>1">
|
|
|
<view class="details-title">
|
|
|
- 所属合同
|
|
|
+ 租住地址
|
|
|
</view>
|
|
|
<view class="details-value">
|
|
|
- {{query.remark}}
|
|
|
+ {{query.address}}
|
|
|
</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>
|
|
|
@@ -219,6 +199,9 @@
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ gotoInfo(query){
|
|
|
+ console.log(query)
|
|
|
+ },
|
|
|
timeEnd(contractEndTime){
|
|
|
return new Date()>new Date(contractEndTime)
|
|
|
},
|
|
|
@@ -226,9 +209,9 @@
|
|
|
|
|
|
API.contractList(this.formData).then((response) => {
|
|
|
uni.hideLoading();
|
|
|
- this.queryList = response.data.data;
|
|
|
- if(this.queryList.length){
|
|
|
- this.getElectricityMeterList()
|
|
|
+ var queryList = response.data.data;
|
|
|
+ if(queryList.length){
|
|
|
+ this.getElectricityMeterList(queryList)
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -265,7 +248,8 @@
|
|
|
},
|
|
|
getScanCode(item) {
|
|
|
this.contractId=item.id;
|
|
|
- this.getScanCode1()
|
|
|
+ console.log(item)
|
|
|
+ //this.getScanCode1()
|
|
|
// var code="CODE_128,23456556121223"
|
|
|
// this.getScanCode2(code)
|
|
|
|
|
|
@@ -319,7 +303,7 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- getElectricityMeterList(){
|
|
|
+ getElectricityMeterList(queryList){
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
@@ -328,10 +312,11 @@
|
|
|
uni.hideLoading()
|
|
|
this.electricityMeterList=response.data.meterList
|
|
|
|
|
|
- for(var i in this.queryList){
|
|
|
- var item= this.queryList[i]
|
|
|
+ for(var i in queryList){
|
|
|
+ var item= queryList[i]
|
|
|
+ queryList[i].item={}
|
|
|
if(item.meterId){
|
|
|
- this.queryList[i].item=this.electricityMeterList.find(op=>{
|
|
|
+ queryList[i].item=this.electricityMeterList.find(op=>{
|
|
|
if(op.id==item.meterId){
|
|
|
return 1
|
|
|
}else{
|
|
|
@@ -341,6 +326,7 @@
|
|
|
|
|
|
}
|
|
|
}
|
|
|
+ this.queryList=queryList;
|
|
|
this.$forceUpdate()
|
|
|
|
|
|
}).catch(error => {
|
|
|
@@ -381,6 +367,36 @@
|
|
|
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;
|
|
|
@@ -394,6 +410,8 @@
|
|
|
.img{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -435,22 +453,7 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .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);
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
}
|
zhengkaixin
