boschchina-wechat-crm/components/user-avatar/index.vue

<template>
	<view class="user-avatar" :class="customClass" :style="wrapperStyle">
		<view
			class="avatar-box"
			:style="boxStyle"
		>
			<!-- 图片模式：加载正常 -->
			<image
				v-if="!imgError && src"
				class="avatar-img"
				:src="src"
				:mode="mode"
				@error="onImgError"
			/>
			<!-- 文字模式：加载失败或无图片 -->
			<view v-else class="avatar-text" :style="textStyle">
				<text>{{ displayText }}</text>
			</view>
		</view>
		<!-- 徽章（可选） -->
		<image
			v-if="badgeSrc"
			class="avatar-badge"
			:src="badgeSrc"
			:style="badgeStyle"
		/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'

	const props = defineProps({
		// 头像图片地址
		src: {
			type: String,
			default: ''
		},
		// 用户名称（取第一个字）
		name: {
			type: String,
			default: ''
		},
		// 头像大小（rpx）
		size: {
			type: Number,
			default: 80
		},
		// 字体大小倍数（相对size），默认0.4
		fontRatio: {
			type: Number,
			default: 0.4
		},
		// 背景色
		bgColor: {
			type: String,
			default: '#4080FF'
		},
		// 文字颜色
		textColor: {
			type: String,
			default: '#FFFFFF'
		},
		// 图片裁剪模式
		mode: {
			type: String,
			default: 'aspectFill'
		},
		// 圆角值（默认50%圆形）
		radius: {
			type: String,
			default: '50%'
		},
		// 边框
		border: {
			type: String,
			default: ''
		},
		// 徽章图片
		badgeSrc: {
			type: String,
			default: ''
		},
		// 徽章大小（rpx）
		badgeSize: {
			type: Number,
			default: 0
		},
		// 自定义样式类
		customClass: {
			type: String,
			default: ''
		}
	})

	// 图片是否加载失败
	const imgError = ref(false)

	// 显示的文字（名称第一个字）
	const displayText = computed(() => {
		if (!props.name) return '?'
		// 取第一个字符
		return props.name.charAt(0)
	})

	// 图片加载失败回调
	const onImgError = () => {
		imgError.value = true
	}

	// 外层容器样式
	const wrapperStyle = computed(() => {
		const sizePx = (props.size / 2) + 'px'
		return {
			width: sizePx,
			height: sizePx
		}
	})

	// 头像盒子样式
	const boxStyle = computed(() => {
		const sizePx = (props.size / 2) + 'px'
		const style = {
			width: sizePx,
			height: sizePx,
			borderRadius: props.radius
		}
		if (props.border) {
			style.border = props.border
		}
		return style
	})

	// 文字样式
	const textStyle = computed(() => {
		const fontSize = (props.size * props.fontRatio / 2) + 'px'
		return {
			fontSize: fontSize,
			backgroundColor: props.bgColor,
			color: props.textColor
		}
	})

	// 徽章样式
	const badgeStyle = computed(() => {
		if (!props.badgeSize) return {}
		const sizePx = (props.badgeSize / 2) + 'px'
		return {
			width: sizePx,
			height: sizePx
		}
	})
</script>

<style scoped>
	.user-avatar {
		position: relative;
		flex-shrink: 0;
	}

	.avatar-box {
		overflow: hidden;
		width: 100%;
		height: 100%;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		display: block;
	}

	.avatar-text {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
	}

	.avatar-badge {
		position: absolute;
		bottom: 0;
		right: 0;
		transform: translate(20%, 20%);
		z-index: 1;
	}
</style>