realty/virgo.wzfrontend/yui_wx/components/common/avatar.vue

<template>
	<view class="hui-avatar">
		<image v-if="user.portrait" class="avatar-image" :src="user.portrait" mode="aspectFill"></image>
		<view class="avatar-image" v-else>
			<view :style="'font-size:'+size+'rpx;line-height:'+lineHeight+'rpx'">{{name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'avatar',
		props: {
			user: {
				type: Object,
				default: () => {
					return {
						name: ''
					}
				}
			},
			size: {
				type: Number,
				default: 28
			}
		},
		data() {
			return {
				lineHeight: 30
			}
		},
		computed: {
			name() {
				if (!this.user.name) return '';
				let name = this.user.name.substring(0, 1);
				let strCode = name.charCodeAt();
				if (strCode >= 97 && strCode <= 122) {
					this.lineHeight = this.size + 2
				} else {
					this.lineHeight = this.size;
				}
				return name
			}
		},
	}
</script>

<style lang="scss">
	.hui-avatar {
		width: 100%;
		height: 100%;

		.avatar-image {
			width: 100%;
			height: 100%;
			display: block;
			background: $uni-primary;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;
		}
	}
</style>