mobile-workflow/pages/my/my.vue

<template>
	<view class="w-user-info">
		<avatar :name="userDetail.username" :src="userDetail.avatar" :size="70" :showName="false"></avatar>
		<view class="w-user-name">{{userDetail.username}}</view>
		<uni-tag class="w-user-role" type="warning" size="mini" :text="role" inverted v-for="(role, i) in (userDetail.roles || [])"
			:key="`r${i}`"></uni-tag>
	</view>
	<uni-list class="w-user-items">
		<uni-list-item thumb="/static/image/dept.png" clickable>
			<template v-slot:body>
				<text class="w-items-t">所属部门</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userDept}}</text>
			</template>
		</uni-list-item>
		<uni-list-item thumb="/static/image/entry.png" clickable>
			<template v-slot:body>
				<text class="w-items-t">入职时间</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userDetail.entryDate}}</text>
			</template>
		</uni-list-item>
		<!-- #ifdef APP-VUE -->
		<uni-list-item thumb="/static/image/download.png" clickable showArrow>
			<template v-slot:body>
				<text class="w-items-t">已下载的附件</text>
			</template>	
		</uni-list-item>
		<!-- #endif -->
		<uni-list-item thumb="/static/image/agent.png" clickable showArrow @click="editAgent">
			<template v-slot:body>
				<text class="w-items-t">设置代理人</text>
			</template>
			<template v-slot:footer>
				<text class="w-items-f">{{userAgentText}}</text>
			</template>
		</uni-list-item>
	</uni-list>
	<button class="w-user-logout" @click="logout" plain="true" type="warn">退出/切换 账号</button>
</template>

<script setup>
	import Avatar from '@/components/Avatar.vue'
	import { getUserDetail } from '@/api/org.js'
	import { onShow } from "@dcloudio/uni-app";
	import { computed, onBeforeMount, ref } from "vue";

	const userDetail = ref({})

	//当前登录的用户
	const loginUser = JSON.parse(uni.getStorageSync('loginUser'))

	const userDept = computed(() => {
		return (userDetail.value.depts || []).length === 0 ? '未设置部门' : userDetail.value.depts.join('、')
	})

	const userAgentText = computed(() => {
		const agent = userDetail.value.userAgent
		if (!agent) {
			return '未设置'
		} else {
			return `（${agent.user.name}）${agent.effective ? '代理中':'代理未生效'}`
		}
	})
	
	onShow(() => {
		getUserDept()
	})

	function getUserDept() {
		getUserDetail(loginUser.userId).then(rsp => {
			userDetail.value = rsp.data
		}).catch(err => {
			
		})
	}

	function logout() {
		uni.clearStorage()
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}

	function editAgent() {
		uni.navigateTo({
			url: '/pages/my/UserAgent'
		})
	}
</script>

<style lang="less" scoped>
	.w-user-info {
		font-size: 32rpx;
		padding: 64rpx 0 6rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		
		.uni-tag {
			font-weight: 400;
		}
		

		.w-user-name {
			font-size: 35rpx;
			margin: 10rpx 0;
		}

		.w-user-role {
			margin: 16rpx 0;
		}
	}

	.w-user-logout {
		width: 90%;
		margin-top: 48rpx;
		font-size: 30rpx;
	}

	.w-user-items {
		margin-top: 16rpx;
	}

	.w-items-t {
		padding: 16rpx 0;
		font-size: 32rpx;
		display: flex;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.w-items-f {
		font-size: 29rpx;
		color: #797171;
		display: flex;
		align-items: center;
	}
</style>