im/components/MyAvatar/index.vue

<template>
	<u-avatar @longpress="longpress" @click="click" @onError="errorHandle" :src="cachesrc" :text="avatarText"
		bg-color="#cdcdcd" :defaultUrl="getDefaultUrl" :shape="shape" :size="size" mode="aspectFill" font-size="14">
	</u-avatar>
</template>

<script>
	import defaultGroupIcon from "@/static/images/contact_my_group.png";
	import defaultUserIcon from "@/static/images/user/avatar.png";
	import defaultNotifyIcon from "@/static/images/default_notify_icon.png";
	import util from "@/util";
	import md5 from "md5";
	export default {
		name: "MyAvatar",
		props: {
			src: String,
			shape: {
				type: String,
				default: "square",
			},
			size: {
				type: String,
				default: "40",
			},
			isGroup: {
				type: Boolean,
				default: false,
			},
			isNotify: {
				type: Boolean,
				default: false,
			},

			desc: String,
		},
		data() {
			return {
				avatarText: undefined,
				cachesrc:"",
			};
		},
		computed: {
			getDefaultUrl() {
				return this.isGroup ? defaultGroupIcon : defaultUserIcon;
			},
		},
		watch:{
			src(nv,ov){
				this.init(nv);
			},
			desc() {
				//this.redirectShow();
			}
		},
		created() {
			this.init(this.src);
		},
		methods: {
			init(nv){
				const _this = this;
				if (nv) {
					util.cacheFile(util.cdn(nv),'avatar').then(res=>{
						_this.avatarText=""
						_this.cachesrc = res;
						//console.log(_this.cachesrc);
					});
					return ;
				}
				if (this.isGroup) {
					_this.cachesrc = defaultGroupIcon;
					return ;
				}
				if (this.isNotify) {
					_this.cachesrc =  defaultNotifyIcon;
					return ;
				}
				this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
			},
			errorHandle() {
				this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
			},
			click() {
				this.$emit("click");
			},
			longpress() {
				this.$emit("longpress");
			},
		}
	};
</script>

<style></style>