jp-housekeep-hall/pages/mine/mine.vue

<template>
	<view>
		<view class="background">
			<!-- 个人信息   @click="gotoUrl('/pages/mine/personInfos')" -->

			<view class="person-infos">
				<view class="photo">

					<image class="img" src="@/assets/img/默认头像.png" mode=""></image>
				</view>
				<view class="else">
					<view class="name">
						{{regUser.name}}
					</view>
					<view class="company">
						{{personInfo.name}}
					</view>

				</view>
				<u-picker  v-model="changeUserShow" mode="selector" :range="userList"
					 :default-selector="[defaultIndex]" range-key="tenantName" @confirm="selector1confirm" ></u-picker>
					
					<view class="change" @click="changeUserShowBtn" v-if="userList&&userList.length>1">
						切换
					</view>
				<!-- <view class="change">
					切换
				</view> -->
			</view>
			<!-- 账户余额 -->
			<view class="content">
				<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="personInfo.balance<0">已欠费</span>
						</view>
					</view>

					<view class="balance-number">
						<view class="number" :class="{
							number2:personInfo.balance<0
						}" >
							{{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">
					<view class="deadline-item"  v-for="(item,i) in obj.contractItemList" :key="i" v-if="item.paymentMethod==1&&item.name!='电费'" >
						<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 class="function-group">
				<view class="function-item" v-if="false" @click="gotoUrl('/pages/mine/tenantInformation')">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-contacts-book-line.svg" mode=""></image>
					</view>
					<view class="name">
						用户信息
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>
				<view class="function-item" v-if="false">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-pie-chart-line.svg" mode=""></image>
					</view>
					<view class="name">
						用电监控
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

				<view class="function-item" v-if="false">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-book-2-line.svg" mode=""></image>
					</view>
					<view class="name">
						用电常识
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

				<view class="function-item"   v-if="personInfo.allowInvoice"
				
				@click="gotoUrl('/pages/invoiceManagement/invoiceManagement')">
					<view class="icon">
						<image class="img" src="@/assets/img/iconPark-order2.svg" mode=""></image>
					</view>
					<view class="name">
						发票管理
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

				<view class="function-item" @click="gotoUrl('/pages/mine/contactService')">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-customer-service-2-line.svg" mode=""></image>
					</view>
					<view class="name">
						客服热线
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

			</view>

			<view class="function-group" v-if="false">
				<view class="function-item">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-user-settings-line.svg" mode=""></image>
					</view>
					<view class="name">
						个人信息
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

			</view>

			<view class="function-group">
				<view class="function-item" @click="gotoUrl('/pages/mine/setting')">
					<view class="icon">
						<image class="img" src="@/assets/img/riLine-settings-2-line.svg" mode=""></image>
					</view>
					<view class="name">
						设置
					</view>
					<view class="arrow">
						<u-icon name="arrow-right" color="#b2b2b2"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<Tabbar :current="2"  ref="tabbarMain"  :prefetchNum="prefetchNum" ></Tabbar>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_user from '@/apis/pagejs/user.js'
	import * as API_deduction from '@/apis/pagejs/deduction.js'

	import * as API_message from '@/apis/pagejs/message.js'

	import Tabbar from '@/components/Tabbar.vue'
	import {
		newDate
	} from '@/apis/utils'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {

				companyInfo:{},
				regUser:{},
				userList:[],
				changeUserShow:false,
				defaultIndex:0,
				prefetchNum:0,
				personInfo:{
					
				},
				contractList:[],
				averageLevel:10,
				averageColor:"#55bb81",
				averageText1:"",
				averageText2:"",
				averageText3:"",
			}
		},
		onLoad() {
			this.personInfo=this.carhelp.getPersonInfo()
			//this.homePage()
			
			this.userList=this.carhelp.getPersonInfoPlus().userList
			//this.prefetch()

			//this.personalCenter()
			
		},
		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()
				return get<time;
			},
			
			getContractList() {
			
				API_deduction.contractList({
					pageIndex: 1,
					pageSize: 9999
				}).then((response) => {
					uni.hideLoading();
					this.contractList = response.data.data;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			prefetch(){

				API_message.prefetch({

				}).then((response) => {
					this.prefetchNum=response.data
					this.getBillList()
					
				}).catch(error => {
					//uni.hideLoading();
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getBillList(){
				
				API_message.headlineBill().then((response) => {
				
					this.headlineBill=response.data;
					var num=response.data.unReadtNum;
					
					if (this.$refs.tabbarMain) {
						this.$refs.tabbarMain.setprefetchNum(this.prefetchNum+num);
					}
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			query() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API_user.findByOpenId({
					noerror: true,
					openId: this.carhelp.getOpenId(),

				}).then((response) => {
					//this.loginset(response)
					uni.hideLoading();
					var token = response ? response.data.token : '';

					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.tenantInfo);
					this.carhelp.setPersonInfoPlus(response.data)

					this.companyInfo = response.data.companyInfo;
					this.regUser = response.data.regUser;

					this.personInfo = response.data.tenantInfo;
					this.userList=response.data.userList
					this.availableDuration()
					this.prefetch();
					this.getContractList()
					//this.homePage()

				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			changeUserShowBtn() {
				this.defaultIndex = this.userList.findIndex(item => {
					return item.id == this.regUser.id
				})

				this.changeUserShow = true
			},
			selector1confirm(e) {
				var obj = this.userList[e[0]]
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API_user.changeUser({
					id: obj.id,
					openId: this.carhelp.getOpenId()
				}).then((response) => {
					this.query()


					//this.companyInfo=response.data.companyInfo;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			personalCenter() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API_user.personalCenter({

				}).then((response) => {

					uni.hideLoading();
					//this.companyInfo=response.data.companyInfo;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			homePage() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.homePage({

				}).then((response) => {
					uni.hideLoading();
					this.companyInfo = response.data.companyInfo;
					this.regUser = response.data.regUser;

					this.personInfo = response.data.tenantInfo;

				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.background {
		background: linear-gradient(180deg, rgba(194, 219, 255, 1) 53%, rgba(180, 211, 255, 0) 100%);
		padding: 72rpx 32rpx;
		height: 516rpx;

		// 个人信息
		.person-infos {
			display: flex;
			align-items: center;

			.photo {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50px;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.else {
				margin-left: 24rpx;
				width: 400rpx;

				.name {
					white-space: pre;
					    overflow: hidden;
					    text-overflow: ellipsis;
					color: rgb(16, 16, 16);
					font-size: 36rpx;
					font-weight: bold;
				}

				.company {
					color: rgba(16, 16, 16, 1);
				}
			}

			// 切换
			.change {
				border: 1px solid rgba(22, 119, 255, 1);
				min-width: 128rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 50px;
				margin-left: auto;
				color: rgba(22, 119, 255, 1);
				text-align: center;
			}

		}

		// 账户余额
		.content {
			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;
			 }
			.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);
					}
				}
			}
			.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;
				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;
						}
					}
				}
			}
		}



		// 地址
		.address-box {
			border-radius: 8px;
			background: linear-gradient(90deg, rgba(49, 110, 207, 1) 2%, rgba(20, 73, 159, 1) 100%);
			color: #fff;
			padding: 40rpx 32rpx;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			position: relative;

			.address {
				.address-title {
					font-size: 40rpx;
				}

				.address-value {
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}

			// 切换
			.change {
				border: 1px solid rgba(255, 255, 255, 1);
				width: 128rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 50px;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin-left: auto;
				z-index: 99;
			}

			.image {
				width: 174rpx;
				height: 174rpx;
				position: absolute;
				right: 0;
				top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}


	// 功能
	.function-group {
		border-radius: 8px;
		background-color: #fff;
		margin-bottom: 24rpx;

		.function-item {
			display: flex;
			align-items: center;
			padding: 26rpx 26rpx 26rpx 0;
			margin-left: 26rpx;
			border-bottom: 1px solid rgba(221, 221, 221, 1);

			.icon {
				width: 40rpx;
				height: 40rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				color: rgba(51, 51, 51, 1);
				font-size: 30rpx;
				margin-left: 26rpx;
			}

			.arrow {
				margin-left: auto;
			}
		}
	}
</style>