heshanApp/pages_im/components/MyAvatar/index.vue

<template>
	<view :style="[containerStyle, {position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center'}]">
		<u-avatar
		  @longpress="longpress"
		  @click="click"
		  @onError="errorHandle"
		  :src="getAvatarUrl"
		  :text="avatarText"
		  bgColor="#e5e5e5"
		  :defaultUrl="getDdefaultUrl"
		  :shape="shape"
		  :size="size"
		  mode="aspectFill"
		  font-size="14">
		</u-avatar>
	
		<!-- <image  @longpress="longpress"  @click="click" :src="getAvatarUrl" class="headImg"></image> -->
		
		<slot></slot>
		
	</view>
  
</template>

<script>
import defaultGroupIcon from "../../static/images/contact_my_group.png";
import defaultNotifyIcon from "../../static/images/default_notify_icon.png";
import defaultFaceIcon from "../../static/images/default_head.png";
export default {
  name: "MyAvatar",
  props: {
    src:{
		type: String,
		default: "", 
	},
    shape: {
      type: String,
      default: "square", //square   circle
    },
    size: {
      type: String,
      default: "46",
    },
    isGroup: {
      type: Boolean,
      default: false,
    },
    isNotify: {
      type: Boolean,
      default: false,
    },

    desc: String,
  },
  data() {
    return {
      avatarText: undefined,
	  defaultImg:""
    };
  },
  computed: {
    containerStyle() {
      let borderRadius = '4px';
      if (this.shape === 'circle') {
          borderRadius = '50%';
      }
      return {
          borderRadius: borderRadius,
          backgroundColor: '#F4F5F7' 
      };
    },
	
    getAvatarUrl() {
      if (this.src && this.src.trim() !== "" && this.src !== "undefined" && this.src !== "null") {
         return this.src;
      }
	  if (this.isGroup) {
	     return defaultGroupIcon;
	  }
      if (this.isNotify) {
        return defaultNotifyIcon;
      }
      return defaultFaceIcon;
    },
    getDdefaultUrl() {
      return this.isGroup ? defaultGroupIcon : undefined;
    },
  },
  watch: {
    src(newVal, oldVal) {
        //console.log("qxj MyAvatar src changed", oldVal, "→", newVal);
        this.redirectShow();
    },
    desc() {
      this.redirectShow();
    },
  },
  methods: {
    errorHandle() {
      this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
    },
    redirectShow() {
      if (this.avatarText) {
        this.avatarText = undefined;
      }
    },
    click() {
      this.$emit("click");
    },
    longpress() {
      this.$emit("longpress");
    },
  },
};
</script>

<style lang="scss">

	.headImg{
		background: #f5f5f5;
		width: 60px;
		height: 60px;
		border-radius:10px ;
	}
	
	
</style>