mobile-workflow/components/UserCard.vue

<template>
	<uni-popup ref="userCardPopup" type="center">
		<view class="w-user-card">
			<avatar class="w-avatar" :src="getRes(userDetail.avatar)" :name="userDetail.username" :size="55" :showName="false"></avatar>
			<view>
				<text style="margin-right: 10px;">{{userDetail.username}}</text>
				<uni-tag type="warning" size="mini" :text="role" inverted v-for="(role, i) in (userDetail.roles || [])"
					:key="`r${i}`"></uni-tag>
			</view>
			<uni-icons class="w-xicon" type="closeempty" color="#A2A2A2" :size="20" @click="hide"></uni-icons>
			<uni-list class="w-user-info">
				<uni-list-item title="所属部门" :rightText="userDept" show-extra-icon :extra-icon="{type: 'home'}" />
				<uni-list-item title="入职时间" :rightText="userDetail.entryDate" show-extra-icon
					:extra-icon="{type: 'calendar'}" />
				<uni-list-item title="性别" :rightText="userDetail.sex ? '男':'女'" show-extra-icon
					:extra-icon="{type: 'staff'}" />
				<uni-list-item title="电话" @click="call('18866668888')" show-extra-icon rightText="18866668888" clickable
					show-arrow :extra-icon="{type: 'phone'}" />
			</uni-list>
		</view>

	</uni-popup>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { getUserDetail } from '@/api/org.js'
	import { getRes } from '@/utils/tool.js'
	import Avatar from '@/components/Avatar.vue'

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

	function show(userId) {
		getUserDetail(userId).then(rsp => {
			userDetail.value = rsp.data
			userCardPopup.value.open('center')
		})
	}

	function hide() {
		userCardPopup.value.close()
	}

	function call(mobile) {
		uni.makePhoneCall({
			phoneNumber: mobile
		});
	}

	defineExpose({ show, hide })
</script>

<style lang="less" scoped>
	.w-user-card {
		background-color: white;
		border-radius: 8px;
		padding: 32rpx;
		position: relative;

		.w-avatar {
			border-radius: 50%;
			//box-shadow: 0 0 6px 0px #c8c8c8;
			position: absolute;
			padding: 7px;
			background-color: white;
			top: -21px;
			left: 0px;
		}

		&>view:nth-child(2) {
			margin-left: 70px;
			/* #ifdef MP-WEIXIN */
			margin-bottom: 20px;
			/* #endif */
		}

		&>view:nth-child(2):first-child {
			margin-right: 10px;
		}

		.w-xicon {
			background-color: white;
			border-radius: 50%;
			position: absolute;
			right: -5px;
			top: -8px;
			padding: 2px;
		}

		.w-user-info {
			margin-top: 30px;
			width: 70vw;

			.uni-list-item__container {
				padding: 12px 0;
			}
		}
	}
</style>