moneydetail.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="mdetail">
  3. <image :src="mbg" class="mbg"></image>
  4. <view class="mdbox">
  5. <view class="mdtop">
  6. <view class="mdttit">{{datainfo.year}}/01 - {{datainfo.year}}/12 应缴总额/元</view>
  7. <view class="mdttxt">{{datainfo.totalExpense}}</view>
  8. </view>
  9. <view class="mdmain">
  10. <view class="mdmit">业主信息</view>
  11. <view class="mdlist">
  12. <view class="mdltit">户主姓名</view>
  13. <view>{{datainfo.ownerName}}</view>
  14. </view>
  15. <view class="mdlist">
  16. <view class="mdltit">房号</view>
  17. <view>{{datainfo.detailedAddress}}</view>
  18. </view>
  19. <view class="mdmit">缴费详情</view>
  20. <view class="mdlist">
  21. <view class="mdltit">物业费用(元)</view>
  22. <view>{{datainfo.tenementExpense}}</view>
  23. </view>
  24. <view class="mdlist">
  25. <view class="mdltit">车位费用(元)</view>
  26. <view>{{datainfo.parkingExpense}}</view>
  27. </view>
  28. <view class="mdlist">
  29. <view class="mdltit">能耗费用(元)</view>
  30. <view>{{datainfo.energyExpense}}</view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class="pdlr12">
  35. <view class="mdfbox" @click="getBillFn">
  36. <view>历史账单</view>
  37. <image :src="rimg"></image>
  38. </view>
  39. </view>
  40. <block v-if="datainfo.isExpense=='N'">
  41. <view style="height: 100rpx;"></view>
  42. <view class="rfbtn" @click="getcallPayFn">催缴</view>
  43. </block>
  44. <loading></loading>
  45. </view>
  46. </template>
  47. <script>
  48. import config from '@/config'
  49. const baseUrl = config.baseUrl;
  50. import {feeDet,feecallPaymentId} from "@/api/work/manage.js"
  51. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  52. export default{
  53. components:{},
  54. data(){
  55. return{
  56. mbg:require('@/work/static/manage/mbg.png'),
  57. rimg:require('@/static/images/home/rimg.png'),
  58. id:'',
  59. datainfo:{}
  60. }
  61. },
  62. onLoad: function(e) {
  63. this.id=e.id;
  64. this.getDataFn()
  65. },
  66. methods:{
  67. checkPermi, checkRole,
  68. getDataFn(){
  69. feeDet(this.id).then(res=>{
  70. if(res.code==200){
  71. this.datainfo=res.data
  72. }
  73. })
  74. },
  75. getcallPayFn(){
  76. var id=this.datainfo.houseId
  77. feecallPaymentId(id).then(res=>{
  78. if(res.code==200){
  79. this.$toast(res.msg)
  80. }
  81. })
  82. },
  83. getBillFn(){
  84. this.$tab.navigateTo("/work/pages/manage/moneybill")
  85. },
  86. }
  87. }
  88. </script>
  89. <style>
  90. page{background: #F3F3F0;}
  91. </style>
  92. <style lang="scss" scoped>
  93. .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;}
  94. .mbg{width: 100%;height: 702rpx;margin-bottom: 20rpx;}
  95. .mdbox{position: absolute;left: 18rpx;height:702rpx;right: 18rpx;top: 32rpx;box-sizing: border-box;display: flex;flex-direction: column;
  96. .mdtop{padding: 76rpx 52rpx 0;height: 208rpx;flex: 0 0 auto;position: relative;box-sizing: border-box;
  97. &::after{content: '';position: absolute;left: 96rpx;right: 78rpx;height: 2rpx;border-bottom: 2rpx dashed #A7A7A7;bottom: 0;}
  98. .mdttit{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 26rpx;}
  99. .mdttxt{font-weight: bold;font-size: 40rpx;color: #272727;}
  100. }
  101. .mdmain{flex: 1;overflow: auto;padding: 24rpx 50rpx 0 52rpx;
  102. .mdmit{font-weight: bold;font-size: 26rpx;color: #272727;margin-bottom: 26rpx;padding-top: 10rpx;}
  103. .mdlist{display: flex;justify-content: space-between;margin-bottom: 24rpx;
  104. .mdltit{min-width: 100rpx;flex: 0 0 auto;text-align-last: justify;margin-right: 12rpx;}
  105. view{font-weight: 500;font-size: 26rpx;color: #666666;}
  106. }
  107. }
  108. }
  109. .mdfbox{height: 96rpx;background: #FFFFFF;border-radius: 20rpx;padding: 0 26rpx;box-sizing: border-box;display: flex;align-items: center;
  110. image{width: 13rpx;height: 24rpx;}
  111. view{font-weight: 500;font-size: 26rpx;color: #272727;flex: 1;margin-right: 4rpx;}
  112. }
  113. </style>