充值增加仪表盘

apis/pagejs/index.js

@@ -1,5 +1,16 @@
 import request from '@/apis/utils/request'
  
+ 
+ export function availableDuration(data) {
+ 	var url='/mobile/tenant/availableDuration';
+ 	return request({
+ 		method: 'post',
+ 		data: data,
+ 		url: url
+ 	})
+ }
+ 
+ 
  export function homePage(data) {
  	var url='/mobile/tenant/homePage';
  	return request({

apis/utils/index.js

@@ -34,7 +34,7 @@ export const newDate = (date) => {
 	var time=null;
 	if (typeof date == 'string') {
 		if (date) {
-			console.log(date)
+			//console.log(date)
 			var reg=new RegExp('-','gi')
 			time=new Date(date.replace(reg,'/'));	
 		}

assets/img/Group 909.svg

@@ -0,0 +1,20 @@
+<svg width="282" height="282" 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>

config/.env.dev.js

@@ -15,7 +15,7 @@ const UNI_APP = {
 	openId:"oLowyuAJ1Ld0ivnLj4qp1k5Vy_l4", //王晓春
 	//openId:"oK9Wr54VbEh3xvWYmD_zT5NbH4AY",
 	openId:"oLowyuOJvTszgk96C0f8j0XfcEXg",//zkx
-	 openId:"oLowyuNkSxqovYoobKbeHB1nSkm0", //sz
+	//openId:"oLowyuNkSxqovYoobKbeHB1nSkm0", //sz
 	//openId:"oLowyuHCGgMomNBQEXZSbb5SJxfQ",//ys
 	//openId:"oLowyuB1PliW0qAnJJ56axydeUOM",//zq
 	//openId:"oLowyuMMjIkA_bLA4MXzRQ3KJB2E",//凡佳佳

pages/mine/mine.vue

@@ -44,12 +44,45 @@
 						<view class="number" :class="{
 							number2:personInfo.balance<0
 						}" >
-							{{personInfo.balance}}元
+							{{personInfo.balance}}<span style="font-size: 32rpx;">元</span>
 						</view>
 						<view class="recharge"  @click="gotoUrl('/pages/recharge/accountRecharge')" >
 							充值
 						</view>
 					</view>
+					<view class="triangle-with-dashed-line"
+					:style="{
+						'border-top-color':averageColor,
+						'left':averageLevel+'px',
+					}"
+					></view>
+					
+					<view class="balance-level">
+						
+						<view class="b1 c">
+							<view class="b2 c">
+								<view class="b3 c">
+
+								</view>
+							</view>
+						</view>
+						<view class="t ">
+							<view class="t1 " :style="averageText1?'color:#C0331D;font-weight: bold;':''">
+								{{'不足1天'}}
+								
+							</view>
+							<view class="t2 "  :style="averageText2?'color:#ef7830;font-weight: bold;':''">
+								
+								{{'不足7天'}}
+								
+							</view>
+							<view class="t3 " :style="averageText3?'color:#4faf78;font-weight: bold;':''">
+								
+								{{averageText3?averageText3:'不足15天'}}
+							</view>
+						</view>
+						</view>
+					
 				</view>
 				<!-- 期限 -->
 				<view class="deadline" v-for="(obj,i) in contractList" :key="i">
@@ -213,7 +246,12 @@
 				personInfo:{
 					
 				},
-				contractList:[]
+				contractList:[],
+				averageLevel:10,
+				averageColor:"#55bb81",
+				averageText1:"",
+				averageText2:"",
+				averageText3:"",
 			}
 		},
 		onLoad() {
@@ -228,8 +266,82 @@
 		},
 		onShow() {
 			this.query()
+			
 		},
 		methods: {
+			availableDuration(){
+				API.availableDuration({
+					
+				}).then((response) => {
+					var sz=['#C0331D','#e84325','#ef7830',
+					'#4faf78', '#55bb81']
+					this.averageText1=""
+					this.averageText2=""
+					this.averageText3=""
+					var balance=response.data.balance;
+					var averageAmount=response.data.averageAmount;
+					 
+					
+					if(averageAmount==0&&balance>0){
+						
+						this.averageLevel=uni.upx2px(500);
+						
+						this.averageColor=sz[sz.length-1]
+					}else if(averageAmount==0){
+						this.averageColor=sz[0]
+						this.averageLevel=10;
+					}else  if(balance==0){
+						this.averageLevel=10;
+						this.averageColor=sz[0]
+					}else{
+						var day=balance/averageAmount
+						if(day>=1){
+							day=parseInt(day)
+						}
+						
+						
+						if(day<1){
+							this.averageLevel=10;
+							this.averageColor=sz[0]
+						}else if(day==1){
+							this.averageLevel= uni.upx2px(120) ;
+							this.averageColor=sz[1]
+						}else if(day<7){
+							this.averageColor=sz[2]
+							var averageLevel=120;
+							var sday=day-1
+							
+							var kd=(sday)/6*120
+							this.averageText2='1'
+							this.averageLevel=uni.upx2px(averageLevel + kd);
+						}else if(day<=15){
+							this.averageColor=sz[3]
+							var sday=day-7
+							var averageLevel=240;
+							var kd=(sday)/8*160
+							this.averageText3='预计可用'+day+'天'
+							this.averageLevel=uni.upx2px(averageLevel + kd);
+						}else{
+							this.averageLevel=uni.upx2px(500);
+							this.averageColor=sz[sz.length-1]
+						}
+					}
+					if(this.averageLevel==10||this.averageLevel==uni.upx2px(120)){
+						this.averageText1='1'
+					}else if(this.averageLevel>uni.upx2px(120)&&this.averageLevel<uni.upx2px(240)){
+						this.averageText2='1'
+					}
+					else if(this.averageLevel==uni.upx2px(500)){
+						this.averageText3='余额充足'
+					}
+				}).catch(error => {
+					//uni.hideLoading();
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
 			stateBl(time){
 				var get=newDate(time)
 				var time=new Date()
@@ -312,7 +424,7 @@
 
 					this.personInfo = response.data.tenantInfo;
 					this.userList=response.data.userList
-					
+					this.availableDuration()
 					this.prefetch();
 					this.getContractList()
 					//this.homePage()
@@ -429,6 +541,9 @@
 				width: 400rpx;
 
 				.name {
+					white-space: pre;
+					    overflow: hidden;
+					    text-overflow: ellipsis;
 					color: rgb(16, 16, 16);
 					font-size: 36rpx;
 					font-weight: bold;
@@ -455,17 +570,17 @@
 
 		// 账户余额
 		.content {
-			margin: 48rpx 0rpx;
-			
+			margin: 68rpx 0rpx 24rpx 0rpx;
+			padding-bottom: 40rpx;
 			border-radius: 8px;
 			background: linear-gradient(180deg, rgba(220, 235, 255, 1) 0%, rgba(255, 255, 255, 1) 39%);
 			border: 1px solid rgba(255, 255, 255, 1);
 
 
- .balance{
-	 padding: 32rpx 24rpx;
-	  border-bottom: 1px solid #F4F4F4;
- }
+			 .balance{
+				 padding: 32rpx 24rpx;
+				  border-bottom: 1px solid #F4F4F4;
+			 }
 			.title {
 				display: flex;
 
@@ -494,7 +609,74 @@
 					}
 				}
 			}
+			.triangle-with-dashed-line { 
+				
+			  width: 0;  
+			  height: 0;  
+			  border-left: 6px solid transparent; /* 左侧边框透明 */  
+			  border-right: 6px solid transparent; /* 右侧边框透明 */  
+			  border-top: 10px solid red; /* 上边框为黑色，形成倒三角 */  
+			  position: relative; /* 相对于自身定位 */  
+			 // margin: 2px; /* 外边距，以便更清楚地看到效果 */ 
+			      top: 12rpx;
+			}  
+			  
+			.triangle-with-dashed-line::after {  
+			  content: '';  
+			  position: absolute;  
+			  top: 100%; /* 定位在倒三角的底部 */  
+			  left: 50%; /* 初始左偏移，用于居中 */  
+			  transform: translateX(-50%) translateY(-50%); /* 水平居中，并向上移动50%的自身高度来居中 */  
+			  width: 1px; /* 虚线的宽度 */  
+			  height: 32rpx; /* 虚线的高度，根据需要调整 */  
+			  border-left: 1px dashed #fff; /* 左侧边框为虚线，右侧为透明或不需要设置 */  
+			  margin-top: 16rpx; /* 根据需要调整以优化虚线与倒三角之间的距离 */  
+				margin-left:1px;
+			}  
+			.balance-level{
+				display: flex;
+				margin-top: 16rpx;
+				justify-content: center;
+				    flex-direction: column;
+					    align-items: center;
+					.t{
+						    display: flex;
+							margin-top: 8rpx;
+							font-size: 24rpx;
+							white-space: pre;
+							.t1{
+								    width: 110rpx;
+							}
+							.t2{
+								    width: 120rpx;
+							}
+							.t3{
+								    width: 240rpx;
+							}
+						
+					}
+				.c{
+					content: '';
+					border-radius: 50px;
+					height: 16px;
+					line-height: 16px;
+				
 
+				}
+				.b1{
+					width: 600rpx;
+					background: linear-gradient(90deg, rgba(0,186,120,1) 38%,rgba(0,215,138,1) 100%);
+				}
+				.b2{
+					width: 232rpx;;
+				background: linear-gradient(90deg, rgba(255,148,0,1) 50%,rgba(255,188,0,1) 100%);
+				}
+				.b3{
+					width: 120rpx;
+					background: linear-gradient(90deg, rgba(211,25,0,1) 0%,rgba(230,60,0,1) 100%);
+				}
+				
+			}
 			.balance-number {
 				display: flex;
 				align-items: center;

pages/recharge/accountRecharge.vue

@@ -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 {