|
|
@@ -1,218 +1,297 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar title="扣费详情" title-color="#101010" ></u-navbar>
|
|
|
- <view class="background">
|
|
|
- <view class="recharge-details">
|
|
|
- <view class="headline">
|
|
|
- <text v-if="tenantBalanceRecord.businessName">
|
|
|
- <image class="img" v-if="tenantBalanceRecord.businessName.indexOf('水')>-1" src="@/assets/img/wImage@1x.png" mode=""></image>
|
|
|
- <image class="img" v-else-if="tenantBalanceRecord.businessName.indexOf('房')>-1||tenantBalanceRecord.businessName.indexOf('租')>-1" src="@/assets/img/wImage.png" mode=""></image>
|
|
|
- <image class="img" v-else-if="tenantBalanceRecord.businessName.indexOf('保洁')>-1" src="@/assets/img/wImage3.png" mode=""></image>
|
|
|
- <image class="img" v-else-if="tenantBalanceRecord.businessName.indexOf('物业')>-1" src="@/assets/img/wImage4.png" mode=""></image>
|
|
|
-
|
|
|
- <image class="img" v-else src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
|
|
|
-
|
|
|
- </text>{{tenantBalanceRecord.businessName}}
|
|
|
- </view>
|
|
|
- <view class="sum">
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="扣费详情" title-color="#101010"></u-navbar>
|
|
|
+ <view class="background">
|
|
|
+ <view class="recharge-details">
|
|
|
+ <view class="headline">
|
|
|
+ <text v-if="tenantBalanceRecord.businessName">
|
|
|
+ <image class="img" v-if="tenantBalanceRecord.businessName.indexOf('水')>-1"
|
|
|
+ src="@/assets/img/wImage@1x.png" mode=""></image>
|
|
|
+ <image class="img"
|
|
|
+ v-else-if="tenantBalanceRecord.businessName.indexOf('房')>-1||tenantBalanceRecord.businessName.indexOf('租')>-1"
|
|
|
+ src="@/assets/img/wImage.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="tenantBalanceRecord.businessName.indexOf('保洁')>-1"
|
|
|
+ src="@/assets/img/wImage3.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="tenantBalanceRecord.businessName.indexOf('物业')>-1"
|
|
|
+ src="@/assets/img/wImage4.png" mode=""></image>
|
|
|
+
|
|
|
+ <image class="img" v-else src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
|
|
|
+
|
|
|
+ </text>{{tenantBalanceRecord.businessName}}
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
{{tenantBalanceRecord.amount}}
|
|
|
- </view>
|
|
|
- <view class="state">
|
|
|
- 已扣费
|
|
|
- </view>
|
|
|
- <view class="details">
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 合同信息
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{tenantContract.remark}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item" v-if="false">
|
|
|
- <view class="item-title">
|
|
|
- 户号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- 00880088
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item" >
|
|
|
- <view class="item-title">
|
|
|
- 收费标准
|
|
|
- </view>
|
|
|
- <view class="item-value" v-if="contractItem.id">
|
|
|
- {{contractItem.price}}{{contractItem.unit}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <template v-if="tenantBalanceRecord.businessName=='电费'" >
|
|
|
- <view class="item">
|
|
|
+ <span>元</span>
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ 已扣费
|
|
|
+ </view>
|
|
|
+ <view class="details">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 合同信息
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{tenantContract.remark}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-if="false">
|
|
|
+ <view class="item-title">
|
|
|
+ 户号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 00880088
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 收费标准
|
|
|
+ </view>
|
|
|
+ <view class="item-value" v-if="contractItem.id">
|
|
|
+ {{contractItem.price}}{{contractItem.unit}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="tenantBalanceRecord.businessName=='电费'&&tenantBalanceRecord.extraJson">
|
|
|
+
|
|
|
+
|
|
|
+ <table class="table1" v-if="tenantBalanceRecord.extraJson.children">
|
|
|
+ <tr class="tr1">
|
|
|
+ <td></td>
|
|
|
+ <td>起止码</td>
|
|
|
+ <td>度数</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td1">{{tenantBalanceRecord.extraJson.meterName}}</td>
|
|
|
+ <td>{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}}</td>
|
|
|
+ <td class="td3" >{{tenantBalanceRecord.extraJson.kwh}}度</td>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="(item,i) in tenantBalanceRecord.extraJson.children" :key="i">
|
|
|
+ <td class="td1">{{item.meterName}}</td>
|
|
|
+ <td>{{item.startMeter}}-{{item.endMeter}}</td>
|
|
|
+ <td class="td3">{{item.kwh}}度</td>
|
|
|
+ </tr>
|
|
|
+ <tr style="font-weight: bold;" >
|
|
|
+ <td class="td1" colspan="2">扣除后用电量</td>
|
|
|
+
|
|
|
+ <td>{{tenantBalanceRecord.extraJson.remainKwh}}度</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <view class="item" v-else>
|
|
|
<view class="item-title">
|
|
|
度数
|
|
|
</view>
|
|
|
<view class="item-value">
|
|
|
{{tenantBalanceRecord.extraJson.kwh}}度(起止码{{tenantBalanceRecord.extraJson.startMeter}}-{{tenantBalanceRecord.extraJson.endMeter}})
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
-
|
|
|
- </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- <view class="details">
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 付款方式
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{tenantBalanceRecord.methodN}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 订单号
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- 30816112557708460925
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 扣费时间
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- {{tenantBalanceRecord.createTime}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 支付时间
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- 2023-08-20 10:29:00
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 返回 -->
|
|
|
- <!-- <button class="back">返回</button> -->
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import * as API from '@/apis/pagejs/deduction.js'
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 付款方式
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{tenantBalanceRecord.methodN}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 订单号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 30816112557708460925
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 扣费时间
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{tenantBalanceRecord.createTime}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 支付时间
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2023-08-20 10:29:00
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 返回 -->
|
|
|
+ <!-- <button class="back">返回</button> -->
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/deduction.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: '',
|
|
|
+ tenantBalanceRecord: {},
|
|
|
+ contractItem: {},
|
|
|
+ tenantContract: {},
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if (op.id) {
|
|
|
+ this.id = op.id
|
|
|
+ }
|
|
|
+ this.getRechargeDetails()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ dayM(time) {
|
|
|
+ if (!time) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ var day = new Date(new Date(time).getTime() - 1)
|
|
|
+ return (day.getMonth() + 1) + "月" + day.getDate() + "日"
|
|
|
+ },
|
|
|
+ getRechargeDetails() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+
|
|
|
+ API.recordDetails({
|
|
|
+ id: this.id
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+
|
|
|
+ this.contractItem = response.data.contractItem;
|
|
|
+
|
|
|
+ this.tenantContract = response.data.tenantContract;
|
|
|
+ this.tenantBalanceRecord = response.data.tenantBalanceRecord;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ icon: "none",
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .table1{
|
|
|
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- id:'',
|
|
|
- tenantBalanceRecord:{},
|
|
|
- contractItem:{},
|
|
|
- tenantContract:{}
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(op){
|
|
|
- if(op.id){
|
|
|
- this.id=op.id
|
|
|
- }
|
|
|
- this.getRechargeDetails()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- dayM(time){
|
|
|
- if(!time){
|
|
|
- return ''
|
|
|
- }
|
|
|
- var day=new Date(new Date(time).getTime()-1)
|
|
|
- return (day.getMonth()+1)+"月"+day.getDate()+"日"
|
|
|
- },
|
|
|
- getRechargeDetails(){
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
-
|
|
|
- API.recordDetails({
|
|
|
- id:this.id
|
|
|
- }).then((response) => {
|
|
|
- uni.hideLoading();
|
|
|
-
|
|
|
- this.contractItem=response.data.contractItem;
|
|
|
-
|
|
|
- this.tenantContract=response.data.tenantContract;
|
|
|
- this.tenantBalanceRecord=response.data.tenantBalanceRecord;
|
|
|
- }).catch(error => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: error
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ td{
|
|
|
+ border: 1px solid #e7e7e7;
|
|
|
+ text-align: end;
|
|
|
+ padding: 2px 8px;
|
|
|
}
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .background{
|
|
|
-
|
|
|
- background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
|
|
|
- padding: 40rpx 32rpx ;
|
|
|
- .recharge-details{
|
|
|
-
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 40rpx 32rpx ;
|
|
|
- text-align: center;
|
|
|
- .headline{
|
|
|
- color: rgb(16,16,16);
|
|
|
- font-size: 36rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .img{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .sum{
|
|
|
- color: rgb(16,16,16);
|
|
|
- font-size: 48rpx;
|
|
|
+ .td1{
|
|
|
+ text-align: start;
|
|
|
+ min-width: 20%;
|
|
|
+ max-width: 30%;
|
|
|
+ }
|
|
|
+ .td3{
|
|
|
+
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+ tr{
|
|
|
+ background-color:#f5f5f6
|
|
|
+ }
|
|
|
+ .tr1{
|
|
|
+ text-align: end;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ tr:nth-child(even) {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .background {
|
|
|
+
|
|
|
+ background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+
|
|
|
+ .recharge-details {
|
|
|
+
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ font-size: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .sum {
|
|
|
+ color: rgb(16, 16, 16);
|
|
|
+ font-size: 48rpx;
|
|
|
margin-top: 32rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .state{
|
|
|
- color: rgb(56,158,13);
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
- .details{
|
|
|
- margin-top: 40rpx;
|
|
|
- padding-top: 40rpx;
|
|
|
- border-top: 1px solid rgba(241,241,241,1);
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom:16rpx;
|
|
|
- .item-title{
|
|
|
- color: rgb(119,119,119);
|
|
|
- }
|
|
|
- .item-value{
|
|
|
- color: rgb(48,48,48);
|
|
|
- }
|
|
|
+ span{
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 返回
|
|
|
- .back{
|
|
|
- border: 1px solid rgba(205,205,205,1);
|
|
|
- border-radius: 8px;
|
|
|
- line-height: 88rpx;
|
|
|
- background-color: rgba(255,255,255,1);
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 32rpx;
|
|
|
-
|
|
|
- }
|
|
|
-</style>
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .state {
|
|
|
+ color: rgb(56, 158, 13);
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .details {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ border-top: 1px solid rgba(241, 241, 241, 1);
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgb(119, 119, 119);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回
|
|
|
+ .back {
|
|
|
+ border: 1px solid rgba(205, 205, 205, 1);
|
|
|
+ border-radius: 8px;
|
|
|
+ line-height: 88rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin