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] || '未知'
|
||
}
|
||
}
|
||
}) |