WechatOwnerService/components/fee/qrcode-fee-detail.vue
2023-09-14 12:06:40 +08:00

149 lines
3.7 KiB
Vue

<template>
<view>
<view v-for="(item,index) in feeDetails" :key="index"
class="bg-white margin-bottom margin-right-xs radius margin-left-xs padding">
<view class="flex padding-bottom-xs solid-bottom justify-between">
<view>{{item.feeName}}</view>
<view class="text-gray">{{item.createTime}}</view>
</view>
<view class="flex margin-top justify-between">
<view class="text-gray">收费对象</view>
<view class="text-gray">{{item.objName}}</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">缴费编码</view>
<view class="text-gray">{{item.detailId}}</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">缴费周期</view>
<view class="text-gray">{{item.cycles}}个月</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">起始时间</view>
<view class="text-gray">{{item.startTime}}</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">结束时间</view>
<view class="text-gray">{{item.endTime}}</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">缴费金额</view>
<view class="text-gray">{{item.receivedAmount}}元</view>
</view>
<view class="flex margin-top-xs justify-between" v-if="item.preDegrees">
<view class="text-gray">上期度数</view>
<view class="text-gray">{{item.preDegrees}}</view>
</view>
<view class="flex margin-top-xs justify-between" v-if="item.curDegrees">
<view class="text-gray">本期度数</view>
<view class="text-gray">{{item.curDegrees}}</view>
</view>
<view class="flex margin-top-xs justify-between" v-if="item.preDegrees">
<view class="text-gray">使用量</view>
<view class="text-gray">{{item.curDegrees-item.preDegrees}}</view>
</view>
<view class="flex margin-top-xs justify-between">
<view class="text-gray">备注</view>
<view class="text-gray">{{item.remark}}</view>
</view>
</view>
<view v-if="!feeDetails || feeDetails.length < 1">
<no-data-page></no-data-page>
</view>
</view>
</template>
<script>
import {
getPayFeeDetailQrcode
} from '@/api/fee/qrCodePayFee.js';
import {
dateSubOneDay
} from '../../lib/java110/utils/DateUtil.js';
import noDataPage from '@/components/no-data-page/no-data-page.vue'
export default {
name: "qrCodeFeeDetail",
data() {
return {
feeDetails: [],
ownerId: '',
roomId: '',
communityId: '',
storeId: '',
receivableAmount: 0,
customFee: 'OFF',
createStaffId: '',
feeType: 'OWNER',
feeIds: []
};
},
methods: {
_loadFeeDetails(_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;
getPayFeeDetailQrcode(this, {
ownerId: this.ownerId,
communityId: this.communityId,
page:1,
row:50
}).then(_data => {
_that.feeDetails = _data;
});
},
}
}
</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 {}
</style>