|
|
@@ -27,71 +27,114 @@
|
|
|
</view>
|
|
|
<view class="content">
|
|
|
<!-- 可用余额 -->
|
|
|
- <view class="balance">
|
|
|
- <view class="balance-left">
|
|
|
- 可用余额(元)
|
|
|
- </view>
|
|
|
- <view class="balance-right">
|
|
|
- {{personInfo.balance}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 提示 有余额-->
|
|
|
-
|
|
|
- <view class="hint" v-if="personInfo.balance>0">
|
|
|
- 有余额，可提前充值
|
|
|
- </view>
|
|
|
- <!-- 提示 无余额 已欠费 -->
|
|
|
- <view class="hint hint2" v-if="personInfo.balance==0" >
|
|
|
- 已扣完，请尽快缴费
|
|
|
|
|
|
- </view>
|
|
|
- <view class="hint hint2" v-if="personInfo.balance<0" >
|
|
|
- 有欠费，请尽快充值
|
|
|
- </view>
|
|
|
<!-- 租户信息 -->
|
|
|
<view class="infos" >
|
|
|
<view class="item">
|
|
|
<view class="item-title">
|
|
|
承租方
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-value">
|
|
|
{{personInfo.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item" v-if="false">
|
|
|
<view class="item-title">
|
|
|
户号
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-value">
|
|
|
00880088
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
+ <view class="item" v-if="false">
|
|
|
<view class="item-title">
|
|
|
联系人
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-value">
|
|
|
{{personInfo.contacts}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
+ <view class="item" v-if="false">
|
|
|
<view class="item-title">
|
|
|
物业方
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="item-value">
|
|
|
{{companyInfo.propertyManagement}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view class="balance">
|
|
|
+ <!-- -->
|
|
|
+ <view class="balance-img">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <img src="@/assets/img/Group 911.png" class="Group911"></img>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="balanceMain">
|
|
|
+ <view class="balanceFlex2" :style="'border-color:'+averageColor"></view>
|
|
|
+
|
|
|
+ <svg width="282" height="282" :style="'transform: rotate('+averageLevel+'deg);'"
|
|
|
+ class="Group909"
|
|
|
+ viewBox="0 0 282 282" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path d="M157 141C157 149.837 149.837 157 141 157C132.163 157 125 149.837 125 141C141 0 141 0 141 0C141 0 141 0 157 141Z" fill="#DFDAD4"/>
|
|
|
+ <path d="M141 157C132.163 157 125 149.837 125 141C141 0 141 7.08465e-05 141 7.08465e-05C141 7.08465e-05 141 96.5001 141 157Z" fill="#CAC3BA"/>
|
|
|
+ <g filter="url(#filter0_d_2522_561)">
|
|
|
+ <circle cx="141" cy="142" r="7" fill="#ACABA8"/>
|
|
|
+ </g>
|
|
|
+ <defs>
|
|
|
+ <filter id="filter0_d_2522_561" x="128" y="129" width="26" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
|
+ <feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
|
+ <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
|
+ <feMorphology radius="2" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_2522_561"/>
|
|
|
+ <feOffset/>
|
|
|
+ <feGaussianBlur stdDeviation="2"/>
|
|
|
+ <feComposite in2="hardAlpha" operator="out"/>
|
|
|
+ <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
|
|
|
+ <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_561"/>
|
|
|
+ <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_561" result="shape"/>
|
|
|
+ </filter>
|
|
|
+ </defs>
|
|
|
+ </svg>
|
|
|
+ </view>
|
|
|
+ <view class="balanceMain">
|
|
|
+ <view class="balanceFlex">
|
|
|
+ <view class="balance-right balance">
|
|
|
+ {{personInfo.balance}}
|
|
|
+ </view>
|
|
|
+ <view class="balance-left">
|
|
|
+ 可用余额(元)
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- 缴费金额 -->
|
|
|
<view class="payment-amount">
|
|
|
<view class="title">
|
|
|
- 缴费金额
|
|
|
+ 充值金额
|
|
|
+
|
|
|
+ <view class="hint" v-if="personInfo.balance>0">
|
|
|
+ 有余额，可提前充值
|
|
|
+ </view>
|
|
|
+ <!-- 提示 无余额 已欠费 -->
|
|
|
+ <view class="hint hint2" v-if="personInfo.balance==0" >
|
|
|
+ 已扣完，请尽快缴费
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="hint hint2" v-if="personInfo.balance<0" >
|
|
|
+ 有欠费，请尽快充值
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="amount-options">
|
|
|
<view v-for="(item,i) in amountList" :key="i"
|
|
|
@@ -285,6 +328,8 @@
|
|
|
selectNum:'100',
|
|
|
otherNum:'',
|
|
|
transferAccountsInfo:{},
|
|
|
+ averageLevel:0,
|
|
|
+ averageColor:"#55bb81",
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -293,6 +338,7 @@
|
|
|
},
|
|
|
onShow(){
|
|
|
this.homePage()
|
|
|
+ this.availableDuration()
|
|
|
},
|
|
|
methods: {
|
|
|
copyUrl(){
|
|
|
@@ -310,6 +356,63 @@
|
|
|
|
|
|
|
|
|
},
|
|
|
+ availableDuration(){
|
|
|
+ API_index.availableDuration({
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+ var sz=['#C0331D','#e84325','#ef7830',
|
|
|
+ '#4faf78', '#55bb81']
|
|
|
+
|
|
|
+ var balance=response.data.balance;
|
|
|
+ var averageAmount=response.data.averageAmount;
|
|
|
+ if(averageAmount==0&&balance>0){
|
|
|
+
|
|
|
+ this.averageLevel=130;
|
|
|
+
|
|
|
+ this.averageColor=sz[sz.length-1]
|
|
|
+ }else if(averageAmount==0){
|
|
|
+ this.averageColor=sz[0]
|
|
|
+ this.averageLevel=-130;
|
|
|
+ } else if(balance==0){
|
|
|
+ this.averageLevel=-130;
|
|
|
+ this.averageColor=sz[0]
|
|
|
+ }else{
|
|
|
+ var day=balance/averageAmount
|
|
|
+ console.log(day)
|
|
|
+
|
|
|
+ if(day<1){
|
|
|
+ this.averageLevel=-130;
|
|
|
+ this.averageColor=sz[0]
|
|
|
+ }else if(day==1){
|
|
|
+ this.averageLevel=-90;
|
|
|
+ this.averageColor=sz[1]
|
|
|
+ }else if(day<7){
|
|
|
+ this.averageColor=sz[2]
|
|
|
+ var sday=day-1
|
|
|
+
|
|
|
+ var kd=45-(sday)/6*45
|
|
|
+ this.averageLevel=(-45-kd);
|
|
|
+ }else if(day<=15){
|
|
|
+ this.averageColor=sz[3]
|
|
|
+ var sday=day-7
|
|
|
+
|
|
|
+ var kd=45-(sday)/8*45
|
|
|
+ this.averageLevel=(0-kd);
|
|
|
+ }else{
|
|
|
+ this.averageLevel=130;
|
|
|
+ this.averageColor=sz[sz.length-1]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(this.averageLevel)
|
|
|
+ }).catch(error => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
homePage(){
|
|
|
// uni.showLoading({
|
|
|
// title: "加载中",
|
|
|
@@ -527,19 +630,71 @@
|
|
|
|
|
|
// 可用余额
|
|
|
.balance {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .balance-left {
|
|
|
- color: rgb(48, 48, 48);
|
|
|
- font-size: 36rpx;
|
|
|
- line-height: 40px;
|
|
|
+
|
|
|
+ .balance-img{
|
|
|
+ padding:0 40rpx;
|
|
|
+
|
|
|
+ .Group911{
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .balance-right {
|
|
|
- color: rgb(48, 48, 48);
|
|
|
- font-size: 80rpx;
|
|
|
+ .balanceMain{
|
|
|
+ display: flex;
|
|
|
+ height: 0;
|
|
|
+ justify-content: space-around;
|
|
|
+ .Group909{
|
|
|
+ //width: 40rpx;
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ top: calc(50vw + 40rpx);
|
|
|
+
|
|
|
+
|
|
|
+ z-index: 8;
|
|
|
+ }
|
|
|
+ .balanceFlex2{
|
|
|
+ z-index: 7;
|
|
|
+ content: ' ';
|
|
|
+ width: 200rpx; /* 宽度 */
|
|
|
+ height: 200rpx; /* 高度 */
|
|
|
+ background-color: white;
|
|
|
+ border: 36rpx solid blue; /* 外圈颜色及宽度 */
|
|
|
+ border-radius: 50%; /* 圆形 */
|
|
|
+ position: absolute;
|
|
|
+ top: calc(50vw + 140rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .balanceMain{
|
|
|
+ display: flex;
|
|
|
+ height: 0;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .balanceFlex{
|
|
|
+
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* width: 100%; */
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: -140rpx;
|
|
|
+ }
|
|
|
+ .balance-left {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 32rpx;
|
|
|
+ //line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-right {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 提示
|
|
|
@@ -558,9 +713,9 @@
|
|
|
|
|
|
// 租户信息
|
|
|
.infos {
|
|
|
- border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
- margin-top: 32rpx;
|
|
|
- padding-bottom: 32rpx;
|
|
|
+ //border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
+
|
|
|
+ padding-bottom: 24rpx;
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
@@ -585,6 +740,9 @@
|
|
|
.title {
|
|
|
color: rgb(48, 48, 48);
|
|
|
font-size: 36rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.amount-options {
|
zhengkaixin
