WechatOwnerService/components/fee/qrcode-owe-fee.vue
2023-09-19 00:48:17 +08:00

314 lines
9.5 KiB
Vue

<template>
<view>
<scroll-view scroll-y style="padding-bottom: 200rpx;" v-if="customFee == 'ON'">
<checkbox-group class="block" @change="checkboxChange($event)">
<view class="cu-list menu" v-for="(item,index) in fees" :key="index" :data-item="item"
v-if="item.payOnline == 'Y'">
<view class="cu-item ">
<view class="content padding-tb-sm flex justify-start">
<view>
<checkbox :class="item.selected == '1'?'checked':''"
:checked="item.selected == '1'?true:false" :value="item.feeId">
</checkbox>
</view>
<view class="margin-left-sm" @click="_showDetailFee(item)">
<view class="flex justify-start">
<view class="text-cut" style="width:150px">{{item.feeName}}<text v-if="item.payerObjName">({{item.payerObjName}})</text>
</view>
</view>
<view class="text-gray text-sm">
<text class="margin-right-xs">{{item.endTime}}至{{_getDeadlineTime(item)}}</text>
</view>
</view>
</view>
<view class="action" @click="_showDetailFee(item)">
<text class="text-grey text-sm">应缴:¥{{item.feeTotalPrice}}</text>
</view>
</view>
<view class="sub-info flex justify-start flex-wrap" v-if="item.showDetail">
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">上期读数:{{item.preDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">上期读表时间:{{_getReadTime(item.preReadingTime)}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.curDegrees">
<text class="margin-right-xs">本期读数:{{item.curDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">本期读表时间:{{_getReadTime(item.curReadingTime)}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.curDegrees">
<text class="margin-right-xs">使用量:{{item.curDegrees-item.preDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.ownerName">
<text class="margin-right-xs">业主:{{item.ownerName}}</text>
</view>
<view class="sub-info-item text-gray text-sm">
<text class="margin-right-xs">单价:{{item.mwPrice && item.mwPrice>0?item.mwPrice:item.squarePrice}}/{{item.additionalAmount}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.payerObjName">
<text class="margin-right-xs">房号:{{item.payerObjName}}</text>
</view>
</view>
</view>
</checkbox-group>
</scroll-view>
<scroll-view scroll-y style="padding-bottom: 200rpx;" v-else>
<view class="cu-list menu" v-for="(item,index) in fees" :key="index" :data-item="item"
v-if="item.payOnline == 'Y'">
<view class="cu-item " @click="_showDetailFee(item)">
<view class="content padding-tb-sm ">
<view class="flex justify-start">
<view class="text-cut" style="width:150px">{{item.feeName}}<text v-if="item.payerObjName">({{item.payerObjName}})</text>
</view>
</view>
<view class="text-gray text-sm">
<text class="margin-right-xs">{{item.endTime}}至{{_getDeadlineTime(item)}}</text>
</view>
</view>
<view class="action">
<text class="text-grey text-sm">应缴:¥{{item.feeTotalPrice}}</text>
</view>
</view>
<view class="sub-info flex justify-start flex-wrap" v-if="item.showDetail">
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">上期读数:{{item.preDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">上期读表时间:{{_getReadTime(item.preReadingTime)}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.curDegrees">
<text class="margin-right-xs">本期读数:{{item.curDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.preDegrees">
<text class="margin-right-xs">本期读表时间:{{_getReadTime(item.curReadingTime)}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.curDegrees">
<text class="margin-right-xs">使用量:{{item.curDegrees-item.preDegrees}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.payerObjName">
<text class="margin-right-xs">房号:{{item.payerObjName}}</text>
</view>
<view class="sub-info-item text-gray text-sm" v-if="item.ownerName">
<text class="margin-right-xs">业主:{{item.ownerName}}</text>
</view>
<view class="sub-info-item text-gray text-sm">
<text class="margin-right-xs">单价:{{item.mwPrice && item.mwPrice>0?item.mwPrice:item.squarePrice}}/{{item.additionalAmount}}</text>
</view>
</view>
</view>
</scroll-view>
<view v-if="fees.length > 0" class="bg-white border flex justify-end"
style="position: fixed;width: 100%;bottom: 0;">
<view class="action text-orange margin-right line-height">
合计:{{receivableAmount}}元
</view>
<view class="btn-group">
<button class="cu-btn bg-red shadow-blur lgplus sharp" @click="onPayFee()">缴费</button>
</view>
</view>
<view v-if="!fees || fees.length < 1">
<no-data-page></no-data-page>
</view>
</view>
</template>
<script>
import {
getQrcodeOweFees
} from '@/api/fee/qrCodePayFee.js';
import {
dateSubOneDay,
getDate,
formatDate
} from '../../lib/java110/utils/DateUtil.js';
import noDataPage from '@/components/no-data-page/no-data-page.vue'
export default {
name: "qrcodeOweFee",
data() {
return {
fees: [],
ownerId: '',
roomId:'',
communityId: '',
storeId: '',
receivableAmount: 0,
customFee: 'OFF',
createStaffId:'',
feeType:'OWNER',
feeIds: []
};
},
methods: {
_loadFees(_param) {
this.ownerId = _param.ownerId;
this.communityId = _param.communityId;
this.customFee = _param.customFee;
this.createStaffId = _param.createStaffId;
this.roomId = _param.roomId;
this.feeType = _param.feeType;
let _that =this;
_that.feeIds = [];
getQrcodeOweFees(this, {
ownerId: this.ownerId,
communityId: this.communityId
}).then(_data => {
let _fees = [];
if(_that.feeType == 'ROOM' && _that.roomId){
_data.data.forEach(item=>{
if(item.payerObjId == _that.roomId){
_fees.push(item);
}
})
}else{
_fees = _data.data;
}
_that.fees = _fees;
if (_data.data && _data.data.length > 0) {
_that.storeId = _data.data[0].incomeObjId;
}
return _fees;
}).then(function(_fees) {
_fees.forEach(function(_item) {
if (_item.payOnline == 'Y') {
_item.selected = "1";
_that.feeIds.push(_item.feeId);
}
})
_that.computeAmount();
})
},
onPayFee: function() {
if(!this.feeIds || this.feeIds.length < 1){
uni.showToast({
icon:'none',
title:'未选择费用'
})
return;
}
let _objData = {
business: "oweFee",
communityId: this.communityId,
ownerId: this.ownerId,
feeName: '物业费',
receivedAmount: this.receivableAmount,
storeId: this.storeId,
feeIds:this.feeIds
};
uni.setStorageSync('doing_cashier',_objData);
uni.navigateTo({
url:'/pages/fee/cashier?money='+this.receivableAmount+"&business=oweFee&communityId="+this.communityId+"&cashierUserId="+this.createStaffId
})
},
computeAmount:function(){
let _that =this;
let _fees = this.fees;
let _feeIds = this.feeIds;
let _receivableAmount = 0.0;
_fees.forEach(_item=>{
_feeIds.forEach(_feeId =>{
if(_item.feeId == _feeId){
_receivableAmount += parseFloat(_item.feeTotalPrice);
}
})
});
_that.receivableAmount = _receivableAmount.toFixed(2);
},
checkboxChange: function(e) {
let _that =this;
this.feeIds = e.detail.value;
_that.fees.forEach(function(_item) {
_item.selected = "0";
_that.feeIds.forEach(_feeId =>{
if(_item.feeId == _feeId){
_item.selected = "1";
}
});
})
this.computeAmount();
},
_getDeadlineTime: function(_fee) {
//todo 处理周期性费用和间接费用的结束时间
return dateSubOneDay(_fee.startTime, _fee.deadlineTime, _fee.feeFlag);
},
_getReadTime:function(_value){
let _date = getDate(_value);
return formatDate(_date);
},
_showDetailFee:function(_fee){
let _fees = this.fees;
_fees.forEach(item=>{
//item.showDetail = false;
if(_fee.feeId == item.feeId){
item.showDetail = !item.showDetail;
}
});
this.$forceUpdate();
}
}
}
</script>
<style lang="scss">
.ppf_item {
padding: 0rpx 0rpx 0rpx 0rpx;
}
.block__title {
margin: 0;
font-weight: 400;
font-size: 14px;
color: rgba(69, 90, 100, .6);
padding: 40rpx 30rpx 20rpx;
}
.button_up_blank {
height: 40rpx;
}
.block__bottom {
height: 180rpx;
}
.fee-last {
margin-bottom: 200upx;
}
.cu-btn.lgplus {
padding: 0 20px;
font-size: 18px;
height: 100upx;
}
.cu-btn.sharp {
border-radius: 0upx;
}
.line-height {
line-height: 100upx;
}
.uni-checkbox-input{
}
.sub-info{
background-color: #fff;
//margin-top: 0.5upx;
padding:15upx;
.sub-info-item {
width: 45%;
margin:10upx 15upx 0upx 15upx;
}
}
</style>