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}}元
						</view>
						<view class="recharge"  @click="gotoUrl('/pages/recharge/accountRecharge')" >
							充值
						</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" >
						<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'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {

				companyInfo:{},
				regUser:{},
				userList:[],
				changeUserShow:false,
				defaultIndex:0,
				prefetchNum:0,
				personInfo:{
					
				},
				contractList:[]
			}
		},
		onLoad() {
			this.personInfo=this.carhelp.getPersonInfo()
			//this.homePage()
			
			this.userList=this.carhelp.getPersonInfoPlus().userList
			//this.prefetch()

			//this.personalCenter()
			
		},
		onShow() {
			this.query()
		},
		methods: {
			stateBl(time){
				var get=new Date(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.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 {
					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);
				width: 128rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 50px;
				margin-left: auto;
				color: rgba(22, 119, 255, 1);
				text-align: center;
			}

		}

		// 账户余额
		.content {
			margin: 48rpx 0rpx;
			
			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);
					}
				}
			}

			.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>