123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- <template>
- <view class="mdetail">
- <image :src="mbg" class="mbg"></image>
- <view class="mdbox">
- <view class="mdtop">
- <view class="mdttit">{{datainfo.year}}/01 - {{datainfo.year}}/12 应缴总额/元</view>
- <view class="mdttxt">{{datainfo.totalExpense}}</view>
- </view>
- <view class="mdmain">
- <view class="mdmit">业主信息</view>
- <view class="mdlist">
- <view class="mdltit">户主姓名</view>
- <view>{{datainfo.ownerName}}</view>
- </view>
- <view class="mdlist">
- <view class="mdltit">房号</view>
- <view>{{datainfo.detailedAddress}}</view>
- </view>
-
- <view class="mdmit">缴费详情</view>
- <view class="mdlist">
- <view class="mdltit">物业费用(元)</view>
- <view>{{datainfo.tenementExpense}}</view>
- </view>
- <view class="mdlist">
- <view class="mdltit">车位费用(元)</view>
- <view>{{datainfo.parkingExpense}}</view>
- </view>
- <view class="mdlist">
- <view class="mdltit">能耗费用(元)</view>
- <view>{{datainfo.energyExpense}}</view>
- </view>
- </view>
- </view>
- <view class="pdlr12">
- <view class="mdfbox" @click="getBillFn">
- <view>历史账单</view>
- <image :src="rimg"></image>
- </view>
- </view>
- <block v-if="datainfo.isExpense=='N'">
- <view style="height: 100rpx;"></view>
- <view class="rfbtn" @click="getcallPayFn">催缴</view>
- </block>
- <loading></loading>
- </view>
- </template>
- <script>
- import config from '@/config'
- const baseUrl = config.baseUrl;
- import {feeDet,feecallPaymentId} from "@/api/work/manage.js"
- import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
- export default{
- components:{},
- data(){
- return{
- mbg:require('@/work/static/manage/mbg.png'),
- rimg:require('@/static/images/home/rimg.png'),
- id:'',
- datainfo:{}
- }
- },
- onLoad: function(e) {
- this.id=e.id;
- this.getDataFn()
- },
- methods:{
- checkPermi, checkRole,
- getDataFn(){
- feeDet(this.id).then(res=>{
- if(res.code==200){
- this.datainfo=res.data
- }
- })
- },
- getcallPayFn(){
- var id=this.datainfo.houseId
- feecallPaymentId(id).then(res=>{
- if(res.code==200){
- this.$toast(res.msg)
- }
- })
- },
- getBillFn(){
- this.$tab.navigateTo("/work/pages/manage/moneybill")
- },
- }
- }
- </script>
- <style>
- page{background: #F3F3F0;}
- </style>
- <style lang="scss" scoped>
- .mdetail{background: linear-gradient(180deg, #4882EC 0%, #F3F3F0 100%) no-repeat;min-height: 100vh;background-position: top;background-size: 100% 548rpx;padding: 32rpx 18rpx;position: relative;}
- .mbg{width: 100%;height: 702rpx;margin-bottom: 20rpx;}
- .mdbox{position: absolute;left: 18rpx;height:702rpx;right: 18rpx;top: 32rpx;box-sizing: border-box;display: flex;flex-direction: column;
- .mdtop{padding: 76rpx 52rpx 0;height: 208rpx;flex: 0 0 auto;position: relative;box-sizing: border-box;
- &::after{content: '';position: absolute;left: 96rpx;right: 78rpx;height: 2rpx;border-bottom: 2rpx dashed #A7A7A7;bottom: 0;}
- .mdttit{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 26rpx;}
- .mdttxt{font-weight: bold;font-size: 40rpx;color: #272727;}
- }
- .mdmain{flex: 1;overflow: auto;padding: 24rpx 50rpx 0 52rpx;
- .mdmit{font-weight: bold;font-size: 26rpx;color: #272727;margin-bottom: 26rpx;padding-top: 10rpx;}
- .mdlist{display: flex;justify-content: space-between;margin-bottom: 24rpx;
- .mdltit{min-width: 100rpx;flex: 0 0 auto;text-align-last: justify;margin-right: 12rpx;}
- view{font-weight: 500;font-size: 26rpx;color: #666666;}
- }
- }
- }
- .mdfbox{height: 96rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 26rpx;box-sizing: border-box;display: flex;align-items: center;
- image{width: 13rpx;height: 24rpx;}
- view{font-weight: 500;font-size: 26rpx;color: #272727;flex: 1;margin-right: 4rpx;}
- }
- </style>
|