jp-floorlock-phone/subpackage/uview-ui/components/u-avatar/u-avatar.vue

<template>
	<view class="u-avatar" :style="[wrapStyle]" @tap="click">
		<image 
			@error="loadError"
			:style="[imgStyle]"
			class="u-avatar__img"
			v-if="!uText && avatar"
			:src="avatar" 
			:mode="imgMode"
		></image>
		<image
			@error="loadError"
			:style="[imgStyle]"
			class="u-avatar__img"
			v-else-if="gender==1"
			
			:src="man" 
			:mode="imgMode"
		></image>
		<image
			@error="loadError"
			:style="[imgStyle]"
			class="u-avatar__img"
			v-else-if="gender==0"
			
			:src="woman" 
			:mode="imgMode"
		></image>
		<text class="u-line-1" v-else-if="uText" :style="{
			fontSize: '38rpx'
		}">{{uText}}</text>
		<slot v-else></slot>
		<view class="u-avatar__sex" v-if="showSex" :class="['u-avatar__sex--' + sexIcon]" :style="[uSexStyle]">
			<u-icon :name="sexIcon" size="20"></u-icon>
		</view>
		<view class="u-avatar__level" v-if="showLevel" :style="[uLevelStyle]">
			<u-icon :name="levelIcon" size="20"></u-icon>
		</view>
	</view>
</template>

<script>
	
	var woman= "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjkxMDUzMTUwNzEyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1MTAxIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiPjxwYXRoIGQ9Ik01MTIgNTEybS01MDMuNjAzMiAwYTUwMy42MDMyIDUwMy42MDMyIDAgMSAwIDEwMDcuMjA2NCAwIDUwMy42MDMyIDUwMy42MDMyIDAgMSAwLTEwMDcuMjA2NCAwWiIgZmlsbD0iI0Y4REZERSIgcC1pZD0iMTUxMDIiPjwvcGF0aD48cGF0aCBkPSJNMjk2LjE4MTc2IDU4OC44NTEyYzUuNTM0NzIgMjAuNDQ5MjggMTEuOTI0NDggMzYuNjI4NDggMTguNzQ0MzIgNDguOTg4MTYgOC4wOTQ3MiAxNC40ODk2IDE3LjAzOTM2IDI0LjcwOTEyIDI3LjI1ODg4IDMxLjUyODk2bDcyLjg1MjQ4IDExLjA3OTY4YzAuODU1MDQgNy42Njk3NiAwLjg1NTA0IDE0LjQ3OTM2IDAgMjAuODY5MTItMC40MjQ5NiA2LjM4OTc2LTIuNTU0ODggMTIuNzc5NTItNS45NjQ4IDE4LjczOTItMi41NTQ4OCA1LjUzOTg0LTcuMjM5NjggMTEuNTA5NzYtMTMuMjA0NDggMTguMzI5Ni01Ljk2NDggNS41Mjk2LTE0LjQ4NDQ4IDExLjQ5OTUyLTI1LjEzNDA4IDE4LjMxOTM2YTE2My40NjExMiAxNjMuNDYxMTIgMCAwIDEtNTEuMTIzMiAyMi4xNDkxMmMtMTkuMTc0NCA0LjY3OTY4LTM3LjkxMzYgMTAuMjE5NTItNTYuMjMyOTYgMTcuMDM5MzYtOS43OTk2OCAyLjU2LTE4LjMxOTM2IDYuMzc5NTItMjUuOTg5MTIgMTAuNjQ5Ni03LjY2NDY0IDQuMjU5ODQtMTUuMzM0NCA4Ljk0OTc2LTIyLjU3OTIgMTQuNDc5MzYtMTMuMjA5NiAxMS4wNzk2OC0yMS43MTkwNCAyNi44MzkwNC0yNS4xMjg5NiA0Ny43MTg0YTQ3NC43MTYxNiA0NzQuNzE2MTYgMCAwIDAtMy41MDcyIDI4LjY2MTc2Yzg3LjU5Mjk2IDczLjczODI0IDIwMC42NTc5MiAxMTguMjAwMzIgMzI0LjEyNjcyIDExOC4yMDAzMiAxMzUuMzQyMDggMCAyNTguMTkxMzYtNTMuNDAxNiAzNDguNjgyMjQtMTQwLjI2MjQtMS4yMzkwNC04LjY5ODg4LTIuODU2OTYtMTYuMzIyNTYtNC43MDUyOC0yMi43OTkzNi00LjY4NDgtMTQuODk5Mi0xMy4xOTkzNi0yNy4yNDg2NC0yNS4xMzQwOC0zNS43Nzg1Ni0xMS45MjQ0OC04LjUwOTQ0LTI1Ljk4NC0xNi4xODk0NC00MS4zMTg0LTIyLjE0OTEyLTguMDk0NzItMi45Nzk4NC0xNi4xODk0NC01LjEwOTc2LTI0LjI4NDE2LTcuMjM5NjhsLTI0LjI4NDE2LTguMDk5ODRhMjE4LjkwMDQ4IDIxOC45MDA0OCAwIDAgMS0yMy44NTkyLTYuMzc5NTIgNjY5LjYwMzg0IDY2OS42MDM4NCAwIDAgMS0yMS43MTkwNC03LjY2OTc2Yy0yNy4yNjkxMi0xMS41MDk3Ni00NC43MzM0NC0yNC43MDkxMi01Mi44MjgxNi0zOS42Mjg4LTMuODI5NzYtNy4yMzk2OC02LjgxOTg0LTE0LjkwOTQ0LTguNTE5NjgtMjIuNTc5Mi0xLjcwNDk2LTcuNjU5NTItMi41NTQ4OC0xNS4zMjkyOC0xLjcwNDk2LTIyLjU2ODk2bDgzLjkyNzA0LTEzLjIxOTg0IiBmaWxsPSIjRkZGRkZGIiBwLWlkPSIxNTEwMyI+PC9wYXRoPjxwYXRoIGQ9Ik02MzkuMzA4OCA2NzQuMjIyMDhzNTYuNjM3NDQgNy43OTc3NiAxMDYuNzU3MTItMC42ODA5NmM1MC4xMTk2OC04LjQ4ODk2IDUyLjY4OTkyLTE5LjUzNzkyIDUyLjY4OTkyLTE5LjUzNzkycy00Mi45MjA5Ni04Mi42ODgtNDYuODY4NDgtMTk4LjQyMDQ4Yy0zLjk0NzUyLTExNS44MzQ4OC0zNy4wOTk1Mi0xODguMDUyNDgtMTI2Ljg3ODcyLTIzNS41MTQ4OC04OS43ODk0NC00Ny40NjI0LTE3Ny4wMDg2NCAxMC43NTcxMi0xNzcuMDA4NjQgMTAuNzU3MTJzLTU0LjI3Mi0xLjE5Mjk2LTk5LjU1ODQgNTguODk1MzZjLTQ3Ljg1MTUyIDYzLjQ0MTkyLTU1Ljk0NjI0IDIyNy43MTcxMi01NS45NDYyNCAyMjcuNzE3MTJzMi41NzAyNCA5Ny41ODIwOC00OS40Mjg0OCAxNDMuODYxNzZjLTM1LjEyMzIgMjYuNjM5MzYgMTcxLjc4MTEyIDE3LjU2MTYgMTcxLjc4MTEyIDE3LjU2MTZtMTEzLjY1ODg4IDIwLjEyNjcyIiBmaWxsPSIjRkZGRkZGIiBwLWlkPSIxNTEwNCI+PC9wYXRoPjwvc3ZnPg=="
	
	var man= "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjkxMDUzMTcwNjExIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2Mjc4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiPjxwYXRoIGQ9Ik0xMDIzLjk5MzY4NSA1MTIuMDAyNDc1QTUxMS45OTY4NDMgNTExLjk5Njg0MyAwIDEgMSA1MTEuOTk2ODQzIDAuMDA1NjMyYTUwOS42MDc1MjQgNTA5LjYwNzUyNCAwIDAgMSA1MTEuOTk2ODQyIDUxMS45OTY4NDN6IiBmaWxsPSIjRUNGMUZCIiBwLWlkPSIxNjI3OSI+PC9wYXRoPjxwYXRoIGQ9Ik02MzguNDQyOTk2IDYwMy42MzI4NDNsMzEuOTk5ODAzIDYuOTI5MDI0YzEuNzA2NjU2LTM0LjU5MzkyIDMyLjk1NTUzLTIzLjUwMDY1NSAzMy45MTEyNTctNzIuODQwMDg0YTMyLjE3MDQ2OCAzMi4xNzA0NjggMCAwIDAtMzIuMTg3NTM0LTMyLjE3MDQ2OWgtMTYuNTcxNjMyeiIgZmlsbD0iI0NCRDRFNiIgcC1pZD0iMTYyODAiPjwvcGF0aD48cGF0aCBkPSJNMzgzLjk5NzYzMiA2MDMuNjMyODQzbC0zMS45ODI3MzYgNi45MjkwMjRjLTEuNzA2NjU2LTM0LjU5MzkyLTMyLjk1NTUzLTIzLjUwMDY1NS0zMy45MjgzMjQtNzIuODQwMDg0YTMyLjE3MDQ2OCAzMi4xNzA0NjggMCAwIDEgMzIuMTg3NTM1LTMyLjE3MDQ2OWgxNi41NzE2MzF6IiBmaWxsPSIjQ0JENEU2IiBwLWlkPSIxNjI4MSI+PC9wYXRoPjxwYXRoIGQ9Ik04NjQuNjQzMjAxIDg4NC4yMjQxNzlhNTExLjAyNDA0OSA1MTEuMDI0MDQ5IDAgMCAxLTcwMS40MzU2NzQgMC44NTMzMjggMTU1LjQwODEwOCAxNTUuNDA4MTA4IDAgMCAxIDEwNi44MzY2NzQtODcuMzgwNzk0bDEyMy4yMjA1NzQtMjguNTAxMTU4YTE5Ljc0NjAxMiAxOS43NDYwMTIgMCAwIDAgMTkuNjI2NTQ2LTE5LjYyNjU0NXYtNDMuMzQ5MDY2aDIwMi40MDk0MTh2NDMuMzQ5MDY2YTE5Ljc4MDE0NSAxOS43ODAxNDUgMCAwIDAgMTkuNzk3MjExIDE5LjYyNjU0NWwxMjMuMDQ5OTA4IDI4LjUwMTE1OGExNTYuMDU2NjM4IDE1Ni4wNTY2MzggMCAwIDEgMTA2LjQ5NTM0MyA4Ni41Mjc0NjZ6IiBmaWxsPSIjQ0JENEU2IiBwLWlkPSIxNjI4MiI+PC9wYXRoPjxwYXRoIGQ9Ik01MDguNTgzNTMgNzQ1LjE0ODc3YTE2My4zNDQwNTkgMTYzLjM0NDA1OSAwIDAgMS0xNjAuNDI1Njc3LTEzMi4yMTQ2NTFsLTI4LjU2OTQyNC0xNDcuMTY0OTU5YTE5MS41MzgwMTkgMTkxLjUzODAxOSAwIDAgMSAxOTQuNDA1MjAxLTIxMS4xODE2MzEgMTkxLjUyMDk1MiAxOTEuNTIwOTUyIDAgMCAxIDE5NC4zODgxMzUgMjExLjE4MTYzMWwtNDIuMDAwODA4IDE1OC4wMDIyMjVhMTYzLjM0NDA1OSAxNjMuMzQ0MDU5IDAgMCAxLTE1Ny43OTc0MjcgMTIxLjM3NzM4NXoiIGZpbGw9IiNDQkQ0RTYiIHAtaWQ9IjE2MjgzIj48L3BhdGg+PC9zdmc+"
	var base64Avatar ="";
	/**
	 * avatar 头像
	 * @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
	 * @tutorial https://www.uviewui.com/components/avatar.html
	 * @property {String} bg-color 背景颜色，一般显示文字时用（默认#ffffff）
	 * @property {String} src 头像路径，如加载失败，将会显示默认头像
	 * @property {String Number} size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值，单位rpx（默认default）
	 * @property {String} mode 显示类型，见上方说明（默认circle）
	 * @property {String} sex-icon 性别图标，man-男，woman-女（默认man）
	 * @property {String} level-icon 等级图标（默认level）
	 * @property {String} sex-bg-color 性别图标背景颜色
	 * @property {String} level-bg-color 等级图标背景颜色
	 * @property {String} show-sex 是否显示性别图标（默认false）
	 * @property {String} show-level 是否显示等级图标（默认false）
	 * @property {String} img-mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值（默认aspectFill）
	 * @property {String} index 用户传递的标识符值，如果是列表循环，可穿v-for的index值
	 * @event {Function} click 头像被点击
	 * @example <u-avatar :src="src"></u-avatar>
	 */
	export default {
		name: 'u-avatar',
		props: {
			gender: {
				type: String,
				default: '1'
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: 'transparent'
			},
			// 头像路径
			src: {
				type: String,
				default: ''
			},
			// 尺寸，large-大，default-中等，mini-小，如果为数值，则单位为rpx
			// 宽度等于高度
			size: {
				type: [String, Number],
				default: 'default'
			},
			// 头像模型，square-带圆角方形，circle-圆形
			mode: {
				type: String,
				default: 'circle'
			},
			// 文字内容
			text: {
				type: String,
				default: ''
			},
			// 图片的裁剪模型
			imgMode: {
				type: String,
				default: 'aspectFill'
			},
			// 标识符
			index: {
				type: [String, Number],
				default: ''
			},
			// 右上角性别角标，man-男，woman-女
			sexIcon: {
				type: String,
				default: 'man'
			},
			// 右下角的等级图标
			levelIcon: {
				type: String,
				default: 'level'
			},
			// 右下角等级图标背景颜色
			levelBgColor: {
				type: String,
				default: ''
			},
			// 右上角性别图标的背景颜色
			sexBgColor: {
				type: String,
				default: ''
			},
			// 是否显示性别图标
			showSex: {
				type: Boolean,
				default: false
			},
			// 是否显示等级图标
			showLevel: {
				type: Boolean,
				default: false
			},
			
		},
		data() {
			return {
				man:man,
				woman:woman,
				error: false,
				// 头像的地址，因为如果加载错误，需要赋值为默认图片，props值无法修改，所以需要一个中间值
                avatar: this.src ? this.src : base64Avatar, 
			}
		},
        watch: {
            src(n) {
                // 用户可能会在头像加载失败时，再次修改头像值，所以需要重新赋值
				if(n=='noshow'){
					this.error = false;
				}else if(!n) {
					// 如果传入null或者''，或者undefined，显示默认头像
					this.avatar = base64Avatar;
					this.error = true;
				} else {
					this.avatar = n;
					this.error = false;
				}
            }
        },
		computed: {
			wrapStyle() {
				let style = {};  
				style.height = this.size == 'large' ? '120rpx' : this.size == 'default' ?
				'90rpx' : this.size == 'mini' ? '70rpx' : this.size + 'rpx';
				style.width = style.height;
				style.flex = `0 0 ${style.height}`;
				style.backgroundColor = this.bgColor;
				style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
				if(this.text) style.padding = `0 6rpx`;
				return style;
			},
			imgStyle() {
				let style = {};
				style.borderRadius = this.mode == 'circle' ? '500px' : '5px';
				return style;
			},
			// 取字符串的第一个字符
			uText() {
				return String(this.text)[0];
			},
			// 性别图标的自定义样式
			uSexStyle() {
				let style = {};
				if(this.sexBgColor) style.backgroundColor = this.sexBgColor;
				return style;
			},
			// 等级图标的自定义样式
			uLevelStyle() {
				let style = {};
				if(this.levelBgColor) style.backgroundColor = this.levelBgColor;
				return style;
			}
		},
		methods: {
			// 图片加载错误时，显示默认头像
			loadError() {
				this.error = true;
                this.avatar = base64Avatar;
			},
			click() {
				this.$emit('click', this.index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-avatar {
		/* #ifndef APP-NVUE */
		display: inline-flex;		
		/* #endif */
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: $u-content-color;
		border-radius: 10px;
		position: relative;
		
		&__img {
			width: 100%;
			height: 100%;
		}
		
		&__sex {
			position: absolute;
			width: 32rpx;
			color: #ffffff;
			height: 32rpx;
			@include vue-flex;
			justify-content: center;
			align-items: center;
			border-radius: 100rpx;
			top: 5%;
			z-index: 1;
			right: -7%;
			border: 1px #ffffff solid;
			
			&--man {
				background-color: $u-type-primary;
			}
			
			&--woman {
				background-color: $u-type-error;
			}
			
			&--none {
				background-color: $u-type-warning;
			}
		}
		
		&__level {
			position: absolute;
			width: 32rpx;
			color: #ffffff;
			height: 32rpx;
			@include vue-flex;
			justify-content: center;
			align-items: center;
			border-radius: 100rpx;
			bottom: 5%; 
			z-index: 1;
			right: -7%;
			border: 1px #ffffff solid;
			background-color: $u-type-warning;
		}
	}
</style>