apply-assistant-v3/root/NEUIKit/components/Avatar.vue

<template>
  <div
    class="avatar"
    :style="{ width: avatarSize + 'px', height: avatarSize + 'px' }"
    @click="handleAvatarClick"
    @longpress="longpress"
    @touchend="touchend"
  >  
    <!-- 使用遮罩层避免android长按头像会出现保存图片的弹窗 -->
    <div class="img-mask"></div>
    <image  
      :lazy-load="true"
      class="avatar-img"
      v-if="avatarUrl && avatarUrl.indexOf('.') > -1"
      :src="avatarUrl" 
      mode="aspectFill"
    />
    <!-- <div class="avatar-name-wrapper" :style="{ backgroundColor: color }">
      <div class="avatar-name-text" :style="{ fontSize: fontSize + 'px' }">
        {{ appellation }}
      </div>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { customNavigateTo, customRedirectTo } from '../utils/customNavigate'
import { autorun } from 'mobx'
import {
  ref,
  computed,
  onUnmounted,
  defineProps,
  withDefaults,
} from '../utils/transformVue'
import { deepClone } from '../utils'
import { V2NIMUser } from 'nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK/V2NIMUserService'

const props = withDefaults(
  defineProps<{
    account: string
    teamId?: string
    avatar?: string
    size?: string
    gotoUserCard?: boolean
    fontSize?: string
    isRedirect?: boolean
  }>(),
  {
    teamId: '',
    avatar: '',
    size: '',
    gotoUserCard: false,
    fontSize: '',
    isRedirect: false,
  }
)

const $emit = defineEmits(['onLongpress'])

const avatarSize = props.size || 42
const user = ref<V2NIMUser>()
let isLongPress = false // uniapp 长按事件也会触发点击事件，此时需要处理
const appellation = computed(() => {
  return uni.$UIKitStore.uiStore
    .getAppellation({
      account: props.account,
      teamId: props.teamId,
      ignoreAlias: false,
      nickFromMsg: '',
    })
    .slice(0, 2)
})
const uninstallUserInfoWatch = autorun(async () => {
  uni.$UIKitStore?.userStore?.getUserActive(props.account).then((data) => {
    user.value = data
  })
})

const avatarUrl = computed(() => {
  user.value = uni.$UIKitStore?.userStore?.users?.get(props.account)
  return props.avatar || user.value?.avatar
})

const key = `__yx_avatar_color_${props.account}__`
let color = uni.getStorageSync(key)
if (!color) {
  const colorMap: { [key: number]: string } = {
    0: '#60CFA7',
    1: '#53C3F3',
    2: '#537FF4',
    3: '#854FE2',
    4: '#BE65D9',
    5: '#E9749D',
    6: '#F9B751',
  }
  const _color = colorMap[Math.floor(Math.random() * 7)]
  uni.setStorageSync(key, _color)
  color = _color
}

const handleAvatarClick = () => {
  if (props.gotoUserCard && !isLongPress) {
    if (props.isRedirect) {
      if (props.account === uni.$UIKitStore?.userStore?.myUserInfo.accountId) {
        customRedirectTo({
          url: `/pages/user-card/my-detail/index`,
        })
      } else {
        customRedirectTo({
          url: `/pages/user-card/friend/index?account=${props.account}`,
        })
      }
    } else {
      if (props.account === uni.$UIKitStore?.userStore?.myUserInfo.accountId) {
        customNavigateTo({
          url: `/pages/user-card/my-detail/index`,
        })
      } else {
        customNavigateTo({
          url: `/pages/user-card/friend/index?account=${props.account}`,
        })
      }
    }
  }
}

const longpress = () => {
  isLongPress = true
  $emit('onLongpress')
}

const touchend = () => {
  setTimeout(() => {
    isLongPress = false
  }, 200)
}

onUnmounted(() => {
  uninstallUserInfoWatch()
})
</script>

<style scoped lang="scss">
.avatar {
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}

.img-mask {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-name-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-name-text {
  color: #fff;
  size: 14px;
}
</style>