hospital-inspect/pages/myCenter/index.vue

<template>
	<view class="content">
		<view class="banner">
			<view class="avatar">
				<image :src="userAvatar" mode="widthFix" @error="userAvatar=defaultAvatar"></image>
			</view>
			<view class="bottom">
				<view class="name">
					<text>{{userName}}</text>
				</view>			
			</view>
		</view>
		<view class="zhcx-table">
				<uni-list>
					<uni-list-item title="个人资料"
						link="navigateTo" to="/pages/myCenter/personalData/personalData"
						showArrow></uni-list-item>
					<uni-list-item title="修改密码"
						link="navigateTo" to="/pages/myCenter/updatePassword/updatePassword"
						showArrow></uni-list-item>
					<uni-list-item title="退出登录" @click="logout" clickable></uni-list-item>
				</uni-list>	
		</view>		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				defaultAvatar:"/static/components/avatar.png",
				userAvatar:"",
				userName:""
			}
		},
		onShow() {
			this.init();
		},
		methods:{
			init(){
				let user=uni.getStorageSync('accountInfo');
				if(user){user=JSON.parse(user)}
				this.userAvatar=user.avatar||this.defaultAvatar;
				this.userName=user.name;				
			},
			logout(){
				uni.showModal({
					title:'提示！',
					content:"是否要退出登录",
					success(res) {
						if (res.confirm) {
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}					
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.banner{
			height: 327upx;
			background-color: var(--sysblue);
			padding-top:46upx;
			.avatar{
				width: 150upx;
				height: 150upx;
				border-radius: 50%;
				overflow: hidden;
				image{
					display: block;
					width: 150upx;
					height: 150upx;
					border-radius: 50%;
				}
				margin:0 auto;
			}
			.bottom{
				position: relative;
				.name{
					font-size: 40upx;
					text-align: center;
					color: #fff;
					padding-top: 15upx;
				}
				.edit{
					position: absolute;
					right:48upx;
					bottom: 0;
					.zhcx-iconfont{
						font-size: 50upx;
						color: #fff;						
					}
				}				
			}
		}
	}
</style>