PropertyApp/pages/mine/mine.vue

<template>
	<view class="center">
		<view class="logo" >
			<image class="logo-img" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"></image>
			<view class="flex  margin-top-30" style="padding-left: 30rpx;">
				<view class="user-name">{{role}}</view>
				<view @click="logout" style="position: absolute;right: 50rpx;top: 40rpx;">
					<image style="width: 40rpx;height: 40rpx;" src="/static/mine/logout1.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view @click="jump(item.path)" class="menu" v-for="(item,index) in menuList" :key="index">
			<view class="left">
				<u-icon :name="item.name" custom-prefix="custom-icon" size="90" :color="item.color"></u-icon>
				<view class="content">
					<text class="title">{{item.title}}</text>
					<view class="sub_title flex">
						<text class="">本月新增：{{item.monthCount}}</text>
						<view v-if="index==2" class=" padding-left-20">
							待审核：
							<text class="text-red">{{item.applyUserReadyCheckCount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<text class="text-red">{{item.totalCount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				role:'admin',
				menuList:[
					{
						color:'#a1cece',
						title:"小区",
						name:'shequ',
						path:'/pages/residential/residential',
						monthCount:0,
						totalCount:0
					},
					{
						color:'#3dc159',
						title:"单元",
						name:'tesecanyin',
						path:'/pages/unit/unit',
						monthCount:0,
						totalCount:0
					},
					{
						color:'#de9964',
						title:"住户",
						name:'zhuhu',
						path:'/pages/user/user',
						monthCount:0,
						totalCount:0,
						applyUserReadyCheckCount:0
					},
				]
			}
		},
		onLoad() {
			this.role=this.$cache.get('account').account
			this.getResidentialAccount()
			this.getUnitAccount()
			this.getUserAccount()
		},
		methods: {
			getResidentialAccount(){
				this.$api.dataStatistics.getResidentialAccount().then(res=>{
					Object.assign(this.menuList[0],res.data)
				})
			},
			getUnitAccount(){
				this.$api.dataStatistics.getUnitAccount().then(res=>{
					Object.assign(this.menuList[1],res.data)
				})
			},
			getUserAccount(){
				this.$api.dataStatistics.getUserAccount().then(res=>{
					Object.assign(this.menuList[2],res.data)
					this.getApplyUserReadyCheckCount()
				})
			},
			getApplyUserReadyCheckCount(){
				this.$api.dataStatistics.getApplyUserAccountWithCheckState().then(res=>{
					this.menuList[2].applyUserReadyCheckCount=res.data.total
					 console.log(this.menuList[2]);
				})
			},
			logout(){
				this.$showModel('确定要退出系统？').then(res=>{
					uni.clearStorage()
					uni.reLaunch({
						url:"../login/login"
					})
				})
			},
			jump(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	
	.menu{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		
		.left{
			display: flex;
		}
		
		.right{
			display: flex;
			justify-content: center;
			align-items: center;
			
			text{
				font-size: 32rpx;
			}
		}
		
		.content{
			padding-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.title{
				font-size: 32rpx;
			}
			
			.sub_title{
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #777;
			}
		}
	}
	
	.cu-btn.sm {
		padding: 0 20upx;
		font-size: 20upx;
		height: 42upx;
	}
	
	.logo {
		display: flex;
		padding:0rpx 20rpx 40rpx;
		background-color: #7dc7ae;
		
	}
	.logo-img {
		width: 120upx;
		height: 120upx;
		border-radius: 150upx;
	}
	.user-name {
		font-size: 40upx;
		color: #FFFFFF;
	}
</style>