hlt_app/pages/user/index.vue

<template>
	<view class="user">
		<view class="user-top">
			<view class="user-top-title">个人中心</view>
			<view class="user-info">
				<image :src="avatorUrl" mode="aspectFill" class="user-avator" @error="onAvatorError"></image>
				<text class="user-username">{{ userName }}</text>
			</view>
		</view>
		<uni-list>
			<uni-list-item title="设置" thumb="/static/images/user/settings.svg" thumbSize="sm" link
				to="/pages/user/settings/settings"></uni-list-item>
			<uni-list-item title="关于系统" thumb="/static/images/user/info.svg" thumbSize="sm"
				:rightText="versionNumber"></uni-list-item>
		</uni-list>
		<button class="user-logout" @click="logout">退出登录</button>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue';
	import { useUserStore, useAppStore } from '@/store/index.js';
	
	const userStore = useUserStore();
	const appStore = useAppStore()
	const userInfo = userStore.userInfo || uni.getStorageSync('userInfo')
	const version = appStore.sysVersion || uni.getStorageSync('version')
	console.log(userInfo)
	const avatorDefault = '/static/images/user/avator_default.svg'
	const avatorUrl = ref(userInfo.avatar || avatorDefault)
	const userName = ref(userInfo.realName)
	const versionNumber = ref(`v${version}`)
	const onAvatorError= () => {
		console.log(111)
		avatorUrl.value = '/static/images/user/avator_default.svg'
	}
	const logout = ()=>{
		userStore.logoutAction()
	}
</script>

<style lang="scss" scoped>
	.user {
		height: calc(100vh - var(--window-top) - var(--window-bottom));
		position: relative;
		background-color: #efefef;

		&-top {
			height: 400rpx;
			background-image: url('@/static/images/user/user_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: flex-end;

			&-title {
				color: #ffffff;
				font-size: 36rpx;
				position: absolute;
				top: calc(var(--status-bar-height) + 30rpx);
				text-align: center;
				display: block;
				width: 100%;
			}
		}

		&-info {
			margin-bottom: 80rpx;
			padding-left: 40rpx;
			display: flex;
			align-items: center;
		}

		&-avator {
			width: 128rpx;
			height: 128rpx;
			margin-right: 30rpx;
			border-radius: 50%;
		}

		&-username {
			font-family: 思源黑体;
			font-size: 40rpx;
			font-weight: bold;
			color: #ffffff;
		}

		&-logout {
			margin-top: 60rpx;
			border-radius: 0%;
			background-color: #ffffff;
			color: $uni-color-primary;
			font-size: 30rpx;
			font-family: 思源黑体;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&:focus,
			&:active {
				opacity: 0.8;
			}
		}
	}
</style>