special/pages/tabbar/mine/mine.vue

<template>
	<view>
		<u-navbar class="u-navbar-box" title="我的" placeholder bgColor="transparent" left-icon-size="0" />
		<view class="top-box">
			<u-image class="bg-box" width="690rpx" height="270rpx" src="/static/mine/user-center-bg.png" />
			<div class="avatar-name">
				<up-avatar size="116rpx" :src="user.avatar" defaultUrl="/static/mine/avatar-def.png"
					bgColor="#305BFF" />
				<!-- <u-image class="avatar" width="116rpx" bgColor="transparent" height="116rpx"
					src="/static/mine/avatar-def.png" /> -->
				<view style="margin-left: 30rpx;">
					<view class="name">{{user.nickName}}</view>
					<view class="roles">{{handleRolesText()}}</view>
				</view>

			</div>
			<div class="abs-right">
				<u-image bgColor="transparent" width="220rpx" height="258rpx" src="/static/mine/user-center-img.png" />
			</div>
		</view>
		<u-cell-group :border="false" :customStyle="{background: '#fff', margin: '30rpx', borderRadius: '20rpx'}">
			<u-cell icon="setting-fill" title="我的申请" isLink url="/pages/subpack/pages/application/list">
				<template #icon>
					<u-image src="/static/mine/task.png" bgColor="transparent" width="36rpx" height="36rpx" />
				</template>
			</u-cell>
			<u-cell icon="integral-fill" title="个人信息" isLink :border="false" url="/pages/subpack/pages/myInfo/info">
				<template #icon>
					<u-image src="/static/mine/myself.png" bgColor="transparent" width="36rpx" height="36rpx" />
				</template>
			</u-cell>
			<u-cell icon="integral-fill" title="用户协议" isLink :border="false" url="/pages/subpack/pages/protocol/list">
				<template #icon>
					<u-image src="/static/mine/myself.png" bgColor="transparent" width="36rpx" height="36rpx" />
				</template>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useStore
	} from 'vuex';
	// 获取 Vuex store 实例
	const store = useStore();
	const user = ref({
		nickName: ' ',
		roles: []
	})

	const roleKV = {
		common: '普通角色',
		admin: '超级管理员',
		village: '乡镇民政所',
		area: '区民政局',
		company: '护理公司',
		nurse: '护理员'
	}
	function handleRolesText() {
		let roles = user.value.roles;
		let roleText = [];
		roles.map(item=>{
			if(roleKV.hasOwnProperty(item)){
				roleText.push(roleKV[item]);
			}
		})
		return roleText.join(',');
	}
	onMounted(() => {
		console.log('store=>', store.state);
		user.value = store.state.vuex_user;
	})
</script>
<style>
	page {
		background-color: #F6F8FD;
	}
</style>
<style lang="scss" scoped>
	:deep(.u-image) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	:deep(.u-navbar__content__title) {
		font-weight: bold;
		font-size: 36rpx;
		color: #222222;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}

	.top-box {
		position: relative;
		margin: 30rpx;

		.avatar-name {
			position: absolute;
			top: 77rpx;
			left: 40rpx;
			display: flex;
			align-items: center;

			.name {
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
			}
			.roles {
				font-size: 28rpx;
				margin-top: 10rpx;
				color: #000000;
			}
		}

		.abs-right {
			position: absolute;
			bottom: 20rpx;
			right: 40rpx;
		}

	}
</style>