zhgdyunapp_vue3/pages/projectEnd/safeSame/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> -->
			<image class="w-avatar-img" v-if="src || type !== 'user'" :src="source" mode="aspectFill"
				: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: $props.size / 42 * 32 + 'rpx'}">
				{{getShortName(name)}}
			</view>
			<uni-icons2 v-if="closeable" class="w-avatar-close" type="clear" :size="$props.size - 15"
				@click="$emit('close')"></uni-icons2>
			<uni-icons2 class="w-avatar-status" :key="status" :type="statusIcon.icon" :color="statusIcon.color"
				:size="upx2px($props.size - 22)"></uni-icons2>
		</view>
		<view class="w-avatar-name over-tip"
			:style="{width: (_sizePx + 0.6) * 32 + 'rpx', fontSize: $props.size / 42 * 32 + 'rpx'}" v-show="showName">
			{{name}}</view>
	</view>

</template>
<script>
	export default {
		props: {
			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
			}
		},
		components: {},
		data() {
			return {
				imageStyles: {
					width: 80,
					height: 80,
					padding: '19rpx'
				},
				originVal: [],
			}
		},
		computed: {
			upx2px(){
			return (px) => {
				return uni.upx2px(px * 2)
			}	
			},
			_sizePx() {
				return this.$props.size / 16
			},
			source() {
				switch (this.$props.type) {
					case 'user':
						return this.$props.src
					case 'dept':
						return '/static/image/dept.png'
					default:
						return null
				}
			},
			statusIcon() {
				switch (this.$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 {}
				}
			}
		},
		onLoad() {

		},
		mounted() {
			
		},
		onShow() {

		},
		methods: {
			getShortName(name) {
				return name.length > 2 ? name.slice(-2) : name
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '@/iconfont.css';
	.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%;
			// width: 40rpx;
			// height: 40rpx;
		}


		.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;
			white-space: nowrap;
			/* 禁止文本换行 */
			overflow: hidden;
			/* 隐藏超出范围的内容 */
			text-overflow: ellipsis;
			/* 使用省略号 */
		}
	}

	.show-y {
		flex-direction: column;

		.w-avatar-name {}
	}
</style>