mobile-workflow/components/Avatar.vue

<template>
	<view :class="{'w-avatar': true, 'show-y': showY}">
		<view class="w-avatar-it" :style="{height: _sizePx * 32 + 'rpx'}">
			<image class="w-avatar-img" v-if="src || type !== 'user'" :src="source" mode="aspectFit" :style="{width: _sizePx * 32 + 'rpx', height: _sizePx * 32 + 'rpx'}"></image>
			<view v-else class="w-avatar-t" :style="{width: _sizePx * 32 + 'rpx', height: _sizePx * 32 + 'rpx', fontSize: size / 42 * 32 + 'rpx'}">
				{{getShortName(name)}}
			</view>
			<uni-icons v-if="closeable" class="w-avatar-close" type="clear" :size="size - 15" @click="emits('close')"></uni-icons>			
			<uni-icons class="w-avatar-status" :key="status" :type="statusIcon.icon" :color="statusIcon.color" :size="size - 22"></uni-icons>
		</view>
		<view class="w-avatar-name over-tip" :style="{width: (_sizePx + 0.6) * 32 + 'rpx', fontSize: size / 42 * 32 + 'rpx'}" v-show="showName">{{name}}</view>
	</view>
	
</template>

<script setup>
import { computed } from 'vue';
	const props = defineProps({
		type: {
			type: String,
			default: 'user'
		},
		name: {
			type: String,
			default: '未知'
		},
		size: {
			type: Number,
			default: 40
		},
		src: {
			type: String,
			default: undefined
		},
		bgc: {
			type: String,
			default: '#1989fa'
		},
		square: {
			type: Boolean,
			default: false
		},
		showY: {
			type: Boolean,
			default: false
		},
		showName: {
			type: Boolean,
			default: true
		},
		closeable: {
			type: Boolean,
			default: false
		},
		status: {
			type: String
		}
	})
	
	const emits = defineEmits(['close'])
	
	const _sizePx = computed(() => {
		return props.size / 16
	})
	
	const source = computed(() => {
		switch(props.type) {
			case 'user': return props.src
			case 'dept': return '/static/image/dept.png'
			default: return null
		}
	})
	
	const statusIcon = computed(() => {
		switch (props.status){
			case 'error': return {icon: 'clear', color: '#ce4345'};
			case 'pending': return {icon: 'smallcircle', color: '#E79467'};
			case 'success': return {icon: 'checkbox-filled', color: '#5FB685'};
			case 'cc': return {icon: 'paperplane-filled', color: '#4C87F3'};
			case 'comment': return {icon: 'chat-filled', color: '#4478F7'};
			case 'transfer': return {icon: 'redo-filled', color: '#ce4345'};
			case 'cancel': return {icon: 'close', color: '#CDCDCD'};
			case 'recall': return {icon: 'undo-filled', color: '#ce4345'};
			case 'leader': return {icon: 'person-filled', color: '#E79467'};
			case 'waiting': return {icon: 'spinner-cycle', color: '#626D80'}
			default: return {}
		}
	})
	
	function getShortName(name){
		return name.length > 2 ? name.slice(-2) : name
	}

	
</script>

<style lang="less" scoped>
 .w-avatar {
	 display: inline-flex;
	 align-items: center;
	 .w-avatar-it {
		 background-color: white;
		 position: relative;
		 border-radius: 50%;
	 }
	 
	 .w-avatar-img {
		 border-radius: 50%;
		 border: 1px solid #f0f0f0;
	 }
	 
	 .w-avatar-close {
		 position: absolute;
		 top: -10rpx;
		 right: -8rpx;
		// background-color: white;
		 border-radius: 50%;
	 }
	 
	  .w-avatar-status{
		 position: absolute;
		 bottom: -8rpx;
		 right: -13rpx;
		 background-color: white;
		 border-radius: 50%;
	 }
	 
	 
	 .w-avatar-t {
		 background-color: #4C87F3;
		 border-radius: 50%;
		 color: white;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	 } 
	 
	 .w-avatar-name {
		 text-align: center;
		 margin-left: 6rpx;
	 }
 }
 
 .show-y {
	 flex-direction: column;
	 .w-avatar-name {
	 	
	 }
 }
</style>