hptwxMiniProgram/pages/myCenter/myCenter.vue

<template>
	<view class="profile">
		<view class="banner">
			<image :src="user.userAvatar" class="avatar" @error="avatarError"></image>
			 <view class="user-info">
				<view class="name">
					<text>{{user.userName}}</text>
					<text v-if="user.positionName">({{user.positionName}})</text>
				</view>	
				<view>{{user.userPhone}}</view>
			 </view>
		</view>
		<view class="statistics">
			<view class="card task" @click="linkTo('task')">
				<view class="name">代办任务</view>
				<view class="number">10</view>					
			</view>
			<view class="card danger" @click="linkTo('danger')">
				<view class="name">代处理隐患</view>
				<view class="number">8</view>					
			</view>
		</view>
		<div class="hand-list">
			<view class="hand-item">
				<view class="hand-lf"  @click="linkTo(1)">
					<image class="icon" src="/static/center/location.png"></image>
					<view class="name">操作记录</view>
				</view>
				<view class="hand-rt"></view>
			</view>
			<view class="hand-item">
				<view class="hand-lf"  @click="linkTo(2)">
					<image class="icon" src="/static/center/user-group.png"></image>
					<view class="name">个人信息</view>
				</view>
				<view class="hand-rt"></view>
			</view>
			<view class="hand-item" @click="linkTo(3)">
				<view class="hand-lf">
					<image class="icon" src="/static/center/unlock.png"></image>
					<view class="name">关于</view>
				</view>
				<view class="hand-rt"></view>
			</view>
		</div>
		<button type="primary" @click="logoutSubmit" class="submit-BT">退出登录</button>
	</view>
</template>

<script>
	import {logout} from '@/api/system/user.js'
	import defAvatar from '@/static/avatar.png'
	export default {
		data() {
			return {
				defAvatar,
				user:{
					userAvatar:"",
					userName:"",
					userIntro:"",
					userPhone:""
				},
				phone:""
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
		  init(){
			this.initUser()  
		  },
		  initUser(){
			  let userInfo=uni.getStorageSync('accountInfo')
			  if(userInfo){this.user=userInfo}
		  },
		  linkTo(index){
			  if(index===1){uni.switchTab({url:'/pages/history/history'})}
			  if(index===2){uni.navigateTo({url:'/pages/myCenter/profile/profile'})}
			  if(index===3){uni.navigateTo({url:'/pages/service_agreement/service_agreement'})}
			  if(index==='task'){
				uni.navigateTo({url:'/pages/task/task'})
			  }
			  if(index==='danger'){
				uni.navigateTo({url:'/pages/danger/danger'})
			  }			  
		  },
		  logoutSubmit(){
			  uni.clearStorageSync();
			  logout().then(()=>{
				  uni.navigateTo({
				  	url:'/pages/login/index'
				  })
			  })
		  },
		  avatarError(){
			  this.user.userAvatar=this.defAvatar
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.profile{
		.banner{
			height: 236rpx;
			padding-left:30rpx;
			display: flex;
			align-items: center;
			.avatar{
				display: block;
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
			}		
		    .user-info{
				padding-left: 30rpx;
				.name{
					color: #35364F;
					font-size: 38rpx;
					font-weight: 700;
					line-height: 54rpx;
				}
				.phone{
					color: #35364F;
					font-size: 28rpx;
					line-height: 44rpx;
				}
			}
		}
		.statistics{
			display: flex;
			justify-content: space-between;
			padding: 32rpx;
			.card{
				width: 328rpx;
				height: 168rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				background-position: bottom right;
				background-repeat: no-repeat;
				background-size: 102rpx 102rpx;
				border-radius: 16rpx;
				&.task{
					background-color: #FFFDED;
					margin-right: 15rpx;
					background-image: url('/static/center/task.png');
				}
				&.danger{
					background-color: #F4F5FE;
					margin-left: 15rpx;
					background-image: url('/static/center/danger.png');
				}
				.name{
					font-size: 28rpx;
					line-height: 48rpx;
					color: #35364F;
				}
				.number{
					font-size: 40rpx;
					line-height: 48rpx;
					color: #35364F;	
					font-weight: 700;
				}
			}
		}
		.hand-list{
			margin-top: 24rpx;	
			padding: 0 24rpx;
			.hand-item{
				height: 120rpx;
				display: flex;
				align-items: center;
				background-image: url('/static/arrow.png');
				background-position:center right 36rpx;
				background-repeat: no-repeat;
				background-size: 44rpx 44rpx;
				.hand-lf{
					flex: 1;
					display: flex;
					align-items: center;
					.icon{
						display: block;
						width: 48rpx;
						height: 48rpx;
					}
					.name{
						font-size: 32rpx;
						line-height: 48rpx;
						padding-left: 8rpx;
						color: #35364F;
					}
				}
			}
		}
		.submit-BT {
			width: 600rpx;
			height: 72rpx;
			line-height: 72rpx;
			box-sizing: border-box;
			border-radius: 16upx;
			margin-top: 50upx;
			background-color:#3384FF;
			font-size: 32rpx;
		}
	}
</style>