117 lines
2.2 KiB
JavaScript
117 lines
2.2 KiB
JavaScript
|
// 用户头像组件逻辑
|
|||
|
|
const { DEFAULT_AVATAR } = require('../../utils/constant.js')
|
|||
|
|
|
|||
|
|
Component({
|
|||
|
|
properties: {
|
|||
|
|
// 头像图片地址
|
|||
|
|
src: {
|
|||
|
|
type: String,
|
|||
|
|
value: ''
|
|||
|
|
},
|
|||
|
|
// 默认头像
|
|||
|
|
defaultAvatar: {
|
|||
|
|
type: String,
|
|||
|
|
value: DEFAULT_AVATAR
|
|||
|
|
},
|
|||
|
|
// 尺寸：small, medium, large, xlarge
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'medium'
|
|||
|
|
},
|
|||
|
|
// 形状：circle, rounded, square
|
|||
|
|
shape: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'circle'
|
|||
|
|
},
|
|||
|
|
// 图片裁剪模式
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'aspectFill'
|
|||
|
|
},
|
|||
|
|
// 是否懒加载
|
|||
|
|
lazyLoad: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
// 是否显示在线状态
|
|||
|
|
showStatus: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
// 在线状态：online, offline, busy, away
|
|||
|
|
status: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'offline'
|
|||
|
|
},
|
|||
|
|
// 徽章数量
|
|||
|
|
badge: {
|
|||
|
|
type: Number,
|
|||
|
|
value: 0
|
|||
|
|
},
|
|||
|
|
// 是否显示加载状态
|
|||
|
|
loading: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: false
|
|||
|
|
},
|
|||
|
|
// 自定义样式
|
|||
|
|
customStyle: {
|
|||
|
|
type: String,
|
|||
|
|
value: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
imageLoaded: false,
|
|||
|
|
imageError: false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 图片加载成功
|
|||
|
|
onImageLoad() {
|
|||
|
|
this.setData({
|
|||
|
|
imageLoaded: true,
|
|||
|
|
imageError: false
|
|||
|
|
})
|
|||
|
|
this.triggerEvent('load')
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 图片加载失败
|
|||
|
|
onImageError(e) {
|
|||
|
|
console.error('头像加载失败:', e)
|
|||
|
|
this.setData({
|
|||
|
|
imageLoaded: false,
|
|||
|
|
imageError: true
|
|||
|
|
})
|
|||
|
|
this.triggerEvent('error', e)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 点击头像
|
|||
|
|
onAvatarTap() {
|
|||
|
|
this.triggerEvent('tap', {
|
|||
|
|
src: this.properties.src,
|
|||
|
|
status: this.properties.status,
|
|||
|
|
badge: this.properties.badge
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 长按头像
|
|||
|
|
onAvatarLongPress() {
|
|||
|
|
this.triggerEvent('longpress', {
|
|||
|
|
src: this.properties.src,
|
|||
|
|
status: this.properties.status,
|
|||
|
|
badge: this.properties.badge
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 获取头像状态文本
|
|||
|
|
getStatusText() {
|
|||
|
|
const statusMap = {
|
|||
|
|
online: '在线',
|
|||
|
|
offline: '离线',
|
|||
|
|
busy: '忙碌',
|
|||
|
|
away: '离开'
|
|||
|
|
}
|
|||
|
|
return statusMap[this.properties.status] || '未知'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|