taiyitanghuyi_uniapp/pages/im/conversationList/components/MyAvatar/index.vue

<template>
	<view style="position: relative;">
		<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>
		<slot></slot>
	</view>
  
</template>

<script>
import defaultGroupIcon from "@/pages_im/static/images/contact_my_group.png";
import defaultNotifyIcon from "@/pages_im/static/images/default_notify_icon.png";

export default {
  name: "MyAvatar",
  props: {
    src: String,
    shape: {
      type: String,
      default: "square",
    },
    size: {
      type: String,
      default: "46",
    },
    isGroup: {
      type: Boolean,
      default: false,
    },
    isNotify: {
      type: Boolean,
      default: false,
    },

    desc: String,
  },
  data() {
    return {
       avatarText: undefined,
	   defaultFaceIcon: "https://cqtyt-2025.oss-cn-beijing.aliyuncs.com/huyi/imagesNew/0d7f54fe8adc4d3689923f9bfc83d4c9.png"
    };
  },
  computed: {
    getAvatarUrl() {
		  if (this.isGroup) {
			 return defaultGroupIcon;
		  }
		  else if (this.isNotify) {
			 return defaultNotifyIcon;
		  }
		  else{
			  if (this.src) {
			      return this.src;
			  }else{
			  	  return this.defaultFaceIcon;
			  }
		  }
		  this.avatarText = this.desc ? this.desc.slice(0, 1) : "未知";
		  return "";
    },
    getDdefaultUrl() {
      return this.isGroup ? defaultGroupIcon : undefined;
    },
  },
  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");
    },
  },
  watch: {
    src() {
      this.redirectShow();
    },
    desc() {
      this.redirectShow();
    },
  },
};
</script>

<style>
	
	
</style>