ylrz_his_scrm_doctorUI/src/components/avatar.vue

<template>
  <div class="avatar" :class="shape === 'circle' ? 'shape-circle' : ''">
    <img :src="avatarSrc">
  </div>
</template>

<script>
import systemAvatar from '@/assets/image/system.png'
import { getOpenIM } from '@/utils/openIM';
export default {
  data:{
    return:{
      OpenIM: null,
    }
  },
  props: {
    src: String,
    type: {
      type: String,
      default: '1'
    },
    shape: {
      type: String,
      default: 'circle'
    }
  },
  async created() {
    try {
      this.OpenIM = getOpenIM()
    } catch (e) {
      console.error('OpenIM 获取失败', e)
    }
  },
  computed: {
    avatarSrc: function () {
      let src = this.src
      if (/^(https:|http:|\/\/)/.test(src)) {
        return src
      } else {
        return this.defaultSrc
      }
    },
    defaultSrc: function () {
      switch(this.type) {
        case 1:
          // 个人头像
          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-2.png'
        case 3:
          // 群默认头像
          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-3.png'
        case 4:
          return systemAvatar
        default:
          // 默认头像
          return 'https://imgcache.qq.com/open/qcloud/video/act/webim-avatar/avatar-1.png'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.avatar
  background-color $first
  text-align center
  width 100%
  height 100%
  overflow hidden
  img
    width 100%
    height 100%
.shape-circle
  border-radius 50%
</style>