|
|
@@ -0,0 +1,266 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="租户余额管理" title-color="#101010"></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="tenant" v-for="(tenant,i) in tenantList" :key="i" >
|
|
|
+ <view class="tenant-name">
|
|
|
+ {{tenant.name}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="balance">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/wallet@3x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 账户余额
|
|
|
+ <span class="state" v-if="tenant.balance<0">已欠费</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="balance-number">
|
|
|
+ <view class="number" :class="{
|
|
|
+ number2:tenant.balance<0
|
|
|
+ }" >
|
|
|
+ {{tenant.balance}}元
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <view class="deadline" v-for="(obj,i) in tenant.tenantContractList" :key="i">
|
|
|
+ <view class="deadline-item" v-for="(item,i) in obj.contractItemList" :key="i" v-if="item.paymentMethod==1" >
|
|
|
+ <view class="item-icon">
|
|
|
+
|
|
|
+ <image class="img" v-if="item.name.indexOf('水')>-1" src="@/assets/img/deadline2.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.name.indexOf('房')>-1||item.name.indexOf('租')>-1" src="@/assets/img/deadline1.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.name.indexOf('保洁')>-1" src="@/assets/img/deadline4.png" mode=""></image>
|
|
|
+ <image class="img" v-else-if="item.name.indexOf('物业')>-1" src="@/assets/img/deadline3.png" mode=""></image>
|
|
|
+
|
|
|
+ <image class="img" v-else src="@/assets/img/deadline3.png" mode=""></image>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="date-box" :class="{
|
|
|
+ stateBl:stateBl(item.prepaidEndTime)
|
|
|
+ }">
|
|
|
+ <view class="classify">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="classify">
|
|
|
+ <span class="state" v-if="item.prepaidEndTime&&stateBl(item.prepaidEndTime)">已到期</span>
|
|
|
+ <span class="state" v-if="!item.prepaidEndTime">未交费</span>
|
|
|
+ </view>
|
|
|
+ <view class="date" v-if="item.prepaidEndTime">
|
|
|
+ 已缴费至 <text class="state">{{item.prepaidEndTime}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider :isnone="tenantList.length==0" nonetext="无记录"
|
|
|
+ border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/tenantList.js'
|
|
|
+ import {
|
|
|
+ newDate
|
|
|
+ } from '@/apis/utils'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tenantList:[],
|
|
|
+ getTenantListReady:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // this.current=1
|
|
|
+ this.getTenantList()
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ stateBl(time){
|
|
|
+ var get=newDate(time)
|
|
|
+ var time=new Date()
|
|
|
+ return get<time;
|
|
|
+ },
|
|
|
+ getTenantList(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.tenantContractList().then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.getTenantListReady=true
|
|
|
+ this.tenantList=response.data.tenantInfoList;
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main{
|
|
|
+
|
|
|
+ margin-top: 24rpx;
|
|
|
+ .tenant{
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin: 24rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ .tenant-name{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance{
|
|
|
+ padding: 24rpx 24rpx;
|
|
|
+ border-bottom: 1px solid #F4F4F4;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ white-space: pre;
|
|
|
+
|
|
|
+ margin-left: 16rpx;
|
|
|
+ color: rgba(238, 49, 56, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-number {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // margin-top: 16rpx;
|
|
|
+ // margin-left: 56rpx;
|
|
|
+ .number2 {
|
|
|
+
|
|
|
+ color: rgba(238, 49, 56, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+
|
|
|
+ //font-size: 56rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge {
|
|
|
+ width: 144rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(85.19deg, rgba(255, 61, 0, 1) 4.89%, rgba(255, 123, 0, 1) 95.37%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 期限
|
|
|
+ .deadline {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+
|
|
|
+ .deadline-item:first-of-type{
|
|
|
+
|
|
|
+ //border-top: 1px solid #F4F4F4;
|
|
|
+ }
|
|
|
+ .deadline-item:last-of-type{
|
|
|
+
|
|
|
+ // border-left: 1px solid #F4F4F4;
|
|
|
+ }
|
|
|
+ .deadline-item {
|
|
|
+ border-bottom: 1px solid #F4F4F4;
|
|
|
+ border-right: 1px solid #F4F4F4;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ padding: 24rpx ;
|
|
|
+
|
|
|
+
|
|
|
+ .item-icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ .img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .stateBl{
|
|
|
+ .state {
|
|
|
+ // white-space: pre;
|
|
|
+ color: rgba(238, 49, 56, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date-box {
|
|
|
+
|
|
|
+ .state {
|
|
|
+ white-space: pre;
|
|
|
+ //color: rgba(238, 49, 56, 1);
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .classify {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
zhengkaixin
