crm-mobile/components/wk-avatar/wk-avatar.vue

<template>
  <view
    :id="id"
    :style="[boxStyle]"
    class="wk-avatar"
    @click="handleClick">
    <template v-if="avatar">
      <wk-auth-img
        :src="avatar"
        :preview="preview"
        class="wk-avatar-pic"
        @load="handleLoad"
        @error="handleError" />
    </template>
    <template v-else>
      <text :style="{fontSize: size + 'px'}" class="text">
        {{ nameStr }}
      </text>
    </template>
  </view>
</template>

<script>
  import {
    guid,
    unitToPx
  } from '@/utils/lib.js'

  export default {
    name: 'WkAvatar',
    props: {
      name: { // 用户名
        type: String,
        default: ''
      },
      size: { // 无头像图时用户名字体大小
        type: Number,
        default: 16
      },
      avatar:	{ // 头像图
        type: String,
        default: null
      },
      preview: { // 头像是否允许点击查看大图
        type: Boolean,
        default: true
      },
      width: { // 容器宽
        type: [String, Number],
        default: null
      },
      height: { // 容器高
        type: [String, Number],
        default: null
      },
      customerStyle: { // 容器样式
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        id: guid(),
        pixelRatio: 1,
        bgColor: '#3E84E9'
      }
    },
    computed: {
      nameStr() {
        if (!this.name) return ''
        return this.name.length > 2 ? this.name.slice(-2) : this.name
      },
      boxStyle() {
        const obj = {
					...this.customerStyle,
					backgroundColor: this.bgColor
        }
        if (this.width) {
          obj.width = unitToPx(this.width)
        }
        if (this.height) {
          obj.height = unitToPx(this.height)
        }
        return obj
      }
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt)
      },

      handleLoad() {
        this.bgColor = 'unset'
      },
      handleError() {
        this.bgColor = '#3E84E9'
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
		background-color: #3E84E9;
		@include center;

		.text {
			line-height: 1;
			font-size: 28rpx;
			color: white;
			vertical-align: middle;
		}

		.wk-avatar-pic {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			display: block;
		}
	}
</style>